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