Chromium Code Reviews Chromium Code Reviews
Issue 1534813004:
Run smooth scroll animations on the compositor when possible (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/fast/scroll-behavior/smooth-scroll/keyboard-scroll.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/scroll-behavior/smooth-scroll/keyboard-scroll.html b/third_party/WebKit/LayoutTests/fast/scroll-behavior/smooth-scroll/keyboard-scroll.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..2530d20d90237540ebcffa46c75015f341b5937a |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/scroll-behavior/smooth-scroll/keyboard-scroll.html |
| @@ -0,0 +1,114 @@ |
| +<!DOCTYPE html> |
| +<script src="../../../resources/js-test.js"></script> |
| +<script> |
| + window.jsTestIsAsync = true; |
| + var pageHeight = 1200; |
| + var pageWidth = 1000; |
| + |
| + var testScrolls = [ |
| + {key: 'downArrow', expectedX: 0, expectedY: pageHeight - window.innerHeight}, |
| + {key: 'upArrow', expectedX: 0, expectedY: 0}, |
| + {key: 'rightArrow', expectedX: pageWidth - window.innerWidth, expectedY: 0}, |
| + {key: 'leftArrow', expectedX: 0, expectedY: 0}, |
| + {key: 'end', expectedX: 0, expectedY: pageHeight - window.innerHeight}, |
| + {key: 'home', expectedX: 0, expectedY: 0}, |
| + {key: 'pageDown', expectedX: 0, expectedY: pageHeight - window.innerHeight}, |
| + {key: 'pageUp', expectedX: 0, expectedY: 0}, |
| + {key: ' ', expectedX: 0, expectedY: pageHeight - window.innerHeight}, |
| + ]; |
| + var currentTest = -1; |
| + |
| + description("Test keyboard smooth scroll. The main purpose of this\ |
| + test is to ensure that smooth scrolling on the compositor\ |
|
skobes
2015/12/18 19:05:57
This doesn't actually test that the scroll is comp
ymalik
2015/12/18 19:35:47
So what I mean by that comment is that we really c
|
| + works as intended."); |
| + |
| + function runTestCase(testCase) { |
| + window.eventSender.keyDown(testCase.key); |
| + if (window.scrollX == testCase.expectedX && window.scrollY == testCase.expectedY) { |
|
ajuma
2015/12/18 19:02:54
Would this test also pass if all scrolls were inst
ymalik
2015/12/18 19:35:47
Yes. Is that bad?
ajuma
2015/12/18 19:51:12
Depends on what you're trying to test :) If it's
|
| + testPassed(testCase.key + ' reached target'); |
| + startNextTestCase(); |
| + } else { |
| + requestAnimationFrame(function() { |
| + runTestCase(testCase); |
| + }); |
| + } |
| + } |
| + |
| + function startNextTestCase() { |
| + currentTest++; |
| + if (currentTest >= testScrolls.length) { |
| + finishJSTest(); |
| + return; |
| + } |
| + runTestCase(testScrolls[currentTest]); |
| + } |
| + |
| + function runTest() { |
| + if (!window.eventSender || !window.internals) { |
| + finishJSTest(); |
| + return; |
| + } |
| + // Turn on smooth scrolling. |
| + internals.settings.setScrollAnimatorEnabled(true); |
| + |
| + startNextTestCase(); |
| + } |
| + addEventListener('load', runTest); |
| +</script> |
| + |
| +<style> |
| + ::-webkit-scrollbar { |
| + width: 0px; |
| + height: 0px; |
| + } |
| + |
| + div { |
| + width: 200px; |
| + height: 20px; |
| + background-color: red; |
| + } |
| + |
| + html{ |
| + padding: 0px; |
| + margin: 0px; |
| + width: 1000px; |
| + height: 1200px; |
| + } |
| + |
| + .top { |
| + position: absolute; |
| + top: 0px; |
| + left: 300px; |
| + } |
| + |
| + .middle{ |
| + position: absolute; |
| + top: 575px; |
| + left: 300px; |
| + } |
| + |
| + .bottom { |
| + position: absolute; |
| + top: 1180px; |
| + left: 300px; |
| + } |
| + |
| + .left { |
| + position: absolute; |
| + top: 275px; |
| + left: 0px; |
| + } |
| + |
| + .right { |
| + position: absolute; |
| + top: 275px; |
| + left: 800px; |
| + } |
| +</style> |
| +<p id="description" style="width: 800px"></p> |
| +<p id="console" style="width: 800px"></p> |
| +<div class="top">Top of page</div> |
| +<div class="bottom">Bottom of page</div> |
| +<div class="left">Left of page</div> |
| +<div class="right">Right of page</div> |
| +<div class="middle">Middle of page</div> |
