mirror of
https://github.com/servo/servo.git
synced 2025-06-26 18:14:34 +01:00
88 lines
4 KiB
HTML
88 lines
4 KiB
HTML
<!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>
|