src/third_party/WebKit/LayoutTests/compositing/squashing/squash-above-fixed-2.html

   1 <!DOCTYPE html>
   2 <html id="htmlTag">
   3
   4 <head>
   5 <style>
   6 #fixed {
   7   -webkit-transform: translatez(0);
   8   position: fixed;
   9   z-index: 1;
  10   width: 400px;
  11   height: 200px;
  12   background-color: blue;
  13 }
  14
  15 #compositedInsideFixed {
  16   -webkit-transform: translatez(0);
  17   width: 50px;
  18   height: 50px;
  19   background-color: red;
  20 }
  21
  22 #container {
  23   position: absolute;
  24   z-index: 2;
  25   top: 50px;
  26   left: 100px;
  27   width: 200px;
  28   height: 4000px;
  29   background-color: cyan;
  30 }
  31
  32 #description {
  33   position: absolute;
  34   top: 100px;
  35   left: 450px;
  36   width: 300px;
  37 }
  38
  39 #testResults {
  40   display: none;
  41 }
  42
  43 body {
  44   margin: 0;
  45 }
  46
  47 </style>
  48
  49 <script>
  50     if (window.testRunner)
  51         testRunner.dumpAsText();
  52
  53     if (window.internals)
  54         internals.settings.setLayerSquashingEnabled(true);
  55
  56     function runTest()
  57     {
  58         if (!window.internals)
  59             return;
  60
  61         // Display the test results only after test is done so that it does not affect repaint rect results.
  62         document.getElementById('testResults').style.display = "block";
  63         // Case 1
  64         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  65
  66         // Case 2
  67         window.scrollTo(0, 80);
  68         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  69     }
  70 </script>
  71 </head>
  72
  73 <body onload="runTest()">
  74   <div id="description">
  75     <p>This scenario verifies that the cyan "container" element scrolls properly with squashing enabled.</p>
  76   </div>
  77
  78   <div id="fixed">
  79     <div id="compositedInsideFixed"></div>
  80   </div>
  81
  82   <div id="container"></div>
  83
  84   <div id="testResults">
  85     CASE 1, original layer tree:
  86     <pre id="Case1"></pre>
  87
  88     CASE 2, scrolling y to 80, the "container" element should remain positioned with respect to the scrolled document, the fixed-pos layer compensates for the new scroll position:
  89     <pre id="Case2"></pre>
  90   </div>
  91
  92 </body>
  93 </html>