4 <script src="../../resources/run-after-display.js"></script>
8 -webkit-transform: translatez(0);
13 background-color: gray;
22 background-color: green;
28 -webkit-transform: translatez(0);
29 background-color: blue;
38 background-color: lime;
63 if (window.testRunner) {
64 testRunner.dumpAsText();
65 testRunner.waitUntilDone();
69 internals.settings.setLayerSquashingEnabled(true);
73 if (!window.internals)
77 document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
80 window.internals.startTrackingRepaints(document);
81 window.scrollTo(0, 10);
82 runAfterDisplay(function() {
83 document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
84 window.internals.stopTrackingRepaints(document);
87 window.internals.startTrackingRepaints(document);
88 window.scrollTo(0, 110);
89 runAfterDisplay(function() {
90 document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
91 window.internals.stopTrackingRepaints(document);
93 // Display the test results only after test is done so that it does not affect repaint rect results.
94 document.getElementById('testResults').style.display = "block";
96 if (window.testRunner)
97 testRunner.notifyDone();
104 <body onload="runTest()">
105 <div id="description">
106 <p>This scenario verifies that the green "container" element and lime
107 "innerScrolling" element scroll properly even though there is a blue
108 fixed-position element layered in between them.</p>
110 <p>The catch is that the squashing requirements should be computed in
111 correct paint order, so that the green container does not accidentally
112 position itself with respect to the wrong layer and not scroll.</p>
115 <div id="backgroundFixed"></div>
118 <div id="innerFixed"></div>
119 <div id="innerScrolling"></div>
122 <div id="testResults">
123 CASE 1, original layer tree:
124 <pre id="Case1"></pre>
126 CASE 2, scrolling y by 10 pixels, both the "container" and "inner" should scroll properly.
127 <pre id="Case2"></pre>
129 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:
130 <pre id="Case3"></pre>