| <!DOCTYPE html> |
| <title>Testing scrollOptions' behavior with scrollIntoView for nested scrolling nodes</title> |
| <meta name="timeout" content="long"/> |
| <link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com"> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior"> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box"> |
| <script src="../../../../../resources/testharness.js"></script> |
| <script src="../../../../../resources/testharnessreport.js"></script> |
| <script src="support/scroll-behavior.js"></script> |
| <style> |
| .scrollable { |
| overflow: auto; |
| height: 200px; |
| } |
| .smoothBehavior { |
| scroll-behavior: smooth; |
| } |
| .gradient { |
| background: linear-gradient(135deg, red, green); |
| } |
| </style> |
| <div id="log"> |
| </div> |
| <div> |
| <div class="scrollable smoothBehavior" style="width: 450px"> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| <div class="scrollable smoothBehavior" style="width: 400px"> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| <div class="scrollable" style="width: 350px"> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| <div class="scrollable" style="width: 300px"> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| <div class="scrollable smoothBehavior" style="width: 250px"> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| <div class="scrollable" style="width: 200px"> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| <div id="elementToReveal" style="width: 10px; height: 10px; background: black;"></div> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| </div> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| </div> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| </div> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| </div> |
| <div class="gradient" style="width: 100px; height: 500px;"></div> |
| </div> |
| </div> |
| </div> |
| <script> |
| // The CSSOM-View spec and implementations follow different algorithms (scrolls performed in parallel, as inner-to-outer sequence or as outer-to-inner sequence). |
| // See https://github.com/w3c/csswg-drafts/issues/3127 |
| promise_test(() => { |
| return new Promise(function(resolve, reject) { |
| var divs = document.querySelectorAll(".scrollable"); |
| divs.forEach((scrollableDiv) => { |
| resetScroll(scrollableDiv); |
| }); |
| elementToReveal.scrollIntoView({inline: "start", block: "start", behavior: "auto"}); |
| var scrollTop = new Map(); |
| var isSmooth = new Map(); |
| divs.forEach((scrollableDiv) => { |
| scrollTop.set(scrollableDiv, scrollableDiv.scrollTop); |
| isSmooth.set(scrollableDiv, scrollableDiv.classList.contains("smoothBehavior")); |
| // If scroll operations are not performed in parallel, scroll boxes with instant behavior might also need to wait for their predecessors. |
| if (isSmooth.get(scrollableDiv)) |
| assert_less_than(scrollTop.get(scrollableDiv), 500, "Element with smooth behavior should not scroll immediately"); |
| }); |
| |
| observeScrolling(Array.from(divs), function(done) { |
| try { |
| divs.forEach((scrollableDiv) => { |
| assert_less_than_equal(scrollTop.get(scrollableDiv), scrollableDiv.scrollTop, "ScrollTop keeps increasing"); |
| if (!isSmooth.get(scrollableDiv)) |
| assert_any(assert_equals, scrollableDiv.scrollTop, [0, 500], "Element with instant behavior should jump to the final position"); |
| if (done) |
| assert_equals(scrollableDiv.scrollTop, 500, "Final value of scrollTop"); |
| scrollTop.set(scrollableDiv, scrollableDiv.scrollTop); |
| }); |
| } catch(e) { |
| reject(e); |
| } |
| if (done) |
| resolve(); |
| }); |
| }); |
| }, "scrollIntoView with nested elements with different scroll-behavior"); |
| </script> |
