diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-first-in-tree-order.html')
-rw-r--r-- | testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-first-in-tree-order.html | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-first-in-tree-order.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-first-in-tree-order.html new file mode 100644 index 0000000000..f4b32e10c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-first-in-tree-order.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap"/> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="resources/common.js"></script> + </head> +<body> + <style> + .large-space { + position: absolute; + height: 300vh; + width: 300vw; + z-index: -1; + } + .target { + width: 100px; + height: 100px; + background-color: green; + scroll-snap-align: start; + } + .snapcontainer { + border:solid 1px black; + overflow: scroll; + scroll-snap-type: y mandatory; + } + .outer { + height: 315px; + width: 1200px; + position: relative; + } + .inner { + height: 115px; + width: 120px; + } + .positioned { + position: absolute; + top: 150px; + } + .outer .target1 { + left: 0px; + } + .outer .target2 { + left: 110px; + } + .outer .target3 { + left: 220px; + } + .outer .target4 { + left: 330px; + } + .outer .target5 { + left: 440px; + } + .inner .target1 { + left: 550px; + } + .inner .target2 { + left: 660px; + } + .inner .target3 { + left: 770px; + } + .inner .target4 { + left: 880px; + } + .inner .target5 { + left: 990px; + } + .placeholder { + background-color: purple; + top: 0px; + } + .outer > .placeholder { + position: absolute; + top: 0px; + left: 200px; + } + </style> + <!-- + Placeholder snap areas are used to make it necessary for the scroller to + scroll in order to reach its snap targets. This forces the scroller to + invoke the snap point selection algorithm. Otherwise (i.e. if no scroll + happens) a layout change (inserting and removing children) may not be enough + to cause the scroller to select the intended snap targets. + --> + <div id="outerscroller" class="outer snapcontainer"> + <div id="outerplaceholder1" class="placeholder target">Outer placeholder + </div> + <div id="outertarget1" class="positioned target target1">Outer 1</div> + <div id="outertarget2" class="positioned target target2">Outer 2</div> + <div id="outertarget3" class="positioned target target3">Outer 3</div> + <div id="outertarget4" class="positioned target target4">Outer 4</div> + <div id="outertarget5" class="positioned target target5">Outer 5</div> + <div id="innerscroller" class="inner snapcontainer"> + <div id="innerplaceholder1" class="placeholder target">Inner Placeholder + </div> + <div id="innertarget1" class="positioned target target1">Inner 1</div> + <div id="innertarget2" class="positioned target target2">Inner 2</div> + <div id="innertarget3" class="positioned target target3">Inner 3</div> + <div id="innertarget4" class="positioned target target4">Inner 4</div> + <div id="innertarget5" class="positioned target target5">Inner 5</div> + </div> + <div class="large-space"></div> + </div> + <script> + window.onload = async () => { + const outerscroller = document.getElementById("outerscroller"); + const innerscroller = document.getElementById("innerscroller"); + const outertargets = Array.from( + document.querySelectorAll(".outer > .positioned.target")); + const innertargets = Array.from( + document.querySelectorAll(".inner > .positioned.target")); + + promise_test(async (t) => { + for (const target of outertargets) { + await waitForScrollReset(t, outerscroller); + await waitForCompositorCommit(); + + // Make target first in tree order. + outerscroller.removeChild(target); + outerscroller.prepend(target); + + await runScrollSnapSelectionVerificationTest(t, outerscroller, + /*aligned_elements_x=*/[], + /*aligned_elements_y=*/outertargets, + /*axis=*/"y", + /*expected_target_x*/null, + /*expected_target_y*/target); + } + + // The next for-loop tests outerscroller's selection of + // out-of-positioned targets that are children of innerscroller. For + // outerscroller to consider them first in tree order relative to its + // own children, innerscroller must be the first child of outer + // scroller. + outerscroller.removeChild(innerscroller); + outerscroller.prepend(innerscroller); + + for (const target of innertargets) { + await waitForScrollReset(t, outerscroller); + await waitForCompositorCommit(); + + // Make target first in tree order. + innerscroller.removeChild(target); + innerscroller.prepend(target); + + await runScrollSnapSelectionVerificationTest(t, outerscroller, + /*aligned_elements_x=*/[], + /*aligned_elements_y=*/innertargets, + /*axis=*/"y", + /*expected_target_x*/null, + /*expected_target_y*/target); + } + }, "first in tree-order is selected as snap target."); + } + </script> +</body> +</html> |