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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/run-after-layout-and-paint.js"></script>
   5 <style>
   6 .composited {
   7   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.setPreferCompositingToLCDTextEnabled(true);
  58
  59     function runTest()
  60     {
  61         if (!window.internals)
  62             return;
  63
  64         (function() {
  65
  66           return new Promise(function(resolve) {
  67               // Case 1
  68               document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  69
  70               resolve();
  71           });
  72
  73         })().then(function() {
  74
  75             return new Promise(function(resolve) {
  76
  77                 // Case 2
  78                 window.internals.startTrackingRepaints(document);
  79                 window.scrollTo(0, 80);
  80                 runAfterLayoutAndPaint(function() {
  81                     document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  82                     window.internals.stopTrackingRepaints(document);
  83
  84                     resolve();
  85                 });
  86
  87           });
  88
  89         }).then(function() {
  90
  91             return new Promise(function(resolve) {
  92
  93                 // Case 3
  94                 window.internals.startTrackingRepaints(document);
  95                 window.scrollTo(0, 120);
  96                 runAfterLayoutAndPaint(function() {
  97                     document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  98                     window.internals.stopTrackingRepaints(document);
  99
 100                     resolve();
 101                 });
 102
 103             });
 104
 105         }).then(function() {
 106
 107             return new Promise(function(resolve) {
 108
 109                 // Case 4
 110                 window.internals.startTrackingRepaints(document);
 111                 window.scrollTo(0, 170);
 112                 runAfterLayoutAndPaint(function() {
 113                     document.getElementById('Case4').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 114                     window.internals.stopTrackingRepaints(document);
 115
 116                     resolve();
 117                 });
 118
 119             });
 120
 121         }).then(function() {
 122
 123           // Display the test results only after test is done so that it does not affect repaint rect results.
 124           document.getElementById('testResults').style.display = "block";
 125
 126           if (window.testRunner)
 127               testRunner.notifyDone();
 128
 129         }).catch(function(e) {
 130
 131           console.error(e);
 132
 133         });
 134     }
 135 </script>
 136 </head>
 137
 138 <body onload="runTest()">
 139
 140   <div id="description">
 141     <p>The gray div is a composited fixed-position element, and the cyan/lime
 142     elements should be squashed together on top. When scrolling, paragraphs may
 143     pop in-and-out of the squashing layer when they change overlapping status
 144     with respect to the composited layer underneath.</p>
 145
 146     <p>This scenario tests (1) that content repaints correctly as layers pop in
 147     and out of squashing, and (2) that the positioning of the squashing layer
 148     remains correct (i.e. scrolls properly) when the squashing layer is on top
 149     of a fixed-position composited layer.</p>
 150   </div>
 151
 152   <div class="composited background"> </div>
 153
 154   <div id="paragraph-a" class="overlapping cyan"></div>
 155   <div id="paragraph-b" class="overlapping lime"></div>
 156   <div id="paragraph-c" class="overlapping cyan"></div>
 157   <div id="paragraph-d" class="overlapping lime"></div>
 158   <div id="paragraph-e" class="overlapping cyan"></div>
 159   <div id="paragraph-f" class="overlapping lime"></div>
 160   <div id="paragraph-g" class="overlapping cyan"></div>
 161   <div id="paragraph-h" class="overlapping lime"></div>
 162   <div id="paragraph-i" class="overlapping cyan"></div>
 163   <div id="paragraph-j" class="overlapping lime"></div>
 164   <div id="paragraph-k" class="overlapping cyan"></div>
 165   <div id="paragraph-l" class="overlapping lime"></div>
 166   <div id="paragraph-m" class="overlapping cyan"></div>
 167   <div id="paragraph-n" class="overlapping lime"></div>
 168
 169   <div id="testResults">
 170     CASE 1, original layer tree:
 171     <pre id="Case1"></pre>
 172
 173     CASE 2, scrolling y to 80, new layers will be squashed, so things repaint:
 174     <pre id="Case2"></pre>
 175
 176     CASE 3, scrolling y to 120, no repaints expected:
 177     <pre id="Case3"></pre>
 178
 179     CASE 4, scrolling y to 170 new layers will be squashed, so things repaint:
 180     <pre id="Case4"></pre>
 181   </div>
 182
 183 </body>
 184
 185 </html>