Chromium Code Reviews Chromium Code Reviews
Issue 1256043007:
Recompute slow scroll regions after overflow recalc (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/scrollingcoordinator/non-fast-scrollable-animation.html |
| diff --git a/LayoutTests/scrollingcoordinator/non-fast-scrollable-animation.html b/LayoutTests/scrollingcoordinator/non-fast-scrollable-animation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..a0ab881aff516e142ef165bbde5a58af4474097d |
| --- /dev/null |
| +++ b/LayoutTests/scrollingcoordinator/non-fast-scrollable-animation.html |
| @@ -0,0 +1,83 @@ |
| +<!DOCTYPE html> |
| +<style> |
| + body { |
| + margin: 0; |
| + } |
| + |
| + .container { |
| + height: 250px; |
| + width: 250px; |
| + display: block; |
| + } |
| + |
| + #nonFastRegion { |
| + height: 222px; |
| + width: 222px; |
| + display: block; |
| + border: none; |
| + } |
| + |
| + #nonFastRegion.animate { |
| + transform: translateX(100px) translateY(100px); |
| + transition: transform 5ms; |
| + } |
| +</style> |
| + |
| +<div class="container"> |
| + <iframe id='nonFastRegion' onload='runAfterLayoutAndPaint(window.runTests)' src="data:text/html;charset=utf-8,<div style='height:1000px; width:1000px; background: linear-gradient(to bottom, red, white);'>This should be covered.</div>"> |
|
Rick Byers
2015/08/05 15:02:59
nit: any reason to use 'src=data:text/html;...' in
majidvp
2015/08/05 15:39:34
Acknowledged.
|
| + </iframe> |
|
Rick Byers
2015/08/05 15:02:59
The original bug report relied only on a div, not
majidvp
2015/08/05 15:39:35
The original case is fixed because the same code p
Rick Byers
2015/08/06 03:15:19
Are you sure about this? I believe iframes are fa
|
| +</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 animating a non-fast scrollable area ' + |
| + 'correctly updates list of non-fast scrollable rects ' + |
| + '(See http://crbug.com/417345).'); |
| + |
| + runTests = function() { |
| + nonFastScrollableRects = internals.nonFastScrollableRects(document); |
| + shouldBe('nonFastScrollableRects.length', '1'); |
| + shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[0, 0, 222, 222]'); |
| + |
| + // animating transforms hits an optimized layout path which is root cause of |
| + // http://crbug.com/417345 |
| + var nonFast = document.getElementById('nonFastRegion'); |
| + nonFast.classList.add('animate'); |
| + |
| + // wait for 1 frame plus animation duration before checking |
|
Rick Byers
2015/08/05 15:02:59
I'm a little worried that this test is brittle to
majidvp
2015/08/05 15:39:34
This makes sense. Thanks for pointing it out.
|
| + waitForAnimationWalltime(5 + 16).then(function() { |
| + nonFastScrollableRects = internals.nonFastScrollableRects(document); |
| + shouldBe('nonFastScrollableRects.length', '1'); |
| + shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[100, 100, 222, 222]'); |
| + |
| + runAfterLayoutAndPaint(function() { |
| + // Add green overlays to help visualize the test |
| + drawNonFastScrollableRegionOverlays(); |
| + finishJSTest(); |
| + }); |
| + }); |
| + } |
| + |
| + function waitForAnimationWalltime(wait) { |
|
Rick Byers
2015/08/05 15:02:59
Is this guaranteed to be non-flaky? I thought it
majidvp
2015/08/05 15:39:34
I was originally looking at using webkitanimatione
|
| + return new Promise(function(resolve, reject) { |
| + var start; |
| + window.requestAnimationFrame(rAF); |
| + function rAF(now) { |
| + start = start || now; |
| + if (now - start > wait) |
| + resolve(); |
| + else |
| + window.requestAnimationFrame(rAF); |
| + } |
| + }); |
| + } |
| +</script> |
