diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/cssom-view/scroll-behavior-scrollintoview-nested.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/cssom-view/scroll-behavior-scrollintoview-nested.html')
| -rw-r--r-- | testing/web-platform/tests/css/cssom-view/scroll-behavior-scrollintoview-nested.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom-view/scroll-behavior-scrollintoview-nested.html b/testing/web-platform/tests/css/cssom-view/scroll-behavior-scrollintoview-nested.html new file mode 100644 index 0000000000..2a97e06566 --- /dev/null +++ b/testing/web-platform/tests/css/cssom-view/scroll-behavior-scrollintoview-nested.html @@ -0,0 +1,88 @@ +<!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> |