scroll-behavior-subframe-window.html (10203B)
1 <!DOCTYPE html> 2 <title>Testing scrollOptions' behavior for Element.scroll* and scroll-behavior on the root of a subframe</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 <div id="log"> 13 </div> 14 <iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE> 15 <html> 16 <style> 17 body { 18 margin: 0; 19 } 20 .autoBehavior { 21 scroll-behavior: auto; 22 } 23 .smoothBehavior { 24 scroll-behavior: smooth; 25 } 26 </style> 27 <body> 28 <div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'> 29 <span style='display: inline-block; width: 500px; height: 250px;'></span><span id='elementToReveal' style='display: inline-block; vertical-align: -15px; width: 10px; height: 15px; background: black;'></span> 30 </div> 31 </body> 32 </html>"> 33 </iframe> 34 <script> 35 var iframeLoadTest = async_test("iframe loaded"); 36 var scrollingWindow, styledElement, elementToReveal; 37 var elementToRevealLeft = 500; 38 var elementToRevealTop = 250; 39 iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => { 40 promise_test(async () => { 41 await waitForCompositorReady(); 42 }, "Make sure the page is ready for animation."); 43 44 scrollingWindow = iframeNode.contentWindow; 45 styledElement = iframeNode.contentDocument.documentElement; 46 elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal"); 47 48 ["scroll", "scrollTo", "scrollBy"].forEach((scrollFunction) => { 49 promise_test(() => { 50 resetScrollForWindow(scrollingWindow); 51 setScrollBehavior(styledElement, "autoBehavior"); 52 assert_equals(scrollingWindow.scrollX, 0); 53 assert_equals(scrollingWindow.scrollY, 0); 54 scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop); 55 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 56 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately"); 57 return new Promise((resolve) => { resolve(); }); 58 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with default behavior`); 59 60 promise_test(() => { 61 resetScrollForWindow(scrollingWindow); 62 setScrollBehavior(styledElement, "autoBehavior"); 63 assert_equals(scrollingWindow.scrollX, 0); 64 assert_equals(scrollingWindow.scrollY, 0); 65 scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop); 66 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 67 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately"); 68 return new Promise((resolve) => { resolve(); }); 69 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with auto behavior`); 70 71 promise_test(() => { 72 resetScrollForWindow(scrollingWindow); 73 setScrollBehavior(styledElement, "autoBehavior"); 74 assert_equals(scrollingWindow.scrollX, 0); 75 assert_equals(scrollingWindow.scrollY, 0); 76 scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop); 77 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 78 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately"); 79 return new Promise((resolve) => { resolve(); }); 80 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with instant behavior`); 81 82 promise_test(() => { 83 resetScrollForWindow(scrollingWindow); 84 setScrollBehavior(styledElement, "autoBehavior"); 85 assert_equals(scrollingWindow.scrollX, 0); 86 assert_equals(scrollingWindow.scrollY, 0); 87 scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop); 88 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 89 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 90 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 91 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 92 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 93 }); 94 }, `Main frame with auto scroll-behavior ; ${scrollFunction}() with smooth behavior`); 95 96 promise_test(() => { 97 resetScrollForWindow(scrollingWindow); 98 setScrollBehavior(styledElement, "smoothBehavior"); 99 assert_equals(scrollingWindow.scrollX, 0); 100 assert_equals(scrollingWindow.scrollY, 0); 101 scrollWindow(scrollingWindow, scrollFunction, null, elementToRevealLeft, elementToRevealTop); 102 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 103 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 104 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 105 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 106 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 107 }); 108 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with default behavior`); 109 110 promise_test(() => { 111 resetScrollForWindow(scrollingWindow); 112 setScrollBehavior(styledElement, "smoothBehavior"); 113 assert_equals(scrollingWindow.scrollX, 0); 114 assert_equals(scrollingWindow.scrollY, 0); 115 scrollWindow(scrollingWindow, scrollFunction, "auto", elementToRevealLeft, elementToRevealTop); 116 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 117 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 118 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 119 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 120 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 121 }); 122 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with auto behavior`); 123 124 promise_test(() => { 125 resetScrollForWindow(scrollingWindow); 126 setScrollBehavior(styledElement, "smoothBehavior"); 127 assert_equals(scrollingWindow.scrollX, 0); 128 assert_equals(scrollingWindow.scrollY, 0); 129 scrollWindow(scrollingWindow, scrollFunction, "instant", elementToRevealLeft, elementToRevealTop); 130 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Should set scrollLeft immediately"); 131 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Should set scrollTop immediately"); 132 return new Promise((resolve) => { resolve(); }); 133 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with instant behavior`); 134 135 promise_test(() => { 136 resetScrollForWindow(scrollingWindow); 137 setScrollBehavior(styledElement, "smoothBehavior"); 138 assert_equals(scrollingWindow.scrollX, 0); 139 assert_equals(scrollingWindow.scrollY, 0); 140 scrollWindow(scrollingWindow, scrollFunction, "smooth", elementToRevealLeft, elementToRevealTop); 141 assert_less_than(scrollingWindow.scrollX, elementToRevealLeft, "Should not set scrollLeft immediately"); 142 assert_less_than(scrollingWindow.scrollY, elementToRevealTop, "Should not set scrollTop immediately"); 143 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 144 assert_equals(scrollingWindow.scrollX, elementToRevealLeft, "Final value of scrollLeft"); 145 assert_equals(scrollingWindow.scrollY, elementToRevealTop, "Final value of scrollTop"); 146 }); 147 }, `Main frame with smooth scroll-behavior ; ${scrollFunction}() with smooth behavior`); 148 }); 149 150 promise_test(() => { 151 resetScrollForWindow(scrollingWindow); 152 setScrollBehavior(styledElement, "smoothBehavior"); 153 assert_equals(scrollingWindow.scrollX, 0); 154 assert_equals(scrollingWindow.scrollY, 0); 155 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop); 156 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft / 2, elementToRevealTop / 2); 157 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 158 assert_equals(scrollingWindow.scrollX, elementToRevealLeft / 2, "Final value of scrollLeft"); 159 assert_equals(scrollingWindow.scrollY, elementToRevealTop / 2, "Final value of scrollTop"); 160 }); 161 }, "Aborting an ongoing smooth scrolling on the main frame with another smooth scrolling"); 162 163 promise_test(() => { 164 resetScrollForWindow(scrollingWindow); 165 setScrollBehavior(styledElement, "smoothBehavior"); 166 assert_equals(scrollingWindow.scrollX, 0); 167 assert_equals(scrollingWindow.scrollY, 0); 168 scrollWindow(scrollingWindow, "scroll", "smooth", elementToRevealLeft, elementToRevealTop); 169 scrollWindow(scrollingWindow, "scroll", "instant", 0, 0); 170 return waitForScrollEnd(scrollingWindow.document.scrollingElement).then(() => { 171 assert_equals(scrollingWindow.scrollX, 0, "Final value of scrollLeft"); 172 assert_equals(scrollingWindow.scrollY, 0, "Final value of scrollTop"); 173 }); 174 }, "Aborting an ongoing smooth scrolling on the main frame with an instant scrolling"); 175 176 })); 177 </script>