Index: third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-smooth.html |
diff --git a/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-smooth.html b/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-smooth.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..7a240222ffebf373dc94169c1a52e1c716b83208 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-smooth.html |
@@ -0,0 +1,147 @@ |
+<!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 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 waitForScrollEnd(frames, last_changed_frame, last_x, last_y) { |
+ return new Promise((resolve, reject) => { |
+ requestAnimationFrame(() => { |
+ // We requestAnimationFrame either for 500 frames or until 20 frames with |
+ // no change have been observed. |
+ if (frames >= 500 || frames - last_changed_frame > 20) { |
+ resolve(); |
+ } else { |
+ if (window.scrollX != last_x || window.scrollY != last_y) { |
+ last_changed_frame = frames; |
+ } |
+ waitForScrollEnd(frames + 1, last_changed_frame, window.scrollX, window.scrollY).then(resolve); |
foolip
2017/06/15 19:41:53
optional nit: This will build up a very long promi
|
+ } |
+ }) |
+ }); |
+} |
+ |
+// When testing manually, we need an additional frame at beginning |
+// to trigger the effect. |
+requestAnimationFrame(() => { |
+promise_test(t => { |
+ window.scrollTo(0, 0); |
+ var expected_x = content.offsetLeft + content_width - window_width; |
+ var expected_y = content.offsetTop + content_height - window_height; |
+ assert_not_equals(window.scrollX, expected_x); |
+ assert_not_equals(window.scrollY, expected_y); |
+ content.scrollIntoView({behavior: 'smooth', block: 'nearest', inlinePosition: |
+'nearest'}); |
+ return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => { |
+ assert_approx_equals(window.scrollX, expected_x, 1); |
+ assert_approx_equals(window.scrollY, expected_y, 1); |
+ }); |
+}, "Smooth scrollIntoView should scroll the element to the 'nearest' position"); |
+ |
+promise_test(t => { |
+ window.scrollTo(0, 0); |
+ var expected_x = content.offsetLeft; |
+ var expected_y = content.offsetTop; |
+ assert_not_equals(window.scrollX, expected_x); |
+ assert_not_equals(window.scrollY, expected_y); |
+ content.scrollIntoView({behavior: 'smooth', block: 'start', inlinePosition: |
+'start'}); |
+ return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => { |
+ assert_approx_equals(window.scrollX, expected_x, 1); |
+ assert_approx_equals(window.scrollY, expected_y, 1); |
+ }); |
+}, "Smooth scrollIntoView should scroll the element to the 'start' position"); |
+ |
+promise_test(t => { |
+ window.scrollTo(0, 0); |
+ var expected_x = content.offsetLeft + (content_width - window_width) / 2; |
+ var expected_y = content.offsetTop + (content_height - window_height) / 2; |
+ assert_not_equals(window.scrollX, expected_x); |
+ assert_not_equals(window.scrollY, expected_y); |
+ content.scrollIntoView({behavior: 'smooth', block: 'center', inlinePosition: |
+'center'}); |
+ return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => { |
+ assert_approx_equals(window.scrollX, expected_x, 1); |
+ assert_approx_equals(window.scrollY, expected_y, 1); |
+ }); |
+}, "Smooth scrollIntoView should scroll the element to the 'center' position"); |
+ |
+promise_test(t => { |
+ window.scrollTo(0, 0); |
+ var expected_x = content.offsetLeft + content_width - window_width; |
+ var expected_y = content.offsetTop + content_height - window_height; |
+ assert_not_equals(window.scrollX, expected_x); |
+ assert_not_equals(window.scrollY, expected_y); |
+ content.scrollIntoView({behavior: 'smooth', block: 'end', inlinePosition: |
+'end'}); |
+ return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => { |
+ assert_approx_equals(window.scrollX, expected_x, 1); |
+ assert_approx_equals(window.scrollY, expected_y, 1); |
+ }); |
+}, "Smooth scrollIntoView should scroll the element to the 'end' position"); |
+ |
+function instantScrollToTestArgs(arg, expected_x, expected_y) { |
foolip
2017/06/15 19:41:53
This and the following test you might want to spli
|
+ window.scrollTo(0, 0); |
+ assert_not_equals(window.scrollX, expected_x); |
+ assert_not_equals(window.scrollY, expected_y); |
+ if (arg == "omitted") |
+ content.scrollIntoView(); |
+ else |
+ content.scrollIntoView(arg); |
+ assert_approx_equals(window.scrollX, expected_x, 1); |
+ assert_approx_equals(window.scrollY, expected_y, 1); |
+} |
+ |
+test(t => { |
+ instantScrollToTestArgs("omitted", |
+ content.offsetLeft + content_width - window_width, |
+ content.offsetTop); |
+ instantScrollToTestArgs(true, |
+ content.offsetLeft + content_width - window_width, |
+ content.offsetTop); |
+ instantScrollToTestArgs(false, |
+ content.offsetLeft + content_width - window_width, |
+ content.offsetTop + content_height - window_height); |
+ instantScrollToTestArgs({}, |
+ content.offsetLeft + (content_width - window_width) / 2, |
+ content.offsetTop + (content_height - window_height) / 2); |
+ instantScrollToTestArgs(null, |
+ content.offsetLeft + content_width - window_width, |
+ content.offsetTop); |
+ instantScrollToTestArgs(undefined, |
+ content.offsetLeft + content_width - window_width, |
+ content.offsetTop); |
+}, "scrollIntoView should behave correctly when the arg is not fully specified as ScrollIntoViewOptions"); |
+ |
+test(t => { |
+ 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); |
+ |
+ window.scrollTo(0, 0); |
+ var expected_x = shadowDiv.offsetLeft; |
+ var expected_y = shadowDiv.offsetTop; |
+ assert_not_equals(window.scrollX, expected_x); |
+ assert_not_equals(window.scrollY, expected_y); |
+ shadowDiv.scrollIntoView({block: 'start', inlinePosition: 'start'}); |
+ assert_approx_equals(window.scrollX, expected_x, 1); |
+ assert_approx_equals(window.scrollY, expected_y, 1); |
+}, "scrollIntoView should behave correctly if appliex to shadow dom elements"); |
foolip
2017/06/15 19:41:53
typo: appliex
|
+ |
+}); |
+</script> |