<!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:[email protected]">
<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="/dom/events/scrolling/scroll_support.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>
promise_test(async () => {
await waitForCompositorReady();
}, "Make sure the page is ready for animation.");
// 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>
Codebase Browser
chromium