+ +

Box 0

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

+ + + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/nested-supercedes-common-to-both-axes.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/nested-supercedes-common-to-both-axes.html new file mode 100644 index 0000000000..15743026bc --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/nested-supercedes-common-to-both-axes.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + +

Box 1

Box 2

Box 3

+ + + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/positioned-target-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/positioned-target-iframe.html new file mode 100644 index 0000000000..65195af621 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/positioned-target-iframe.html @@ -0,0 +1,73 @@ + + + + +

Box 1

Box 2

Box 3

Box 4

Box 5

+ + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html new file mode 100644 index 0000000000..09b81e7c0d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + +

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

+ + + 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 @@ + + + + + + + + + + + + + + + +

Outer placeholder +

Outer 1

Outer 2

Outer 3

Outer 4

Outer 5

Inner Placeholder +

Inner 1

Inner 2

Inner 3

Inner 4

Inner 5

+ + + 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 index f15a291f08..9acf0e905c 100644 --- 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 @@ -71,15 +71,19 @@ focusAndAssert(bottomright); await runScrollSnapSelectionVerificationTest(t, scroller, - [bottomright, - bottomleft], - /*expected_target=*/bottomright, "y"); + /*aligned_elements_x=*/[], + /*aligned_elements_y=*/[bottomright, bottomleft], + /*axis=*/"y", + /*expected_target_x=*/null, + /*expected_target_y=*/bottomright); focusAndAssert(bottomleft); await runScrollSnapSelectionVerificationTest(t, scroller, - [bottomright, - bottomleft], - /*expected_target=*/bottomleft, "y"); + /*aligned_elements_x=*/[], + /*aligned_elements_y=*/[bottomright, bottomleft], + /*axis=*/"y", + /*expected_target_x=*/null, + /*expected_target_y=*/bottomleft); }, "scroller selects focused target from aligned choices on snap"); promise_test(async (t) => { @@ -94,9 +98,11 @@ // Set focus on bottomright without scrolling to it. focusAndAssert(bottomright, true); await runScrollSnapSelectionVerificationTest(t, scroller, - [bottomright, - bottomleft], - /*expected_target=*/bottomleft, "y"); + /*aligned_elements_x=*/[], + /*aligned_elements_y=*/[bottomright, bottomleft], + /*axis=*/"y", + /*expected_target_x=*/null, + /*expected_target_y=*/bottomleft); }, "out-of-viewport focused element is not the selected snap target."); promise_test(async(t) => { diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html index a6a087316f..4330022b27 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html @@ -97,11 +97,19 @@ focusAndAssert(lefttarget1, /*preventScroll=*/true); await runScrollSnapSelectionVerificationTest(t, outercontainer, - [leftcontainer, rightcontainer], leftcontainer, "y"); + /*aligned_elements_x=*/[], + /*aligned_elements_y=*/[leftcontainer, rightcontainer], + /*axis=*/"y", + /*expected_target_x=*/null, + /*expected_target_x=*/leftcontainer); focusAndAssert(righttarget1, /*preventScroll=*/true); await runScrollSnapSelectionVerificationTest(t, outercontainer, - [leftcontainer, rightcontainer], rightcontainer, "y"); + /*aligned_elements_x=*/[], + /*aligned_elements_y=*/[leftcontainer, rightcontainer], + /*axis=*/"y", + /*expected_target_x=*/null, + /*expected_target_x=*/rightcontainer); }, "Snap container prefers focused nested snap target."); } diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-inner-target.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-inner-target.html new file mode 100644 index 0000000000..3cabbc7945 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-inner-target.html @@ -0,0 +1,158 @@ + + + + + + + + + + + + + + +

Top Left

Top Right

Outer

+ + + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-iframe.html new file mode 100644 index 0000000000..35b0684b26 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-iframe.html @@ -0,0 +1,53 @@ + + + + +

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Box 8

Box 9

+ + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html new file mode 100644 index 0000000000..6bc47d15ef --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html @@ -0,0 +1,137 @@ + + + + +

+ + + + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html new file mode 100644 index 0000000000..6221b0e4b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html @@ -0,0 +1,62 @@ + + + + + + CSS Scroll Snap Test: snap selection with targeted element + + + + + + + + + + + + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-positioned.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-positioned.html new file mode 100644 index 0000000000..3a2b1a9089 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-positioned.html @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element.html new file mode 100644 index 0000000000..ceb9bd2ee0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element.html @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js index 6ceec9118c..1fd88949b3 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js @@ -6,54 +6,55 @@ // This function should be used by scroll snap WPTs wanting to test snap target // selection when scrolling to multiple aligned targets. -// It assumes scroll-snap-align: start alignment and tries to align to the list -// of snap targets provided, |elements|, which are all expected to be at the -// same offset. -async function scrollToAlignedElementsInAxis(scroller, elements, axis) { +// It assumes scroll-snap-align: start alignment and tries to align to the lists +// of snap targets provided, |elements_x| and |elements_y|, which are all +// expected to be at the same offset in the relevant axis. +async function scrollToAlignedElements(scroller, elements_x, elements_y) { let target_offset_y = null; let target_offset_x = null; - if (axis == "y") { - for (const e of elements) { - if (target_offset_y) { - assert_equals(e.offsetTop, target_offset_y, - `${e.id} is at y offset ${target_offset_y}`); - } else { - target_offset_y = e.offsetTop; - } + for (const e of elements_y) { + if (target_offset_y != null) { + assert_equals(e.offsetTop, target_offset_y, + `${e.id} is at y offset ${target_offset_y}`); + } else { + target_offset_y = e.offsetTop; } - assert_equals(); - } else { - for (const e of elements) { - if (target_offset_x) { - assert_equals(e.offsetLeft, target_offset_x, - `${e.id} is at x offset ${target_offset_x}`); - } else { - target_offset_x = e.offsetLeft; - } + } + for (const e of elements_x) { + if (target_offset_x != null) { + assert_equals(e.offsetLeft, target_offset_x, + `${e.id} is at x offset ${target_offset_x}`); + } else { + target_offset_x = e.offsetLeft; } } - assert_not_equals(target_offset_x || target_offset_y, null); + assert_true((target_offset_x != null) || (target_offset_y != null), + "scrolls in at least 1 axis"); - const scrollend_promise = waitForScrollendEventNoTimeout(scroller); - await new test_driver.Actions().scroll(0, 0, - (target_offset_x || 0) - scroller.scrollLeft, - (target_offset_y || 0) - scroller.scrollTop, - { origin: scroller }) - .send(); - await scrollend_promise; - if (axis == "y") { + if ((target_offset_x != null && scroller.scrollLeft != target_offset_x) || + (target_offset_y != null && scroller.scrollTop != target_offset_y)) { + const scrollend_promise = waitForScrollendEventNoTimeout(scroller); + await new test_driver.Actions().scroll(0, 0, + (target_offset_x || scroller.scrollLeft) - scroller.scrollLeft, + (target_offset_y || scroller.scrollTop) - scroller.scrollTop, + { origin: scroller }) + .send(); + await scrollend_promise; + } + if (target_offset_y) { assert_equals(scroller.scrollTop, target_offset_y, "vertical scroll done"); - } else { - assert_equals(scroller.scrollLeft,target_offset_x, "horizontal scroll done"); + } + if (target_offset_x) { + assert_equals(scroller.scrollLeft, target_offset_x, "horizontal scroll done"); } } -// This function verifies the snap target that a scroller picked by triggerring +// This function verifies the snap target that a scroller picked by triggering // a layout change and observing which target is followed. Tests using this // method should ensure that there is at least 100px of room to scroll in the // desired axis. // It assumes scroll-snap-align: start alignment. -function verifySelectedSnapTarget(scroller, expected_snap_target, axis) { +function verifySelectedSnapTarget(t, scroller, expected_snap_target, axis) { // Save initial style. const initial_left = getComputedStyle(expected_snap_target).left; const initial_top = getComputedStyle(expected_snap_target).top; @@ -62,19 +63,26 @@ function verifySelectedSnapTarget(scroller, expected_snap_target, axis) { const initial_scroll_top = scroller.scrollTop; const target_top = expected_snap_target.offsetTop + 100; expected_snap_target.style.top = `${target_top}px`; - assert_equals(scroller.scrollTop, expected_snap_target.offsetTop, - `scroller followed ${expected_snap_target.id} after layout change`); - assert_not_equals(scroller.scrollTop, initial_scroll_top, - "scroller actually scrolled in y axis"); + // Wrap these asserts in t.step (which catches exceptions) so that even if + // they fail, we'll get to undo the style changes we made, allowing + // subsequent tests to run with the expected style/layout. + t.step(() => { + assert_equals(scroller.scrollTop, expected_snap_target.offsetTop, + `scroller followed ${expected_snap_target.id} in y axis after layout change`); + assert_not_equals(scroller.scrollTop, initial_scroll_top, + "scroller actually scrolled in y axis"); + }); } else { - // Move the expected snap target along the y axis. + // Move the expected snap target along the x axis. const initial_scroll_left = scroller.scrollLeft; const target_left = expected_snap_target.offsetLeft + 100; expected_snap_target.style.left = `${target_left}px`; - assert_equals(scroller.scrollLeft, expected_snap_target.offsetLeft, - `scroller followed ${expected_snap_target.id} after layout change`); - assert_not_equals(scroller.scrollLeft, initial_scroll_left, - "scroller actually scrolled in x axis"); + t.step(() => { + assert_equals(scroller.scrollLeft, expected_snap_target.offsetLeft, + `scroller followed ${expected_snap_target.id} in x axis after layout change`); + assert_not_equals(scroller.scrollLeft, initial_scroll_left, + "scroller actually scrolled in x axis"); + }); } // Undo style changes. expected_snap_target.style.top = initial_top; @@ -83,19 +91,24 @@ function verifySelectedSnapTarget(scroller, expected_snap_target, axis) { // This is a utility function for tests which verify that the correct element // is snapped to when snapping at the end of a scroll. -async function runScrollSnapSelectionVerificationTest(t, scroller, aligned_elements, - expected_target, axis) { +async function runScrollSnapSelectionVerificationTest(t, scroller, + aligned_elements_x=[], aligned_elements_y=[], axis="", + expected_target_x=null, expected_target_y=null) { // Save initial scroll offset. const initial_scroll_left = scroller.scrollLeft; const initial_scroll_top = scroller.scrollTop; - await scrollToAlignedElementsInAxis(scroller, aligned_elements, axis); - verifySelectedSnapTarget(scroller, expected_target, axis); - // Restore initial scroll offsets. - const scrollend_promise = new Promise((resolve) => { - scroller.addEventListener("scrollend", resolve); + await scrollToAlignedElements(scroller, aligned_elements_x, + aligned_elements_y); + t.step(() => { + if (axis == "y" || axis == "both") { + verifySelectedSnapTarget(t, scroller, expected_target_y, axis); + } + if (axis == "x" || axis == "both") { + verifySelectedSnapTarget(t, scroller, expected_target_x, axis); + } }); - scroller.scrollTo(initial_scroll_left, initial_scroll_top); - await scrollend_promise; + // Restore initial scroll offsets. + await waitForScrollReset(t, scroller, initial_scroll_left, initial_scroll_top); } // This is a utility function for tests verifying that a layout shift does not @@ -127,7 +140,7 @@ async function runLayoutSnapSeletionVerificationTest(t, scroller, elements_to_al } shiftLayoutToAlignElements(elements_to_align, expected_target, axis); - verifySelectedSnapTarget(scroller, expected_target, axis); + verifySelectedSnapTarget(t, scroller, expected_target, axis); // Restore initial scroll offset and position states. let num_elements = initial_tops.length; diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/stash.py b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/stash.py new file mode 100644 index 0000000000..a70672ecf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/stash.py @@ -0,0 +1,27 @@ +# Copyright 2024 The Chromium Authors +# Use of this source code is governed by a BSD-style license that can be +# found in the LICENSE file. +""" +This file allows the different windows created by +css/css-scroll-snap/snap-after-relayout/prefer-targeted-element-main-frame.html +to store and retrieve data. + +prefer-targeted-element-main-frame.html (test file) opens a window to +prefer-targeted-element-main-frame.html-target.html which writes some data +which the test file will eventually read. This file handles the requests from +both windows. +""" + +import time + +def main(request, response): + key = request.GET.first(b"key") + + if request.method == u"POST": + # Received result data from target page + request.server.stash.put(key, request.body, u'/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets') + return u"ok" + else: + # Request for result data from test page + value = request.server.stash.take(key, u'/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets') + return value -- cgit v1.2.3