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-layout-and-paint.js"></script>
   6 <style>
   7 #fixed {
   8   -webkit-backface-visibility: hidden;
   9   position: fixed;
  10   z-index: 1;
  11   width: 400px;
  12   height: 200px;
  13   background-color: blue;
  14 }
  15
  16 #compositedInsideFixed {
  17   -webkit-backface-visibility: hidden;
  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     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         runAfterLayoutAndPaint(function() {
  69           document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  70           if (window.testRunner) {
  71             testRunner.notifyDone();
  72           }
  73         });
  74     }
  75 </script>
  76 </head>
  77
  78 <body onload="runTest()">
  79   <div id="description">
  80     <p>
  81       This scenario verifies that the cyan "container" element scrolls properly with squashing enabled.
  82       The "container" element should not squash into a composited layer mapping owned by the fixed
  83       position layer or its descendant, since this would make it behave like a fixed position
  84       element during composited scrolling.
  85     </p>
  86   </div>
  87
  88   <div id="fixed">
  89     <div id="compositedInsideFixed"></div>
  90   </div>
  91
  92   <div id="container"></div>
  93
  94   <div id="testResults">
  95     CASE 1, original layer tree:
  96     <pre id="Case1"></pre>
  97
  98     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:
  99     <pre id="Case2"></pre>
 100   </div>
 101
 102 </body>
 103 </html>