scroll-behavior-subframe-root.html (11729B)
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 <link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/dom/events/scrolling/scroll_support.js"></script> 10 <script src="support/scroll-behavior.js"></script> 11 <div id="log"> 12 </div> 13 <iframe id="iframeNode" width="400px" height="200px" srcdoc="<!DOCTYPE> 14 <html> 15 <style> 16 body { 17 margin: 0; 18 } 19 .autoBehavior { 20 scroll-behavior: auto; 21 } 22 .smoothBehavior { 23 scroll-behavior: smooth; 24 } 25 </style> 26 <body> 27 <div style='width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);'> 28 <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> 29 </div> 30 </body> 31 </html>"> 32 </iframe> 33 <script> 34 var iframeLoadTest = async_test("iframe loaded"); 35 var scrollingElement, styledElement, elementToReveal; 36 var elementToRevealLeft = 500; 37 var elementToRevealTop = 250; 38 iframeNode.addEventListener("load", iframeLoadTest.step_func_done(() => { 39 promise_test(async () => { 40 await waitForCompositorReady(); 41 }, "Make sure the page is ready for animation."); 42 43 scrollingElement = iframeNode.contentDocument.scrollingElement; 44 styledElement = iframeNode.contentDocument.documentElement; 45 elementToReveal = iframeNode.contentDocument.getElementById("elementToReveal"); 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 }, `Subframe 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 }, `Subframe 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 }, `Subframe 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 }, `Subframe 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 }, `Subframe 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 }, `Subframe 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 }, `Subframe 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 }, `Subframe 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 ${attributeTest.scrollAttribute} immediately`); 158 return new Promise((resolve) => { resolve(); }); 159 }, `Subframe setting ${attributeTest.scrollAttribute} 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, `Should not set ${attributeTest.scrollAttribute} immediately`); 169 return waitForScrollEnd(scrollingElement).then(() => { 170 assert_equals(scrollingElement[attributeTest.scrollAttribute], expectedValue, `Final value of ${attributeTest.scrollAttribute}`); 171 }); 172 }, `Subframe setting ${attributeTest.scrollAttribute} 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 a subframe 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 a subframe with an instant scrolling"); 200 })); 201 </script>