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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/external/wpt/cssom-view/scrollIntoView-smooth.html

Issue 2936283003: Update CSSOM SmoothScroll Web Platform Test (Closed)
Patch Set: Update the test 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 unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE HTML>
2 <script src='/resources/testharness.js'></script>
3 <script src='/resources/testharnessreport.js'></script>
4 <title>Check End Position of scrollIntoView</title>
5 <div id='container' style='height: 2500px; width: 2500px;'>
6 <div id='content' style='height: 500px; width: 500px;margin-left: 1000px; marg in-right: 1000px; margin-top: 1000px;margin-bottom: 1000px;background-color: red '>
7 </div>
8 <div id='shadow'></div>
9 </div>
10 <script>
11 var content_height = 500;
12 var content_width = 500;
13 var window_height = document.documentElement.clientHeight;
14 var window_width = document.documentElement.clientWidth;
15 var content = document.getElementById('content');
16 add_completion_callback(() => document.getElementById('container').remove());
17
18 function waitForScrollEnd(frames, last_changed_frame, last_x, last_y) {
19 return new Promise((resolve, reject) => {
20 requestAnimationFrame(() => {
21 // We requestAnimationFrame either for 500 frames or until 20 frames with
22 // no change have been observed.
23 if (frames >= 500 || frames - last_changed_frame > 20) {
24 resolve();
25 } else {
26 if (window.scrollX != last_x || window.scrollY != last_y) {
27 last_changed_frame = frames;
28 }
29 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
30 }
31 })
32 });
33 }
34
35 // When testing manually, we need an additional frame at beginning
36 // to trigger the effect.
37 requestAnimationFrame(() => {
38 promise_test(t => {
39 window.scrollTo(0, 0);
40 var expected_x = content.offsetLeft + content_width - window_width;
41 var expected_y = content.offsetTop + content_height - window_height;
42 assert_not_equals(window.scrollX, expected_x);
43 assert_not_equals(window.scrollY, expected_y);
44 content.scrollIntoView({behavior: 'smooth', block: 'nearest', inlinePosition:
45 'nearest'});
46 return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => {
47 assert_approx_equals(window.scrollX, expected_x, 1);
48 assert_approx_equals(window.scrollY, expected_y, 1);
49 });
50 }, "Smooth scrollIntoView should scroll the element to the 'nearest' position");
51
52 promise_test(t => {
53 window.scrollTo(0, 0);
54 var expected_x = content.offsetLeft;
55 var expected_y = content.offsetTop;
56 assert_not_equals(window.scrollX, expected_x);
57 assert_not_equals(window.scrollY, expected_y);
58 content.scrollIntoView({behavior: 'smooth', block: 'start', inlinePosition:
59 'start'});
60 return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => {
61 assert_approx_equals(window.scrollX, expected_x, 1);
62 assert_approx_equals(window.scrollY, expected_y, 1);
63 });
64 }, "Smooth scrollIntoView should scroll the element to the 'start' position");
65
66 promise_test(t => {
67 window.scrollTo(0, 0);
68 var expected_x = content.offsetLeft + (content_width - window_width) / 2;
69 var expected_y = content.offsetTop + (content_height - window_height) / 2;
70 assert_not_equals(window.scrollX, expected_x);
71 assert_not_equals(window.scrollY, expected_y);
72 content.scrollIntoView({behavior: 'smooth', block: 'center', inlinePosition:
73 'center'});
74 return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => {
75 assert_approx_equals(window.scrollX, expected_x, 1);
76 assert_approx_equals(window.scrollY, expected_y, 1);
77 });
78 }, "Smooth scrollIntoView should scroll the element to the 'center' position");
79
80 promise_test(t => {
81 window.scrollTo(0, 0);
82 var expected_x = content.offsetLeft + content_width - window_width;
83 var expected_y = content.offsetTop + content_height - window_height;
84 assert_not_equals(window.scrollX, expected_x);
85 assert_not_equals(window.scrollY, expected_y);
86 content.scrollIntoView({behavior: 'smooth', block: 'end', inlinePosition:
87 'end'});
88 return waitForScrollEnd(0, 0, window.scrollX, window.scrollY).then(() => {
89 assert_approx_equals(window.scrollX, expected_x, 1);
90 assert_approx_equals(window.scrollY, expected_y, 1);
91 });
92 }, "Smooth scrollIntoView should scroll the element to the 'end' position");
93
94 function instantScrollToTestArgs(arg, expected_x, expected_y) {
foolip 2017/06/15 19:41:53 This and the following test you might want to spli
95 window.scrollTo(0, 0);
96 assert_not_equals(window.scrollX, expected_x);
97 assert_not_equals(window.scrollY, expected_y);
98 if (arg == "omitted")
99 content.scrollIntoView();
100 else
101 content.scrollIntoView(arg);
102 assert_approx_equals(window.scrollX, expected_x, 1);
103 assert_approx_equals(window.scrollY, expected_y, 1);
104 }
105
106 test(t => {
107 instantScrollToTestArgs("omitted",
108 content.offsetLeft + content_width - window_width,
109 content.offsetTop);
110 instantScrollToTestArgs(true,
111 content.offsetLeft + content_width - window_width,
112 content.offsetTop);
113 instantScrollToTestArgs(false,
114 content.offsetLeft + content_width - window_width,
115 content.offsetTop + content_height - window_height);
116 instantScrollToTestArgs({},
117 content.offsetLeft + (content_width - window_width) / 2,
118 content.offsetTop + (content_height - window_height) / 2);
119 instantScrollToTestArgs(null,
120 content.offsetLeft + content_width - window_width,
121 content.offsetTop);
122 instantScrollToTestArgs(undefined,
123 content.offsetLeft + content_width - window_width,
124 content.offsetTop);
125 }, "scrollIntoView should behave correctly when the arg is not fully specified a s ScrollIntoViewOptions");
126
127 test(t => {
128 var shadow = document.getElementById("shadow");
129 var shadowRoot = shadow.createShadowRoot();
130 var shadowDiv = document.createElement("div");
131 shadowDiv.style.height = "200px";
132 shadowDiv.style.width = "200px";
133 shadowDiv.style.backgroundColor = "green";
134 shadowRoot.appendChild(shadowDiv);
135
136 window.scrollTo(0, 0);
137 var expected_x = shadowDiv.offsetLeft;
138 var expected_y = shadowDiv.offsetTop;
139 assert_not_equals(window.scrollX, expected_x);
140 assert_not_equals(window.scrollY, expected_y);
141 shadowDiv.scrollIntoView({block: 'start', inlinePosition: 'start'});
142 assert_approx_equals(window.scrollX, expected_x, 1);
143 assert_approx_equals(window.scrollY, expected_y, 1);
144 }, "scrollIntoView should behave correctly if appliex to shadow dom elements");
foolip 2017/06/15 19:41:53 typo: appliex
145
146 });
147 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/external/wpt/scroll-into-view/check-scroll-position.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698