scroll-behavior-default-css.html (2724B)
1 <!DOCTYPE html> 2 <title>Testing default value of scroll-behavior</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 </style> 18 <div id="log"> 19 </div> 20 <div id="overflowNode" class="scrollable"> 21 <div style="width: 2000px; height: 1000px; background: linear-gradient(135deg, red, green);"> 22 <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> 23 </div> 24 </div> 25 <script> 26 var scrollingElement = overflowNode; 27 var elementToRevealLeft = 500; 28 var elementToRevealTop = 250; 29 var scrollFunction = "scroll"; 30 31 promise_test(async () => { 32 await waitForCompositorReady(); 33 }, "Make sure the page is ready for animation."); 34 35 promise_test(() => { 36 resetScroll(scrollingElement); 37 assert_equals(scrollingElement.scrollLeft, 0); 38 assert_equals(scrollingElement.scrollTop, 0); 39 scrollNode(scrollingElement, "scroll", "instant", elementToRevealLeft, elementToRevealTop); 40 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Should set scrollLeft immediately"); 41 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Should set scrollTop immediately"); 42 return new Promise((resolve) => { resolve(); }); 43 }, "Instant scrolling of an element with default scroll-behavior"); 44 45 promise_test(() => { 46 resetScroll(scrollingElement); 47 assert_equals(scrollingElement.scrollLeft, 0); 48 assert_equals(scrollingElement.scrollTop, 0); 49 scrollNode(scrollingElement, "scroll", "smooth", elementToRevealLeft, elementToRevealTop); 50 assert_less_than(scrollingElement.scrollLeft, elementToRevealLeft, "Should not set scrollLeft immediately"); 51 assert_less_than(scrollingElement.scrollTop, elementToRevealTop, "Should not set scrollTop immediately"); 52 return waitForScrollEnd(scrollingElement).then(() => { 53 assert_equals(scrollingElement.scrollLeft, elementToRevealLeft, "Final value of scrollLeft"); 54 assert_equals(scrollingElement.scrollTop, elementToRevealTop, "Final value of scrollTop"); 55 }); 56 }, "Smooth scrolling of an element with default scroll-behavior"); 57 </script>