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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/run-after-display.js"></script>
   5 <style>
   6
   7 #backgroundFixed {
   8   transform: translatez(0);
   9   position: fixed;
  10   height: 400px;
  11   width: 400px;
  12   z-index: 1;
  13   background-color: gray;
  14 }
  15
  16 #container {
  17   position: absolute;
  18   z-index: 2;
  19   top: 100px;
  20   left: 100px;
  21   width: 960px;
  22   background-color: green;
  23   width: 100px;
  24   height: 4000px;
  25 }
  26
  27 #innerFixed {
  28   transform: translatez(0);
  29   background-color: blue;
  30   position: fixed;
  31   top: 150px;
  32   left: 100px;
  33   width: 200px;
  34   height: 100px;
  35 }
  36
  37 #innerScrolling {
  38   background-color: lime;
  39   position: absolute;
  40   left: 100px;
  41   height: 100px;
  42   width: 100px;
  43 }
  44
  45 #description {
  46   position: absolute;
  47   top: 100px;
  48   left: 450px;
  49   width: 300px;
  50 }
  51
  52 #testResults {
  53   display: none;
  54 }
  55
  56 body {
  57   margin: 0;
  58 }
  59
  60 </style>
  61
  62 <script>
  63     if (window.testRunner) {
  64         testRunner.dumpAsText();
  65         testRunner.waitUntilDone();
  66     }
  67
  68     if (window.internals)
  69         internals.settings.setLayerSquashingEnabled(true);
  70
  71     function runTest()
  72     {
  73         if (!window.internals)
  74             return;
  75
  76         // Case 1
  77         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  78
  79         // Case 2
  80         window.internals.startTrackingRepaints(document);
  81         window.scrollTo(0, 10);
  82         runAfterDisplay(function() {
  83           document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  84           window.internals.stopTrackingRepaints(document);
  85
  86           // Case 3
  87           window.internals.startTrackingRepaints(document);
  88           window.scrollTo(0, 110);
  89           runAfterDisplay(function() {
  90             document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  91             window.internals.stopTrackingRepaints(document);
  92
  93             // Display the test results only after test is done so that it does not affect repaint rect results.
  94             document.getElementById('testResults').style.display = "block";
  95
  96             if (window.testRunner)
  97               testRunner.notifyDone();
  98           });
  99         });
 100     }
 101 </script>
 102 </head>
 103
 104 <body onload="runTest()">
 105   <div id="description">
 106     <p>This scenario verifies that the green "container" element and lime
 107     "innerScrolling" element scroll properly even though there is a blue
 108     fixed-position element layered in between them.</p>
 109
 110     <p>The catch is that the squashing requirements should be computed in
 111     correct paint order, so that the green container does not accidentally
 112     position itself with respect to the wrong layer and not scroll.</p>
 113   </div>
 114
 115   <div id="backgroundFixed"></div>
 116
 117   <div id="container">
 118     <div id="innerFixed"></div>
 119     <div id="innerScrolling"></div>
 120   </div>
 121
 122   <div id="testResults">
 123     CASE 1, original layer tree:
 124     <pre id="Case1"></pre>
 125
 126     CASE 2, scrolling y by 10 pixels, both the "container" and "inner" should scroll properly.
 127     <pre id="Case2"></pre>
 128
 129     CASE 3, scrolling y further so that "inner" no longer overlaps the fixed-pos layer, then the stacking context of "container" includes the "innerScrolling" layer, and doubles in width:
 130     <pre id="Case3"></pre>
 131   </div>
 132 </body>