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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/run-after-display.js"></script>
   5 <style>
   6 .composited {
   7   -webkit-transform: translatez(0);
   8 }
   9
  10 .background {
  11   position: fixed;
  12   background-color: lightgray;
  13   width: 300px;
  14   height: 300px;
  15   top: 150px;
  16   left: 100px;
  17 }
  18
  19 .cyan {
  20   background-color: cyan;
  21 }
  22
  23 .lime {
  24   background-color: lime;
  25 }
  26
  27 .overlapping {
  28   position: relative;
  29   z-index: 1;
  30   width: 200px;
  31   height: 100px;
  32 }
  33
  34 #description {
  35   position: absolute;
  36   top: 100px;
  37   left: 450px;
  38   width: 300px;
  39 }
  40
  41 #testResults {
  42   display: none;
  43 }
  44
  45 body {
  46   margin: 0px;
  47 }
  48 </style>
  49
  50 <script>
  51     if (window.testRunner) {
  52         testRunner.waitUntilDone();
  53         testRunner.dumpAsText();
  54     }
  55
  56     if (window.internals) {
  57         internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);
  58         internals.settings.setLayerSquashingEnabled(true);
  59     }
  60
  61     function runTest()
  62     {
  63         if (!window.internals)
  64             return;
  65
  66         (function() {
  67
  68           return new Promise(function(resolve) {
  69               // Case 1
  70               document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  71
  72               resolve();
  73           });
  74
  75         })().then(function() {
  76
  77             return new Promise(function(resolve) {
  78
  79                 // Case 2
  80                 window.internals.startTrackingRepaints(document);
  81                 window.scrollTo(0, 80);
  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                     resolve();
  87                 });
  88
  89           });
  90
  91         }).then(function() {
  92
  93             return new Promise(function(resolve) {
  94
  95                 // Case 3
  96                 window.internals.startTrackingRepaints(document);
  97                 window.scrollTo(0, 120);
  98                 runAfterDisplay(function() {
  99                     document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 100                     window.internals.stopTrackingRepaints(document);
 101
 102                     resolve();
 103                 });
 104
 105             });
 106
 107         }).then(function() {
 108
 109             return new Promise(function(resolve) {
 110
 111                 // Case 4
 112                 window.internals.startTrackingRepaints(document);
 113                 window.scrollTo(0, 170);
 114                 runAfterDisplay(function() {
 115                     document.getElementById('Case4').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 116                     window.internals.stopTrackingRepaints(document);
 117
 118                     resolve();
 119                 });
 120
 121             });
 122
 123         }).then(function() {
 124
 125           // Display the test results only after test is done so that it does not affect repaint rect results.
 126           document.getElementById('testResults').style.display = "block";
 127
 128           if (window.testRunner)
 129               testRunner.notifyDone();
 130
 131         }).catch(function(e) {
 132
 133           console.error(e);
 134
 135         });
 136     }
 137 </script>
 138 </head>
 139
 140 <body onload="runTest()">
 141
 142   <div id="description">
 143     <p>The gray div is a composited fixed-position element, and the cyan/lime
 144     elements should be squashed together on top. When scrolling, paragraphs may
 145     pop in-and-out of the squashing layer when they change overlapping status
 146     with respect to the composited layer underneath.</p>
 147
 148     <p>This scenario tests (1) that content repaints correctly as layers pop in
 149     and out of squashing, and (2) that the positioning of the squashing layer
 150     remains correct (i.e. scrolls properly) when the squashing layer is on top
 151     of a fixed-position composited layer.</p>
 152   </div>
 153
 154   <div class="composited background"> </div>
 155
 156   <div id="paragraph-a" class="overlapping cyan"></div>
 157   <div id="paragraph-b" class="overlapping lime"></div>
 158   <div id="paragraph-c" class="overlapping cyan"></div>
 159   <div id="paragraph-d" class="overlapping lime"></div>
 160   <div id="paragraph-e" class="overlapping cyan"></div>
 161   <div id="paragraph-f" class="overlapping lime"></div>
 162   <div id="paragraph-g" class="overlapping cyan"></div>
 163   <div id="paragraph-h" class="overlapping lime"></div>
 164   <div id="paragraph-i" class="overlapping cyan"></div>
 165   <div id="paragraph-j" class="overlapping lime"></div>
 166   <div id="paragraph-k" class="overlapping cyan"></div>
 167   <div id="paragraph-l" class="overlapping lime"></div>
 168   <div id="paragraph-m" class="overlapping cyan"></div>
 169   <div id="paragraph-n" class="overlapping lime"></div>
 170
 171   <div id="testResults">
 172     CASE 1, original layer tree:
 173     <pre id="Case1"></pre>
 174
 175     CASE 2, scrolling y to 80, new layers will be squashed, so things repaint:
 176     <pre id="Case2"></pre>
 177
 178     CASE 3, scrolling y to 120, no repaints expected:
 179     <pre id="Case3"></pre>
 180
 181     CASE 4, scrolling y to 170 new layers will be squashed, so things repaint:
 182     <pre id="Case4"></pre>
 183   </div>
 184
 185 </body>
 186
 187 </html>