blob: 3b711c5dfb84f0592533f3779cd755c0299ee342 [file] [log] [blame]
<!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);
}
</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>
<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()", "2");
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");
nonFastScrollableRects = internals.nonFastScrollableRects(document);
shouldBe('nonFastScrollableRects.length', '1');
shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[100, 0, 222, 222]');
setTimeout(function() {
// Add green overlays to help visualize the test
drawNonFastScrollableRegionOverlays();
finishJSTest();
}, 0);
}
</script>