Index: third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView.html |
diff --git a/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView.html b/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..32c4dc068709754d2718980b034ec6c4b3559953 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView.html |
@@ -0,0 +1,158 @@ |
+<!DOCTYPE HTML> |
+<script src='/resources/testharness.js'></script> |
+<script src='/resources/testharnessreport.js'></script> |
+<title>Check End Position of scrollIntoView</title> |
+<div id='container' style='height: 2500px; width: 2500px;'> |
+ <div id='content' style='height: 500px; width: 500px;margin-left: 1000px; margin-right: 1000px; margin-top: 1000px;margin-bottom: 1000px;background-color: red'> |
+ </div> |
+ <div id='shadow'></div> |
+</div> |
+<script> |
+ |
+var frames = 0; |
+var last_changed_frame = 0; |
+var last_changed_x = 0; |
+var last_changed_y = 0; |
+var expected_x = 0; |
+var expected_y = 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'); |
+add_completion_callback(() => document.getElementById('container').remove()); |
+ |
+function animate (test, next_test) { |
foolip
2017/06/15 08:38:04
Optional nits/suggestions for how you could have l
sunyunjia
2017/06/15 18:00:26
Thanks! Finally learned how to use promise today!
|
+ if (frames < 500 && frames - last_changed_frame < 20) { |
foolip
2017/06/15 08:38:04
Can you add a comment about what this means, that
sunyunjia
2017/06/15 18:00:26
Done.
|
+ ++frames; |
+ if (window.scrollX != last_changed_x || window.scrollY != last_changed_y) { |
+ last_changed_x = window.scrollX; |
+ last_changed_y = window.scrollY; |
+ last_changed_frame = frames; |
+ } |
+ requestAnimationFrame(animate.bind(null, test, next_test)); |
+ } else { |
+ if (test) { |
+ test.step(function() { |
+ assert_approx_equals(window.scrollX, expected_x, 1); |
+ assert_approx_equals(window.scrollY, expected_y, 1); |
+ test.done(); |
+ }); |
+ } |
+ if (next_test) |
+ next_test(); |
+ } |
+} |
+ |
+var checkNearest = async_test("Smooth scrollIntoView should scroll the element to the 'nearest' position"); |
+function test1() { |
+ checkNearest.step(function() { |
+ content.scrollIntoView( |
+ {behavior: 'smooth', block: 'nearest', inlinePosition: 'nearest'}); |
+ frames = 0; |
+ last_changed_frame = 0; |
+ last_changed_x = window.scrollX; |
+ last_changed_y = window.scrollY; |
+ expected_x = content.offsetLeft + content_width - window_width; |
+ expected_y = content.offsetTop + content_height - window_height; |
+ animate(checkNearest, 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; |
+ last_changed_frame = 0; |
+ last_changed_x = window.scrollX; |
+ last_changed_y = window.scrollY; |
+ expected_x = content.offsetLeft; |
+ expected_y = content.offsetTop; |
+ animate(checkStart, 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; |
+ last_changed_frame = 0; |
+ last_changed_x = window.scrollX; |
+ last_changed_y = window.scrollY; |
+ expected_x = content.offsetLeft + (content_width - window_width) / 2; |
+ expected_y = content.offsetTop + (content_height - window_height) / 2; |
+ animate(checkCenter, 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; |
+ last_changed_frame = 0; |
+ last_changed_x = window.scrollX; |
+ last_changed_y = window.scrollY; |
+ expected_x = content.offsetLeft + content_width - window_width; |
+ expected_y = content.offsetTop + content_height - window_height; |
+ animate(checkEnd, test5); |
+ }); |
+} |
+ |
+var checkEmptyAndNullAndUndefined = async_test("scrollIntoView should behave correctly when the arg is empty, null or undefined"); |
+function test5() { |
+ checkEmptyAndNullAndUndefined.step(function() { |
+ content.scrollIntoView(); |
+ var x = content.offsetLeft + content_width - window_width; |
+ var y = content.offsetTop; |
+ assert_approx_equals(window.scrollX, x, 1); |
+ assert_approx_equals(window.scrollY, y, 1); |
+ |
+ content.scrollIntoView(null); |
+ x = content.offsetLeft + (content_width - window_width) / 2; |
+ y = content.offsetTop + (content_height - window_height) / 2; |
+ assert_approx_equals(window.scrollX, x, 1); |
+ assert_approx_equals(window.scrollY, y, 1); |
+ |
+ window.scrollTo(0, 0); |
+ assert_approx_equals(window.scrollX, 0, 1); |
+ assert_approx_equals(window.scrollY, 0, 1); |
+ |
+ content.scrollIntoView(undefined); |
+ assert_approx_equals(window.scrollX, x, 1); |
+ assert_approx_equals(window.scrollY, y, 1); |
+ |
+ checkEmptyAndNullAndUndefined.done(); |
+ test6(); |
+ }) |
+} |
+ |
+var scrollShadowDomElementIntoView = async_test("scrollIntoView should behave correctly if applied to shadow dom elements"); |
+function test6() { |
+ scrollShadowDomElementIntoView.step(function() { |
+ var shadow = document.getElementById("shadow"); |
+ var shadowRoot = shadow.createShadowRoot(); |
+ var shadowDiv = document.createElement("div"); |
+ shadowDiv.style.height = "200px"; |
+ shadowDiv.style.width = "200px"; |
+ shadowDiv.style.backgroundColor = "green"; |
+ shadowRoot.appendChild(shadowDiv); |
+ |
+ shadowDiv.scrollIntoView({block: 'start', inlinePosition: 'start'}); |
+ assert_approx_equals(window.scrollX, shadowDiv.offsetLeft, 1); |
+ assert_approx_equals(window.scrollY, shadowDiv.offsetTop, 1); |
+ scrollShadowDomElementIntoView.done(); |
+ }); |
+} |
+ |
+window.onload = function() { |
+ window.scrollTo(0, 0); |
foolip
2017/06/15 08:38:03
Is this because the page can scroll to the old pos
sunyunjia
2017/06/15 18:00:26
Done.
|
+ animate(null, test1); |
+} |
+ |
+</script> |