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

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