| <!DOCTYPE html> |
| <html id="htmlTag"> |
| |
| <head> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <style> |
| #fixed { |
| backface-visibility: hidden; |
| position: fixed; |
| z-index: 1; |
| width: 400px; |
| height: 200px; |
| background-color: blue; |
| } |
| |
| #compositedInsideFixed { |
| backface-visibility: hidden; |
| width: 50px; |
| height: 50px; |
| background-color: red; |
| } |
| |
| #container { |
| position: absolute; |
| z-index: 2; |
| top: 50px; |
| left: 100px; |
| width: 200px; |
| height: 4000px; |
| background-color: cyan; |
| } |
| |
| #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; |
| |
| // Display the test results only after test is done so that it does not affect repaint rect results. |
| document.getElementById('testResults').style.display = "block"; |
| // Case 1 |
| document.getElementById('Case1').textContent = internals.layerTreeAsText(document); |
| |
| // Case 2 |
| window.scrollTo(0, 80); |
| runAfterLayoutAndPaint(function() { |
| document.getElementById('Case2').textContent = internals.layerTreeAsText(document); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| }); |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <div id="description"> |
| <p> |
| This scenario verifies that the cyan "container" element scrolls properly with squashing enabled. |
| The "container" element should not squash into a composited layer mapping owned by the fixed |
| position layer or its descendant, since this would make it behave like a fixed position |
| element during composited scrolling. |
| </p> |
| </div> |
| |
| <div id="fixed"> |
| <div id="compositedInsideFixed"></div> |
| </div> |
| |
| <div id="container"></div> |
| |
| <div id="testResults"> |
| CASE 1, original layer tree: |
| <pre id="Case1"></pre> |
| |
| CASE 2, scrolling y to 80, the "container" element should remain positioned with respect to the scrolled document, the fixed-pos layer compensates for the new scroll position: |
| <pre id="Case2"></pre> |
| </div> |
| |
| </body> |
| </html> |
