commit dedc9848dc92474578e864737c0ba1d28cd96b5a parent e7668aa86357c37a2e2a7c45bd97c6c98064e97b Author: moonira <moonira@google.com> Date: Fri, 3 Oct 2025 08:58:15 +0000 Bug 1990886 [wpt PR 55069] - Add scroll source type for compositor scrolls, a=testonly Automatic update from web-platform-tests Add scroll source type for compositor scrolls Pass scroll type [0] from compasitor scrolls to main for correct scroll direction scroll-state query [1] evaluation for user initiated scrolls. Note: now all scrollbar and touch scrolls are implemented as relative scrolls. There is TODO left for it. [0] https://drafts.csswg.org/css-scroll-snap-1/#scroll-types [1] https://drafts.csswg.org/css-conditional-5/#direction Bug: 414556050 Change-Id: Ib0179943b1624534f2666a5d4971675bb88b43dd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6916797 Commit-Queue: Munira Tursunova <moonira@google.com> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1520812} -- wpt-commits: 81ffc491d22d93b3ea03a623989f320ba9a484be wpt-pr: 55069 Diffstat:
6 files changed, 410 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-mouse-drag-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-mouse-drag-scroll.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title>@container: scroll-state(direction) user mouse drag scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-y: scroll; + } + #filler { + height: 600px; + } + #target { + --none: no; + --y: no; + @container scroll-state(direction: none) { + --none: yes; + } + @container scroll-state(direction: y) { + --y: yes; + } + } +</style> +<div id="scroller"> + <div id="filler"> + <div id="target"></div> + </div> +</div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + function drag_scrollbar(start_pos, end_pos) { + return new test_driver.Actions() + .addPointer("TestPointer", "mouse") + .pointerMove(Math.round(start_pos.x), Math.round(start_pos.y)) + .pointerDown() + .addTick(100) + .pointerMove(Math.round(end_pos.x), Math.round(end_pos.y)) + .pointerUp() + .send(); + } + + promise_test(async t => { + // Scrollbar position top right of element + const start_pos = { + x: 200, + y: 30, + }; + const end_pos = { x: 200, y: 200 }; + + await drag_scrollbar(start_pos, end_pos); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + }, "Mouse drag scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-multiple-scrollers.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-multiple-scrollers.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<title>@container: scroll-state(direction) multiple scrollers</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/dom/events/scrolling/scroll_support.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<style> + .scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-y: scroll; + } + .filler { + height: 600px; + } + .target { + --top1: no; + --top2: no; + --bottom1: no; + --bottom2: no; + } + #target1 { + @container scroll-state(direction: top) { + --top1: yes; + } + @container scroll-state(direction: bottom) { + --bottom1: yes; + } + } + #target2 { + @container scroll-state(direction: top) { + --top2: yes; + } + @container scroll-state(direction: bottom) { + --bottom2: yes; + } + } +</style> +<div id="scroller1" class="scroller"> + <div class="filler"> + <div id="target1" class="target"></div> + </div> +</div> +<div id="scroller2" class="scroller"> + <div class="filler"> + <div id="target2" class="target"></div> + </div> +</div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + function touch_scroll(start_pos, end_pos) { + return new test_driver.Actions() + .addPointer("TestPointer", "touch") + .pointerMove(Math.round(start_pos.x), Math.round(start_pos.y)) + .pointerDown() + .addTick() + .pause(200) + .pointerMove(Math.round(end_pos.x), Math.round(end_pos.y)) + .addTick() + .pointerUp() + .send(); + } + + promise_test(async t => { + let scrollEndPromise1 = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller1); + let scrollEndPromise2 = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller2); + + scroller1.addEventListener('scroll', () => { + scroller2.scrollTop = 300; + scroller2.scrollBy({top: -150, behavior: "smooth"}); + }, { once: true }); + + // Scroll element position + const start = { + x: 100, + y: 100, + }; + const end = { x: 100, y: 0 }; + await touch_scroll(start, end); + + await Promise.all([scrollEndPromise1, scrollEndPromise2]); + await waitForAnimationFrames(2); + + assert_equals(getComputedStyle(target1).getPropertyValue("--top1"), "no"); + assert_equals(getComputedStyle(target1).getPropertyValue("--bottom1"), "yes"); + assert_equals(scroller2.scrollTop, 150); + assert_equals(getComputedStyle(target2).getPropertyValue("--top2"), "yes"); + assert_equals(getComputedStyle(target2).getPropertyValue("--bottom2"), "no"); + }, "User scroll caused programmatic relative scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-scrollbar-button-clicks.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-scrollbar-button-clicks.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>@container: scroll-state(direction) user mouse drag scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-y: scroll; + } + #filler { + height: 600px; + } + #target { + --none: no; + --y: no; + @container scroll-state(direction: none) { + --none: yes; + } + @container scroll-state(direction: y) { + --y: yes; + } + } +</style> +<div id="scroller"> + <div id="filler"> + <div id="target"></div> + </div> +</div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + function scrollbar_track_click(track_position) { + return new test_driver.Actions() + .addPointer("TestPointer", "mouse") + .pointerMove(Math.round(track_position.x), Math.round(track_position.y)) + .pointerDown() + .pointerUp() + .send(); + } + + promise_test(async t => { + /* Scrollbar down button should be located on bottom right side */ + const track_position = { x: 200, y: 200 }; + await scrollbar_track_click(track_position); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + + }, "Scrollbar button clicks scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-scrollbar-track-clicks.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-scrollbar-track-clicks.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>@container: scroll-state(direction) scrollbar track click scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-y: scroll; + } + #filler { + height: 600px; + } + #target { + --none: no; + --y: no; + @container scroll-state(direction: none) { + --none: yes; + } + @container scroll-state(direction: y) { + --y: yes; + } + } +</style> +<div id="scroller"> + <div id="filler"> + <div id="target"></div> + </div> +</div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + function scrollbar_track_click(track_position) { + return new test_driver.Actions() + .addPointer("TestPointer", "mouse") + .pointerMove(Math.round(track_position.x), Math.round(track_position.y)) + .pointerDown() + .pointerUp() + .send(); + } + + promise_test(async t => { + /* Scrollbar should be located on top right side */ + const track_position = { x: 200, y: 150 }; + await scrollbar_track_click(track_position); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + + }, "Scrollbar track click scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-user-touch-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-user-touch-scroll.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<title>@container: scroll-state(direction) user touch scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-y: scroll; + } + #filler { + height: 600px; + } + #target { + --none: no; + --y: no; + @container scroll-state(direction: none) { + --none: yes; + } + @container scroll-state(direction: y) { + --y: yes; + } + } +</style> +<div id="scroller"> + <div id="filler"> + <div id="target"></div> + </div> +</div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + function touch_scroll(start_pos, end_pos, duration) { + return new test_driver.Actions() + .addPointer("TestPointer", "touch") + .pointerMove(Math.round(start_pos.x), Math.round(start_pos.y)) + .pointerDown() + .addTick() + .pause(200) + .pointerMove(Math.round(end_pos.x), Math.round(end_pos.y), {duration: duration}) + .addTick() + .pointerUp() + .send(); + } + + promise_test(async t => { + // Scrollbar element position + const start_pos = { + x: 100, + y: 100, + }; + const end_pos = { x: 100, y: 0 }; + + await touch_scroll(start_pos, end_pos, 1000); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + }, "Panning gesture scroll is an absolute scroll"); + + promise_test(async t => { + // Scrollbar element position + const start_pos = { + x: 100, + y: 100, + }; + const end_pos = { x: 100, y: 0 }; + + await touch_scroll(start_pos, end_pos, 10); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + + }, "Fling gesture scroll is a relative scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-wheel-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-wheel-scroll.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>@container: scroll-state(direction) mouse wheel scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#direction"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/web-animations/testcommon.js"></script> +<script src="/dom/events/scrolling/scroll_support.js"></script> +<script src="/css/css-scroll-snap/support/common.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-y: scroll; + } + #filler { + height: 600px; + } + #target { + --y: no; + @container scroll-state(direction: y) { + --y: yes; + } + } +</style> +<div id="scroller"> + <div id="filler"> + <div id="target"></div> + </div> +</div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + promise_test(async t => { + let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); + await new test_driver.Actions() + .scroll(0, 0, 0, 100, { origin: scroller, duration: 100 }) + .send(); + await scrollEndPromise; + await waitForAnimationFrames(2); + assert_equals(scroller.scrollTop, 100); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + }, "Mouse wheel scroll"); + +</script>