| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| .composited { |
| will-change: transform; |
| } |
| |
| .background { |
| position: fixed; |
| background-color: lightgray; |
| width: 300px; |
| height: 300px; |
| top: 150px; |
| left: 100px; |
| } |
| |
| .cyan { |
| background-color: cyan; |
| } |
| |
| .lime { |
| background-color: lime; |
| } |
| |
| .overlapping { |
| position: relative; |
| z-index: 1; |
| width: 200px; |
| height: 100px; |
| } |
| |
| #description { |
| position: absolute; |
| top: 100px; |
| left: 450px; |
| width: 300px; |
| } |
| |
| #testResults { |
| display: none; |
| } |
| |
| body { |
| margin: 0px; |
| } |
| </style> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| if (window.internals) |
| internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| |
| function runTest() |
| { |
| if (!window.internals) |
| return; |
| |
| (function() { |
| |
| return new Promise(function(resolve) { |
| // Case 1 |
| document.getElementById('Case1').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS); |
| |
| resolve(); |
| }); |
| |
| })().then(function() { |
| |
| return new Promise(function(resolve) { |
| |
| // Case 2 |
| internals.startTrackingRepaints(document); |
| window.scrollTo(0, 80); |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('Case2').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS); |
| internals.stopTrackingRepaints(document); |
| |
| resolve(); |
| }); |
| |
| }); |
| |
| }).then(function() { |
| |
| return new Promise(function(resolve) { |
| |
| // Case 3 |
| internals.startTrackingRepaints(document); |
| window.scrollTo(0, 120); |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('Case3').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS); |
| internals.stopTrackingRepaints(document); |
| |
| resolve(); |
| }); |
| |
| }); |
| |
| }).then(function() { |
| |
| return new Promise(function(resolve) { |
| |
| // Case 4 |
| internals.startTrackingRepaints(document); |
| window.scrollTo(0, 170); |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('Case4').textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS); |
| internals.stopTrackingRepaints(document); |
| |
| resolve(); |
| }); |
| |
| }); |
| |
| }).then(function() { |
| |
| // Display the test results only after test is done so that it does not affect repaint rect results. |
| document.getElementById('testResults').style.display = "block"; |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| |
| }).catch(function(e) { |
| |
| console.error(e); |
| |
| }); |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| |
| <div id="description"> |
| <p>The gray div is a composited fixed-position element, and the cyan/lime |
| elements should be squashed together on top. When scrolling, paragraphs may |
| pop in-and-out of the squashing layer when they change overlapping status |
| with respect to the composited layer underneath.</p> |
| |
| <p>This scenario tests (1) that content repaints correctly as layers pop in |
| and out of squashing, and (2) that the positioning of the squashing layer |
| remains correct (i.e. scrolls properly) when the squashing layer is on top |
| of a fixed-position composited layer.</p> |
| </div> |
| |
| <div class="composited background"> </div> |
| |
| <div id="paragraph-a" class="overlapping cyan"></div> |
| <div id="paragraph-b" class="overlapping lime"></div> |
| <div id="paragraph-c" class="overlapping cyan"></div> |
| <div id="paragraph-d" class="overlapping lime"></div> |
| <div id="paragraph-e" class="overlapping cyan"></div> |
| <div id="paragraph-f" class="overlapping lime"></div> |
| <div id="paragraph-g" class="overlapping cyan"></div> |
| <div id="paragraph-h" class="overlapping lime"></div> |
| <div id="paragraph-i" class="overlapping cyan"></div> |
| <div id="paragraph-j" class="overlapping lime"></div> |
| <div id="paragraph-k" class="overlapping cyan"></div> |
| <div id="paragraph-l" class="overlapping lime"></div> |
| <div id="paragraph-m" class="overlapping cyan"></div> |
| <div id="paragraph-n" class="overlapping lime"></div> |
| |
| <div id="testResults"> |
| CASE 1, original layer tree: |
| <pre id="Case1"></pre> |
| |
| CASE 2, scrolling y to 80, new layers will be squashed, so things repaint: |
| <pre id="Case2"></pre> |
| |
| CASE 3, scrolling y to 120, no repaints expected: |
| <pre id="Case3"></pre> |
| |
| CASE 4, scrolling y to 170 new layers will be squashed, so things repaint: |
| <pre id="Case4"></pre> |
| </div> |
| |
| </body> |
| |
| </html> |
