Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(951)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView.html

Issue 2936283003: Update CSSOM SmoothScroll Web Platform Test (Closed)
Patch Set: format Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html » ('j') | third_party/WebKit/Source/core/dom/Element.idl » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html » ('j') | third_party/WebKit/Source/core/dom/Element.idl » ('J')

Powered by Google App Engine
This is Rietveld 408576698