scroll-behavior-scrollintoview-nested.html (4266B)
1 <!DOCTYPE html> 2 <title>Testing scrollOptions' behavior with scrollIntoView for nested scrolling nodes</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 height: 200px; 15 } 16 .smoothBehavior { 17 scroll-behavior: smooth; 18 } 19 .gradient { 20 background: linear-gradient(135deg, red, green); 21 } 22 </style> 23 <div id="log"> 24 </div> 25 <div> 26 <div class="scrollable smoothBehavior" style="width: 450px"> 27 <div class="gradient" style="width: 100px; height: 500px;"></div> 28 <div class="scrollable smoothBehavior" style="width: 400px"> 29 <div class="gradient" style="width: 100px; height: 500px;"></div> 30 <div class="scrollable" style="width: 350px"> 31 <div class="gradient" style="width: 100px; height: 500px;"></div> 32 <div class="scrollable" style="width: 300px"> 33 <div class="gradient" style="width: 100px; height: 500px;"></div> 34 <div class="scrollable smoothBehavior" style="width: 250px"> 35 <div class="gradient" style="width: 100px; height: 500px;"></div> 36 <div class="scrollable" style="width: 200px"> 37 <div class="gradient" style="width: 100px; height: 500px;"></div> 38 <div id="elementToReveal" style="width: 10px; height: 10px; background: black;"></div> 39 <div class="gradient" style="width: 100px; height: 500px;"></div> 40 </div> 41 <div class="gradient" style="width: 100px; height: 500px;"></div> 42 </div> 43 <div class="gradient" style="width: 100px; height: 500px;"></div> 44 </div> 45 <div class="gradient" style="width: 100px; height: 500px;"></div> 46 </div> 47 <div class="gradient" style="width: 100px; height: 500px;"></div> 48 </div> 49 </div> 50 </div> 51 <script> 52 promise_test(async () => { 53 await waitForCompositorReady(); 54 }, "Make sure the page is ready for animation."); 55 56 // The CSSOM-View spec and implementations follow different algorithms (scrolls performed in parallel, as inner-to-outer sequence or as outer-to-inner sequence). 57 // See https://github.com/w3c/csswg-drafts/issues/3127 58 promise_test(() => { 59 return new Promise(function(resolve, reject) { 60 var divs = document.querySelectorAll(".scrollable"); 61 divs.forEach((scrollableDiv) => { 62 resetScroll(scrollableDiv); 63 }); 64 elementToReveal.scrollIntoView({inline: "start", block: "start", behavior: "auto"}); 65 var scrollTop = new Map(); 66 var isSmooth = new Map(); 67 divs.forEach((scrollableDiv) => { 68 scrollTop.set(scrollableDiv, scrollableDiv.scrollTop); 69 isSmooth.set(scrollableDiv, scrollableDiv.classList.contains("smoothBehavior")); 70 // If scroll operations are not performed in parallel, scroll boxes with instant behavior might also need to wait for their predecessors. 71 if (isSmooth.get(scrollableDiv)) 72 assert_less_than(scrollTop.get(scrollableDiv), 500, "Element with smooth behavior should not scroll immediately"); 73 }); 74 75 observeScrolling(Array.from(divs), function(done) { 76 try { 77 divs.forEach((scrollableDiv) => { 78 assert_less_than_equal(scrollTop.get(scrollableDiv), scrollableDiv.scrollTop, "ScrollTop keeps increasing"); 79 if (!isSmooth.get(scrollableDiv)) 80 assert_any(assert_equals, scrollableDiv.scrollTop, [0, 500], "Element with instant behavior should jump to the final position"); 81 if (done) 82 assert_equals(scrollableDiv.scrollTop, 500, "Final value of scrollTop"); 83 scrollTop.set(scrollableDiv, scrollableDiv.scrollTop); 84 }); 85 } catch(e) { 86 reject(e); 87 } 88 if (done) 89 resolve(); 90 }); 91 }); 92 }, "scrollIntoView with nested elements with different scroll-behavior"); 93 </script>