scroll-behavior-main-frame-window.html (10201B)
1 <!DOCTYPE html> 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="/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 scrollingWindow, styledElement, elementToRevealLeft, elementToRevealTop; 31 window.addEventListener("load", pageLoaded.step_func_done(function() { 32 scrollingWindow = window; 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(() => { resetScrollForWindow(window); }); 42 43 promise_test(async () => { 44 await waitForCompositorReady(); 45 }, "Make sure the page is ready for animation."); 46 47 ["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => { 48 promise_test(() => { 49 resetScrollForWindow(scrollingWindow); 50 setScrollBehavior(styledElement, "autoBehavior"); 51 assert_equals(scrollingWindow.scrollX, 0); 52 assert_equals(scrollingWindow.scrollY, 0); 53 scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop); 54 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 55 assert_equals(scrollingWindow.scrollY, 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 resetScrollForWindow(scrollingWindow); 61 setScrollBehavior(styledElement, "autoBehavior"); 62 assert_equals(scrollingWindow.scrollX, 0); 63 assert_equals(scrollingWindow.scrollY, 0); 64 scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop); 65 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 66 assert_equals(scrollingWindow.scrollY, 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 resetScrollForWindow(scrollingWindow); 72 setScrollBehavior(styledElement, "autoBehavior"); 73 assert_equals(scrollingWindow.scrollX, 0); 74 assert_equals(scrollingWindow.scrollY, 0); 75 scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop); 76 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 77 assert_equals(scrollingWindow.scrollY, 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 resetScrollForWindow(scrollingWindow); 83 setScrollBehavior(styledElement, "autoBehavior"); 84 assert_equals(scrollingWindow.scrollX, 0); 85 assert_equals(scrollingWindow.scrollY, 0); 86 scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop); 87 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 88 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 89 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 90 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 91 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 92 }); 93 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`); 94 95 promise_test(() => { 96 resetScrollForWindow(scrollingWindow); 97 setScrollBehavior(styledElement, "smoothBehavior"); 98 assert_equals(scrollingWindow.scrollX, 0); 99 assert_equals(scrollingWindow.scrollY, 0); 100 scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop); 101 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 102 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 103 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 104 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 105 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 106 }); 107 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`); 108 109 promise_test(() => { 110 resetScrollForWindow(scrollingWindow); 111 setScrollBehavior(styledElement, "smoothBehavior"); 112 assert_equals(scrollingWindow.scrollX, 0); 113 assert_equals(scrollingWindow.scrollY, 0); 114 scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop); 115 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 116 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 117 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 118 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 119 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 120 }); 121 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`); 122 123 promise_test(() => { 124 resetScrollForWindow(scrollingWindow); 125 setScrollBehavior(styledElement, "smoothBehavior"); 126 assert_equals(scrollingWindow.scrollX, 0); 127 assert_equals(scrollingWindow.scrollY, 0); 128 scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop); 129 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 130 assert_equals(scrollingWindow.scrollY, 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 resetScrollForWindow(scrollingWindow); 136 setScrollBehavior(styledElement, "smoothBehavior"); 137 assert_equals(scrollingWindow.scrollX, 0); 138 assert_equals(scrollingWindow.scrollY, 0); 139 scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop); 140 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 141 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 142 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 143 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 144 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 145 }); 146 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`); 147 }); 148 149 promise_test(() => { 150 resetScrollForWindow(scrollingWindow); 151 setScrollBehavior(styledElement, "smoothBehavior"); 152 assert_equals(scrollingWindow.scrollX, 0); 153 assert_equals(scrollingWindow.scrollY, 0); 154 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop); 155 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2); 156 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 157 assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft"); 158 assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop"); 159 }); 160 }, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling"); 161 162 promise_test(() => { 163 resetScrollForWindow(scrollingWindow); 164 setScrollBehavior(styledElement, "smoothBehavior"); 165 assert_equals(scrollingWindow.scrollX, 0); 166 assert_equals(scrollingWindow.scrollY, 0); 167 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop); 168 scrollWindow(scrollingWindow, "scroll", "instant", 0, 0); 169 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 170 assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft"); 171 assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop"); 172 }); 173 }, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling"); 174 })); 175 </script>