1<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSOMViewSmoothScrollingEnabled=true internal:AsyncOverflowScrollingEnabled=true ] -->
2<title>Testing scrollOptions' behavior for Element.scroll* on the window of the main frame</title>
3<meta name="timeout" content="long"/>
4<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
5<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
6<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
7<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
8<script src="../../../resources/testharness.js"></script>
9<script src="../../../resources/testharnessreport.js"></script>
10<script src="resources/scroll-behavior.js"></script>
11<style>
12 body {
13 margin: 0;
14 }
15 .autoBehavior {
16 scroll-behavior: auto;
17 }
18 .smoothBehavior {
19 scroll-behavior: smooth;
20 }
21</style>
22<div id="log">
23</div>
24<div id="pageContent" style="position: absolute; left: 0; top: 0;">
25 <div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div>
26</div>
27<script>
28 var pageLoaded = async_test("Page loaded");
29 var scrollingWindow, styledElement, elementToRevealLeft, elementToRevealTop;
30 window.addEventListener("load", pageLoaded.step_func_done(function() {
31 scrollingWindow = window;
32 styledElement = document.documentElement;
33 pageContent.style.width = (10 + window.innerWidth) * 5 + "px";
34 pageContent.style.height = (20 + window.innerHeight) * 6 + "px";
35 elementToRevealLeft = (10 + window.innerWidth) * 3;
36 elementToRevealTop = (20 + window.innerHeight) * 4;
37 elementToReveal.style.left = elementToRevealLeft + "px";
38 elementToReveal.style.top = elementToRevealTop + "px";
39
40 add_completion_callback(() => { resetScrollForWindow(window); });
41
42 ["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => {
43 promise_test(() => {
44 resetScrollForWindow(scrollingWindow);
45 setScrollBehavior(styledElement, "autoBehavior");
46 assert_equals(scrollingWindow.scrollX, 0);
47 assert_equals(scrollingWindow.scrollY, 0);
48 scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
49 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
50 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
51 return new Promise((resolve) => { resolve(); });
52 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`);
53
54 promise_test(() => {
55 resetScrollForWindow(scrollingWindow);
56 setScrollBehavior(styledElement, "autoBehavior");
57 assert_equals(scrollingWindow.scrollX, 0);
58 assert_equals(scrollingWindow.scrollY, 0);
59 scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
60 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
61 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
62 return new Promise((resolve) => { resolve(); });
63 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`);
64
65 promise_test(() => {
66 resetScrollForWindow(scrollingWindow);
67 setScrollBehavior(styledElement, "autoBehavior");
68 assert_equals(scrollingWindow.scrollX, 0);
69 assert_equals(scrollingWindow.scrollY, 0);
70 scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
71 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
72 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
73 return new Promise((resolve) => { resolve(); });
74 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`);
75
76 promise_test(() => {
77 resetScrollForWindow(scrollingWindow);
78 setScrollBehavior(styledElement, "autoBehavior");
79 assert_equals(scrollingWindow.scrollX, 0);
80 assert_equals(scrollingWindow.scrollY, 0);
81 scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
82 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
83 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
84 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
85 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
86 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
87 });
88 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`);
89
90 promise_test(() => {
91 resetScrollForWindow(scrollingWindow);
92 setScrollBehavior(styledElement, "smoothBehavior");
93 assert_equals(scrollingWindow.scrollX, 0);
94 assert_equals(scrollingWindow.scrollY, 0);
95 scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop);
96 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
97 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
98 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
99 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
100 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
101 });
102 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`);
103
104 promise_test(() => {
105 resetScrollForWindow(scrollingWindow);
106 setScrollBehavior(styledElement, "smoothBehavior");
107 assert_equals(scrollingWindow.scrollX, 0);
108 assert_equals(scrollingWindow.scrollY, 0);
109 scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop);
110 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
111 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
112 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
113 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
114 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
115 });
116 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`);
117
118 promise_test(() => {
119 resetScrollForWindow(scrollingWindow);
120 setScrollBehavior(styledElement, "smoothBehavior");
121 assert_equals(scrollingWindow.scrollX, 0);
122 assert_equals(scrollingWindow.scrollY, 0);
123 scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop);
124 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately");
125 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately");
126 return new Promise((resolve) => { resolve(); });
127 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`);
128
129 promise_test(() => {
130 resetScrollForWindow(scrollingWindow);
131 setScrollBehavior(styledElement, "smoothBehavior");
132 assert_equals(scrollingWindow.scrollX, 0);
133 assert_equals(scrollingWindow.scrollY, 0);
134 scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop);
135 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately");
136 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately");
137 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
138 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft");
139 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop");
140 });
141 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`);
142 });
143
144 promise_test(() => {
145 resetScrollForWindow(scrollingWindow);
146 setScrollBehavior(styledElement, "smoothBehavior");
147 assert_equals(scrollingWindow.scrollX, 0);
148 assert_equals(scrollingWindow.scrollY, 0);
149 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
150 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2);
151 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
152 assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft");
153 assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop");
154 });
155 }, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling");
156
157 promise_test(() => {
158 resetScrollForWindow(scrollingWindow);
159 setScrollBehavior(styledElement, "smoothBehavior");
160 assert_equals(scrollingWindow.scrollX, 0);
161 assert_equals(scrollingWindow.scrollY, 0);
162 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop);
163 scrollWindow(scrollingWindow, "scroll", "instant", 0, 0);
164 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => {
165 assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft");
166 assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop");
167 });
168 }, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling");
169 }));
170</script>