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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/run-after-layout-and-paint.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     function runTest()
  69     {
  70         if (!window.internals)
  71             return;
  72
  73         // Case 1
  74         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  75
  76         // Case 2
  77         window.internals.startTrackingRepaints(document);
  78         window.scrollTo(0, 10);
  79         runAfterLayoutAndPaint(function() {
  80           document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  81           window.internals.stopTrackingRepaints(document);
  82
  83           // Case 3
  84           window.internals.startTrackingRepaints(document);
  85           window.scrollTo(0, 110);
  86           runAfterLayoutAndPaint(function() {
  87             document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  88             window.internals.stopTrackingRepaints(document);
  89
  90             // Display the test results only after test is done so that it does not affect repaint rect results.
  91             document.getElementById('testResults').style.display = "block";
  92
  93             if (window.testRunner)
  94               testRunner.notifyDone();
  95           });
  96         });
  97     }
  98 </script>
  99 </head>
 100
 101 <body onload="runTest()">
 102   <div id="description">
 103     <p>This scenario verifies that the green "container" element and lime
 104     "innerScrolling" element scroll properly even though there is a blue
 105     fixed-position element layered in between them.</p>
 106
 107     <p>The catch is that the squashing requirements should be computed in
 108     correct paint order, so that the green container does not accidentally
 109     position itself with respect to the wrong layer and not scroll.</p>
 110   </div>
 111
 112   <div id="backgroundFixed"></div>
 113
 114   <div id="container">
 115     <div id="innerFixed"></div>
 116     <div id="innerScrolling"></div>
 117   </div>
 118
 119   <div id="testResults">
 120     CASE 1, original layer tree:
 121     <pre id="Case1"></pre>
 122
 123     CASE 2, scrolling y by 10 pixels, both the "container" and "inner" should scroll properly.
 124     <pre id="Case2"></pre>
 125
 126     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:
 127     <pre id="Case3"></pre>
 128   </div>
 129 </body>