| <!DOCTYPE html> |
| <style> |
| body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| #nonFastRegion { |
| height: 222px; |
| width: 222px; |
| border: none; |
| overflow: scroll; |
| -webkit-transform: translateX(0); |
| } |
| |
| #nonFastRegion > div { |
| height: 1000px; |
| width: 1000px; |
| background: linear-gradient(to bottom, red, white); |
| } |
| |
| .spacer { |
| height: 2000px; |
| } |
| </style> |
| |
| <div id='nonFastRegion'><div>This should be covered by a green overlay.</div></div> |
| |
| <p>A single square should be visible covered by a green overlay.</p> |
| <div id="console"></div> |
| <div class="spacer"></div> |
| |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/run-after-layout-and-paint.js"></script> |
| <script src="resources/non-fast-scrollable-region-testing.js"></script> |
| <script> |
| jsTestIsAsync = true; |
| // print result lazily to avoid layouts during the test |
| setPrintTestResultsLazily(); |
| description('This test ensures that transforming a non-fast scrollable area ' + |
| 'correctly updates list of non-fast scrollable rects ' + |
| '(See http://crbug.com/417345).'); |
| |
| onload = function() { |
| runAfterLayoutAndPaint(runTests); |
| }; |
| |
| function runTests() { |
| nonFastScrollableRects = internals.nonFastScrollableRects(document); |
| shouldBe('nonFastScrollableRects.length', '1'); |
| shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[0, 0, 222, 222]'); |
| |
| document.body.style.padding = "10px"; |
| debug("Trigger style update"); |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| debug("Verifying layout hasn't been triggered"); |
| shouldBe("internals.needsLayoutCount()", "3"); |
| |
| // Updating transforms hits an optimized layout path which is root cause of |
| // http://crbug.com/417345 |
| debug("Update non-fast element's transform"); |
| document.getElementById('nonFastRegion').style.webkitTransform = 'translateX(100px)'; |
| |
| debug("Trigger style update"); |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| debug("Verifying layout still hasn't been triggered"); |
| shouldBe("internals.needsLayoutCount()", "3"); |
| debug("Verifying non-fast regions have been updated"); |
| // Note: querying non-fast regions forces layout, so the expectation |
| // reflects the change to body element padding. |
| nonFastScrollableRects = internals.nonFastScrollableRects(document); |
| shouldBe('nonFastScrollableRects.length', '1'); |
| shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[110, 10, 222, 222]'); |
| |
| setTimeout(function() { |
| // Add green overlays to help visualize the test |
| drawNonFastScrollableRegionOverlays(); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
