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/css-scroll-snap/snap-area-capturing-remove-scroll-container.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.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/css-scroll-snap/snap-area-capturing-remove-scroll-container.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html b/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html new file mode 100644 index 0000000000..e3798cc73f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<title> + When an element no longer captures snap positions (e.g., no longer + scrollable), then its currently captured snap areas must be reassigned. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"/> +<meta name="viewport" content="user-scalable=no"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +html { + scroll-snap-type: y mandatory; +} + +body { + margin: 0px; +} + +#middle-scroller { + top: 100px; + height: 500px; + width: 500px; + overflow: scroll; + background-color: rgb(12, 61, 2); + scroll-snap-type: none; +} + +#inner-scroller { + top: 200px; + height: 400px; + width: 400px; + overflow: scroll; + background-color: rgb(65, 139, 50); + scroll-snap-type: y mandatory; +} + +.space { + width: 2000px; + height: 2000px; +} + +#inner-snap-area { + top: 300px; + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#document-snap-area { + top: 500px; + width: 200px; + height: 200px; + background-color: lightblue; + scroll-snap-align: start; +} + +</style> +<div class="space"></div> + <div id="middle-scroller"> + <div class="space"></div> + <div id="inner-scroller"> + <div class="space"></div> + <div id="inner-snap-area"></div> + </div> + </div> +</div> +<div id="document-snap-area"></div> +<script> + +// This tests that making a snap container no longer scrollable will reassign +// its snap areas to the next scrollable ancestor, per spec [1]. +// [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions +test(() => { + const inner_scroller = document.getElementById("inner-scroller"); + const middle_scroller = document.getElementById("middle-scroller"); + const document_scroller = document.scrollingElement; + + // Inner scroller should snap to its captured area. + // Middle scroller doesn't snap. + // Document scroller should snap to its only captured area. + inner_scroller.scrollBy(0,10); + middle_scroller.scrollBy(0, 10); + // Scroll to (0,600), where we would expect the inner snap area to be relative + // to the document scroller. + document_scroller.scrollTo(0, 600); + assert_equals(inner_scroller.scrollTop, 300); + assert_equals(middle_scroller.scrollTop, 10); + assert_equals(document_scroller.scrollTop, 500); + + // Inner scroller is no longer a scroll container. + inner_scroller.style.setProperty("overflow", "visible"); + assert_equals(inner_scroller.scrollTop, 0); + assert_equals(middle_scroller.scrollTop, 10); + assert_equals(document_scroller.scrollTop, 500); + + // The new snap container is the middle scroller, which has snap-type 'none'. + // Per spec, the scroll container should capture snap positions even if it has + // snap-type 'none'. + // The middle scroller should not snap. + // The document scroller should still only snap to its captured snap area. + document_scroller.scrollBy(0, 100); + middle_scroller.scrollBy(0, 10); + assert_equals(inner_scroller.scrollTop, 0); + assert_equals(middle_scroller.scrollTop, 20); + assert_equals(document_scroller.scrollTop, 500); + + // The scroll container should now be at the document level. + middle_scroller.style.setProperty("overflow", "visible"); + document_scroller.scrollBy(0, -10); + assert_equals(inner_scroller.scrollTop, 0); + assert_equals(middle_scroller.scrollTop, 0); + + // Check that the existing snap area did not get removed when reassigning + // the inner snap area. + assert_equals(document_scroller.scrollTop, 500); + + // Check that the inner snap area got reassigned to the document. + document_scroller.scrollBy(0, 150); + assert_equals(document_scroller.scrollTop, 600); +}, 'Making a snap container not scrollable should promote the next scrollable\ + ancestor to become a snap container.'); +</script> |