third_party/WebKit/LayoutTests/compositing/fixed-position-changed-to-absolute.html

   1 <!DOCTYPE HTML>
   2 <style>
   3 .composited {
   4   position: absolute;
   5   transform: translateZ(0);
   6   width: 150px;
   7   height: 150px;
   8   background: #D9CCA7;
   9 }
  10 body {
  11   background: #402B3C;
  12 }
  13 #layer-A {
  14   overflow: hidden;
  15   width: 50px;
  16   height: 50px;
  17   border: solid 5px #402B3C;
  18   position: fixed;
  19   background: #6AA6A6;
  20   top: 20px;
  21   left: 20px;
  22 }
  23 #layer-B {
  24   width: 100px;
  25   height: 100px;
  26   background: #F26835;
  27   position: absolute;
  28   top: 100px;
  29   left: 100px;
  30 }
  31 #layer-C {
  32   width: 200px;
  33   height: 20px;
  34   background: #F2B263;
  35   position: absolute;
  36   border: solid 3px #6AA6A6;
  37   top: 40px;
  38   left: 40px;
  39 }
  40 </style>
  41 <div class="composited"></div>
  42 <div id="layer-A"></div>
  43 <div id="layer-B"></div>
  44 <div id="layer-C"></div>
  45 <pre><pre>
  46 <script>
  47 if (window.testRunner) {
  48     testRunner.dumpAsText();
  49     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  50 } else {
  51     alert('This test requires testRunner');
  52 }
  53
  54 window.internals.forceCompositingUpdate(document);
  55 document.getElementById("layer-A").style.position = "absolute";
  56 document.querySelector('pre').textContent = window.internals.layerTreeAsText(document);
  57 </script>