| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| |
| #backgroundFixed { |
| transform: translatez(0); |
| position: fixed; |
| height: 400px; |
| width: 400px; |
| z-index: 1; |
| background-color: gray; |
| } |
| |
| #container { |
| position: absolute; |
| z-index: 2; |
| top: 100px; |
| left: 100px; |
| width: 960px; |
| background-color: green; |
| width: 100px; |
| height: 4000px; |
| } |
| |
| #innerFixed { |
| transform: translatez(0); |
| background-color: blue; |
| position: fixed; |
| top: 150px; |
| left: 100px; |
| width: 200px; |
| height: 100px; |
| } |
| |
| #innerScrolling { |
| background-color: lime; |
| position: absolute; |
| left: 100px; |
| height: 100px; |
| width: 100px; |
| } |
| |
| #description { |
| position: absolute; |
| top: 100px; |
| left: 450px; |
| width: 300px; |
| } |
| |
| #testResults { |
| display: none; |
| } |
| |
| body { |
| margin: 0; |
| } |
| |
| </style> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function runTest() |
| { |
| if (!window.internals) |
| return; |
| |
| // Case 1 |
| document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_PAINT_INVALIDATIONS); |
| |
| // Case 2 |
| window.internals.startTrackingRepaints(document); |
| window.scrollTo(0, 10); |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_PAINT_INVALIDATIONS); |
| window.internals.stopTrackingRepaints(document); |
| |
| // Case 3 |
| window.internals.startTrackingRepaints(document); |
| window.scrollTo(0, 110); |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_PAINT_INVALIDATIONS); |
| window.internals.stopTrackingRepaints(document); |
| |
| // 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(); |
| }); |
| }); |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <div id="description"> |
| <p>This scenario verifies that the green "container" element and lime |
| "innerScrolling" element scroll properly even though there is a blue |
| fixed-position element layered in between them.</p> |
| |
| <p>The catch is that the squashing requirements should be computed in |
| correct paint order, so that the green container does not accidentally |
| position itself with respect to the wrong layer and not scroll.</p> |
| </div> |
| |
| <div id="backgroundFixed"></div> |
| |
| <div id="container"> |
| <div id="innerFixed"></div> |
| <div id="innerScrolling"></div> |
| </div> |
| |
| <div id="testResults"> |
| CASE 1, original layer tree: |
| <pre id="Case1"></pre> |
| |
| CASE 2, scrolling y by 10 pixels, both the "container" and "inner" should scroll properly. |
| <pre id="Case2"></pre> |
| |
| 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: |
| <pre id="Case3"></pre> |
| </div> |
| </body> |
