third_party/WebKit/LayoutTests/compositing/squashing/move-squashing-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       div {
   6         width: 100px;
   7         height: 100px;
   8         background-color: yellow;
   9       }
  10
  11       #squashed {
  12         background-color: blue;
  13         z-index: 2;
  14         position:relative;
  15       }
  16
  17       #host {
  18         position: absolute;
  19         background-color: green;
  20         top: 100px;
  21         z-index: 1;
  22         transform:translateZ(0);
  23       }
  24
  25       #background {
  26         transform:translateZ(0);
  27         z-index: 0;
  28         position: absolute;
  29         top: 50px;
  30       }
  31     </style>
  32     <script>
  33       if (window.testRunner)
  34         testRunner.dumpAsText();
  35
  36       function doTest() {
  37         if (window.internals)
  38           window.internals.forceCompositingUpdate(document);
  39         document.getElementById('host').style.left = '100px';
  40         document.getElementById('console').textContent = window.internals.layerTreeAsText(document);
  41       }
  42     </script>
  43   </head>
  44   <body onload='doTest()'>
  45     <div id='background'></div>
  46     <div id='squashed'></div>
  47     <div id='host'></div>
  48
  49     <p style='position: relative; top: 200px;' style='display:none'>
  50     This tests that squashed layers' offset from renderer is updated properly. If not properly updated,
  51     the two divs will appear to be aligned vertically in the pixel results, while really the blue div
  52     ('squashed') should be offset 100px left of the green ('host').
  53     </p>
  54     <pre id='console' style='position: relative; top: 200px;'></pre>
  55   </body>
  56 </html>