diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html')
-rw-r--r-- | testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html new file mode 100644 index 0000000000..f15a291f08 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html @@ -0,0 +1,128 @@ +<!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> + .scroller { + overflow: scroll; + position: relative; + height: 400px; + width: 400px; + border:solid 1px black; + scroll-snap-type: y mandatory; + } + .no-snap { scroll-snap-align: none } + .scroller div:focus { + border: solid 1px red; + } + .large-space { + height: 300vh; + width: 300vw; + } + .target { + scroll-snap-align: start; + position: absolute; + width: 100px; + height: 100px; + border: solid 1px black; + } + .top { + top: 0px; + } + .left { + left: 0px; + } + .right { + left: 200px; + } + .bottom { + top: 200px; + } + </style> + <div id="scroller" class="scroller"> + <div class="large-space no-snap" tabindex="1" id="space"></div> + <div id="topleft" tabindex="1" class="top left target">top left</div> + <div id="topright" tabindex="1" class="top right target">top right</div> + <div id="bottomleft" tabindex="1" class="bottom left target">bottom left</div> + <div id="bottomright" tabindex="1" class="bottom right target">bottom right</div> + </div> + <script> + window.onload = () => { + const bottomright = document.getElementById("bottomright"); + const bottomleft = document.getElementById("bottomleft"); + const scroller = document.getElementById("scroller"); + + async function commonInitialization() { + await waitForCompositorCommit(); + assert_equals(scroller.scrollTop, 0, "snapped to top row"); + } + + promise_test(async (t) => { + await commonInitialization(); + + focusAndAssert(bottomright); + await runScrollSnapSelectionVerificationTest(t, scroller, + [bottomright, + bottomleft], + /*expected_target=*/bottomright, "y"); + + focusAndAssert(bottomleft); + await runScrollSnapSelectionVerificationTest(t, scroller, + [bottomright, + bottomleft], + /*expected_target=*/bottomleft, "y"); + }, "scroller selects focused target from aligned choices on snap"); + + promise_test(async (t) => { + t.add_cleanup(() => { + bottomright.style.left = "200px"; + }) + await commonInitialization(); + + // Move bottomright out of the snapport. + bottomright.style.left = "500px"; + + // Set focus on bottomright without scrolling to it. + focusAndAssert(bottomright, true); + await runScrollSnapSelectionVerificationTest(t, scroller, + [bottomright, + bottomleft], + /*expected_target=*/bottomleft, "y"); + }, "out-of-viewport focused element is not the selected snap target."); + + promise_test(async(t) => { + t.add_cleanup(() => { + bottomleft.style.top = "200px"; + }); + await commonInitialization(); + + // Set focus on bottomright without scrolling to it. + focusAndAssert(bottomright, true); + + // Move bottomleft below bottomright. + bottomleft.style.top = "400px"; + + // Snap to bottomleft. + scroller.scrollTop = bottomleft.offsetTop; + + // Test that if bottomright is also shifted so that it is aligned with + // bottomleft, bottomleft remains the selected snap target, despite + // bottomright's having focus. + await runLayoutSnapSeletionVerificationTest(t, scroller, [bottomright], + bottomleft, "y"); + }, "scroller follows selected snap target through layout shift," + + "regardless of focus"); + + } + </script> + </body> +</html> |