Chromium Code Reviews Chromium Code Reviews
Issue 2650343008:
Implement Element.scrollIntoView for scroll-behavior: smooth. (Closed)
| Index: third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html |
| diff --git a/third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html b/third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..200491a5b7204685dc845bba884516bd3bd4c49e |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html |
| @@ -0,0 +1,77 @@ |
| +<!DOCTYPE HTML> |
| +<script src='/resources/testharness.js'></script> |
| +<script src='/resources/testharnessreport.js'></script> |
| +<title> Check End Position of ScrollIntoView</title> |
|
foolip
2017/06/14 11:43:15
Some feedback on this test.
Because the spec is a
|
| +<div id='container' style='height: 2500px; width: 2500px;'> |
|
foolip
2017/06/14 11:43:15
Running this test manually the results aren't in v
|
| + <div id='content' style='height: 500px; width: 500px;margin-left: 1000px; margin-right: 1000px; margin-top: 1000px;margin-bottom: 1000px'> |
| + </div> |
| +</div> |
| +<script> |
| + |
| +var frames = 0; |
| +var content_height = 500; |
| +var content_width = 500; |
| +var window_height = document.documentElement.clientHeight; |
| +var window_width = document.documentElement.clientWidth; |
| +var content = document.getElementById('content'); |
| + |
| +function animate (funct, x, y, next) { |
|
foolip
2017/06/14 11:43:15
s/funct/test/, as funct here is bound to a Test in
|
| + if (frames < 500) { |
|
foolip
2017/06/14 11:43:15
Looks like this test will wait for 2000 frames in
|
| + ++frames; |
| + requestAnimationFrame(animate.bind(null, funct, x, y, next)); |
| + } else { |
| + funct.step(function() { |
| + assert_approx_equals(window.scrollX, x, 1); |
| + assert_approx_equals(window.scrollY, y, 1); |
| + funct.done(); |
| + if (next) |
| + next(); |
| + }); |
| + } |
| +} |
| + |
| +var checkNearest = async_test("Smooth ScrollIntoView should scroll the element to the 'nearest' position"); |
| +checkNearest.step(function() { |
| + content.scrollIntoView( |
| + {behavior: 'smooth', block: 'nearest', inlinePosition: 'nearest'}); |
| + frames = 0; |
| + var x = content.offsetLeft + content_width - window_width; |
| + var y = content.offsetTop + content_height - window_height; |
| + animate(checkNearest, x, y, test2); |
| +}); |
| + |
| +var checkStart = async_test("Smooth ScrollIntoView should scroll the element to the 'start' position"); |
| +function test2() { |
| + checkStart.step(function() { |
| + content.scrollIntoView( |
| + {behavior: 'smooth', block: 'start', inlinePosition: 'start'}); |
| + frames = 0; |
| + animate(checkStart, content.offsetLeft, content.offsetTop, test3); |
| + }); |
| +} |
| + |
| +var checkCenter = async_test("Smooth ScrollIntoView should scroll the element to the 'center' position"); |
| +function test3() { |
| + checkCenter.step(function() { |
| + content.scrollIntoView( |
| + {behavior: 'smooth', block: 'center', inlinePosition: 'center'}); |
| + frames = 0; |
| + var x = content.offsetLeft + (content_width - window_width) / 2; |
| + var y = content.offsetTop + (content_height - window_height) / 2; |
| + animate(checkCenter, x, y, test4); |
| + }); |
| +} |
| + |
| +var checkEnd = async_test("Smooth ScrollIntoView should scroll the element to the 'end' position"); |
| +function test4() { |
| + checkEnd.step(function() { |
| + content.scrollIntoView( |
| + {behavior: 'smooth', block: 'end', inlinePosition: 'end'}); |
| + frames = 0; |
| + var x = content.offsetLeft + content_width - window_width; |
| + var y = content.offsetTop + content_height - window_height; |
| + animate(checkEnd, x, y, null); |
| + }); |
| +} |
| + |
| +</script> |
