scroll-behavior-main-frame-root.html (11796B)
1 <!DOCTYPE html> 2 <title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root 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="/dom/events/scrolling/scroll_support.js"></script> 11 <script src="support/scroll-behavior.js"></script> 12 <style> 13 body { 14 margin: 0; 15 } 16 .autoBehavior { 17 scroll-behavior: auto; 18 } 19 .smoothBehavior { 20 scroll-behavior: smooth; 21 } 22 </style> 23 <div id="log"> 24 </div> 25 <div id="pageContent" style="position: absolute; left: 0; top: 0;"> 26 <div id="elementToReveal" style="position: absolute; display: inline-block; width: 10px; height: 15px; background: black;"></div> 27 </div> 28 <script> 29 var pageLoaded = async_test("Page loaded"); 30 var scrollingElement, styledElement, elementToRevealLeft, elementToRevealTop; 31 window.addEventListener("load", pageLoaded.step_func_done(function() { 32 scrollingElement = document.scrollingElement; 33 styledElement = document.documentElement; 34 pageContent.style.width = (10 + window.innerWidth) * 5 + "px"; 35 pageContent.style.height = (20 + window.innerHeight) * 6 + "px"; 36 elementToRevealLeft = (10 + window.innerWidth) * 3; 37 elementToRevealTop = (20 + window.innerHeight) * 4; 38 elementToReveal.style.left = elementToRevealLeft + "px"; 39 elementToReveal.style.top = elementToRevealTop + "px"; 40 41 add_completion_callback(() => { resetScroll(scrollingElement); }); 42 43 promise_test(async () => { 44 await waitForCompositorReady(); 45 }, "Make sure the page is ready for animation."); 46 47 ["scroll", "scrollTo", "scrollBy", "scrollIntoView"].forEach((scrollFunction) => { 48 promise_test(() => { 49 resetScroll(scrollingElement); 50 setScrollBehavior(styledElement, "autoBehavior"); 51 assert_equals(scrollingElement.scrollLeft, 0); 52 assert_equals(scrollingElement.scrollTop, 0); 53 scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop); 54 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately"); 55 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately"); 56 return new Promise((resolve) => { resolve(); }); 57 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`); 58 59 promise_test(() => { 60 resetScroll(scrollingElement); 61 setScrollBehavior(styledElement, "autoBehavior"); 62 assert_equals(scrollingElement.scrollLeft, 0); 63 assert_equals(scrollingElement.scrollTop, 0); 64 scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop); 65 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately"); 66 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately"); 67 return new Promise((resolve) => { resolve(); }); 68 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`); 69 70 promise_test(() => { 71 resetScroll(scrollingElement); 72 setScrollBehavior(styledElement, "autoBehavior"); 73 assert_equals(scrollingElement.scrollLeft, 0); 74 assert_equals(scrollingElement.scrollTop, 0); 75 scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop); 76 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately"); 77 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately"); 78 return new Promise((resolve) => { resolve(); }); 79 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`); 80 81 promise_test(() => { 82 resetScroll(scrollingElement); 83 setScrollBehavior(styledElement, "autoBehavior"); 84 assert_equals(scrollingElement.scrollLeft, 0); 85 assert_equals(scrollingElement.scrollTop, 0); 86 scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop); 87 assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately"); 88 assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately"); 89 return waitForScrollEnd(scrollingElement).then(() => { 90 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft"); 91 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop"); 92 }); 93 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`); 94 95 promise_test(() => { 96 resetScroll(scrollingElement); 97 setScrollBehavior(styledElement, "smoothBehavior"); 98 assert_equals(scrollingElement.scrollLeft, 0); 99 assert_equals(scrollingElement.scrollTop, 0); 100 scrollNode(scrollingElement, scrollFunction, null, elementToRevealLeft, elementToRevealTop); 101 assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately"); 102 assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately"); 103 return waitForScrollEnd(scrollingElement).then(() => { 104 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft"); 105 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop"); 106 }); 107 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`); 108 109 promise_test(() => { 110 resetScroll(scrollingElement); 111 setScrollBehavior(styledElement, "smoothBehavior"); 112 assert_equals(scrollingElement.scrollLeft, 0); 113 assert_equals(scrollingElement.scrollTop, 0); 114 scrollNode(scrollingElement, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop); 115 assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately"); 116 assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately"); 117 return waitForScrollEnd(scrollingElement).then(() => { 118 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft"); 119 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop"); 120 }); 121 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`); 122 123 promise_test(() => { 124 resetScroll(scrollingElement); 125 setScrollBehavior(styledElement, "smoothBehavior"); 126 assert_equals(scrollingElement.scrollLeft, 0); 127 assert_equals(scrollingElement.scrollTop, 0); 128 scrollNode(scrollingElement, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop); 129 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately"); 130 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately"); 131 return new Promise((resolve) => { resolve(); }); 132 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`); 133 134 promise_test(() => { 135 resetScroll(scrollingElement); 136 setScrollBehavior(styledElement, "smoothBehavior"); 137 assert_equals(scrollingElement.scrollLeft, 0); 138 assert_equals(scrollingElement.scrollTop, 0); 139 scrollNode(scrollingElement, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop); 140 assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately"); 141 assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately"); 142 return waitForScrollEnd(scrollingElement).then(() => { 143 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft"); 144 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop"); 145 }); 146 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`); 147 }); 148 149 [{scrollAttribute: "scrollLeft", scrollValue: elementToRevealLeft}, {scrollAttribute: "scrollTop", scrollValue: elementToRevealTop}].forEach((attributeTest) => { 150 promise_test(() => { 151 resetScroll(scrollingElement); 152 setScrollBehavior(styledElement, "autoBehavior"); 153 assert_equals(scrollingElement.scrollLeft, 0); 154 assert_equals(scrollingElement.scrollTop, 0); 155 var expectedValue = Number(attributeTest.scrollValue); 156 scrollingElement[attributeTest.scrollAttribute] = expectedValue; 157 assert_equals( scrollingElement[attributeTest.scrollAttribute], expectedValue, "Should set scroll attribute immediately"); 158 return new Promise((resolve) => { resolve(); }); 159 }, `Set ${attributeTest.scrollAttribute} to frame with auto scroll-behavior`); 160 161 promise_test(() => { 162 resetScroll(scrollingElement); 163 setScrollBehavior(styledElement, "smoothBehavior"); 164 assert_equals(scrollingElement.scrollLeft, 0); 165 assert_equals(scrollingElement.scrollTop, 0); 166 var expectedValue = Number(attributeTest.scrollValue); 167 scrollingElement[attributeTest.scrollAttribute] = expectedValue; 168 assert_less_than(scrollingElement[attributeTest.scrollAttribute], expectedValue, "Shouldn't set scroll attribute immediately"); 169 return waitForScrollEnd(scrollingElement).then(() => { 170 assert_equals(scrollingElement[attributeTest.scrollAttribute], expectedValue, "Final value of scroll attribute"); 171 }); 172 }, `Set ${attributeTest.scrollAttribute} to frame with smooth scroll-behavior`); 173 }); 174 175 promise_test(() => { 176 resetScroll(scrollingElement); 177 setScrollBehavior(styledElement, "smoothBehavior"); 178 assert_equals(scrollingElement.scrollLeft, 0); 179 assert_equals(scrollingElement.scrollTop, 0); 180 scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop); 181 scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2); 182 return waitForScrollEnd(scrollingElement).then(() => { 183 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft / 2, "Final value of scrollLeft"); 184 assert_equals(scrollingElement.scrollTop, elementToRevealTop / 2, "Final value of scrollTop"); 185 }); 186 }, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling"); 187 188 promise_test(() => { 189 resetScroll(scrollingElement); 190 setScrollBehavior(styledElement, "smoothBehavior"); 191 assert_equals(scrollingElement.scrollLeft, 0); 192 assert_equals(scrollingElement.scrollTop, 0); 193 scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop); 194 scrollNode(scrollingElement, "scroll", "instant", 0, 0); 195 return waitForScrollEnd(scrollingElement).then(() => { 196 assert_equals(scrollingElement.scrollLeft, 0, "Final value of scrollLeft"); 197 assert_equals(scrollingElement.scrollTop, 0, "Final value of scrollTop"); 198 }); 199 }, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling"); 200 })); 201 </script>