commit 6bfc416ef2662f9dcf4056405ae06486d5eded29 parent 45f1ee04d2355977c6c72255e8bc9ef225b4f94c Author: moonira <moonira@google.com> Date: Thu, 9 Oct 2025 20:38:32 +0000 Bug 1992465 [wpt PR 55233] - Rename scroll-state(direction:) to scroll-state(scrolled:), a=testonly Automatic update from web-platform-tests Rename scroll-state(direction:) to scroll-state(scrolled:) Resolved in: https://github.com/w3c/csswg-drafts/issues/12623#issuecomment-3275717227 Changes are already merged: https://github.com/w3c/csswg-drafts/pull/12881 Bug: 414556050 Change-Id: I5aaf79856da2823a937cc7565489b8db09c0876c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7004323 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Munira Tursunova <moonira@google.com> Cr-Commit-Position: refs/heads/main@{#1524862} -- wpt-commits: d825b643a2e3342adc58b0170e9351a37cf4555a wpt-pr: 55233 Diffstat:
36 files changed, 1398 insertions(+), 1398 deletions(-)
diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scroll-direction-parsing.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scroll-direction-parsing.html @@ -1,38 +0,0 @@ -<!DOCTYPE html> -<title>CSS Conditional Test: @container scroll-state(direction) query parsing</title> -<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> -<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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> -<div style="container-name:name;container-type:scroll-state"> - <main id="cq-main"></main> -</div> -<script> - setup(() => assert_implements_scroll_state_container_queries()); - - test_cq_condition_known('scroll-state(direction)'); - test_cq_condition_known('scroll-state(direction: none)'); - test_cq_condition_known('scroll-state(direction: top)'); - test_cq_condition_known('scroll-state(direction: left)'); - test_cq_condition_known('scroll-state(direction: bottom)'); - test_cq_condition_known('scroll-state(direction: right)'); - test_cq_condition_known('scroll-state(direction: inline-start)'); - test_cq_condition_known('scroll-state(direction: inline-end)'); - test_cq_condition_known('scroll-state(direction: block-start)'); - test_cq_condition_known('scroll-state(direction: block-end)'); - test_cq_condition_known('scroll-state(direction: block)'); - test_cq_condition_known('scroll-state(direction: x)'); - test_cq_condition_known('scroll-state(direction: y)'); - test_cq_condition_known('scroll-state(direction: inline)'); - test_cq_condition_known('(scroll-state(direction: inline-end))'); - test_cq_condition_known('scroll-state((direction: left))'); - test_cq_condition_known('scroll-state(not ((direction: bottom) and (direction: right)))'); - test_cq_condition_known('scroll-state((direction: left) or (direction: top))'); - - test_cq_condition_unknown('scroll-state(direction: auto)'); - test_cq_condition_unknown('scroll-state(direction: true)'); - test_cq_condition_unknown('scroll-state(style(direction: left))'); - test_cq_condition_unknown('style(scroll-state(direction: left))'); - test_cq_condition_unknown('scroll-state(direction:)'); -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scroll-direction-serialization.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scroll-direction-serialization.html @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<title>CSS Container Queries: scroll-state(direction) conditionText serialization</title> -<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> -<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule"> -<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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> -<style id="testSheet"> - @container scroll-state( direction:top ) { } - @container scroll-STate(direction: ) { } - @container scroll-STate(direction) { } - @container scroll-state( ( direction: LEFT) OR ( direction: BOTTOM ) ) { } - @container scroll-state (direction: right) { } -</style> -<script> - setup(() => { - assert_implements_scroll_state_container_queries(); - assert_equals(testSheet.sheet.cssRules.length, 5); - }); - - const tests = [ - ["scroll-state(direction: top)", "Normalize spaces"], - ["scroll-STate(direction: )", "No value - invalid, serializes as <general-enclosed>"], - ["scroll-state(direction)", "Boolean context"], - ["scroll-state((direction: left) or (direction: bottom))", "Logical with 'or'"], - ["scroll-state (direction: right)", "Not a scroll-state function with space before '('"] - ].map((e, i) => [testSheet.sheet.cssRules[i], ...e]); - - tests.forEach((t) => { - test(() => assert_equals(t[0].conditionText, t[1]), t[2]); - }); -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scrolled-parsing.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scrolled-parsing.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS Conditional Test: @container scroll-state(scrolled) query parsing</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<div style="container-name:name;container-type:scroll-state"> + <main id="cq-main"></main> +</div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + test_cq_condition_known('scroll-state(scrolled)'); + test_cq_condition_known('scroll-state(scrolled: none)'); + test_cq_condition_known('scroll-state(scrolled: top)'); + test_cq_condition_known('scroll-state(scrolled: left)'); + test_cq_condition_known('scroll-state(scrolled: bottom)'); + test_cq_condition_known('scroll-state(scrolled: right)'); + test_cq_condition_known('scroll-state(scrolled: inline-start)'); + test_cq_condition_known('scroll-state(scrolled: inline-end)'); + test_cq_condition_known('scroll-state(scrolled: block-start)'); + test_cq_condition_known('scroll-state(scrolled: block-end)'); + test_cq_condition_known('scroll-state(scrolled: block)'); + test_cq_condition_known('scroll-state(scrolled: x)'); + test_cq_condition_known('scroll-state(scrolled: y)'); + test_cq_condition_known('scroll-state(scrolled: inline)'); + test_cq_condition_known('(scroll-state(scrolled: inline-end))'); + test_cq_condition_known('scroll-state((scrolled: left))'); + test_cq_condition_known('scroll-state(not ((scrolled: bottom) and (scrolled: right)))'); + test_cq_condition_known('scroll-state((scrolled: left) or (scrolled: top))'); + + test_cq_condition_unknown('scroll-state(scrolled: auto)'); + test_cq_condition_unknown('scroll-state(scrolled: true)'); + test_cq_condition_unknown('scroll-state(style(scrolled: left))'); + test_cq_condition_unknown('style(scroll-state(scrolled: left))'); + test_cq_condition_unknown('scroll-state(scrolled:)'); +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scrolled-serialization.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/at-container-scrolled-serialization.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>CSS Container Queries: scroll-state(scrolled) conditionText serialization</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> +<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule"> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<style id="testSheet"> + @container scroll-state( scrolled:top ) { } + @container scroll-STate(scrolled: ) { } + @container scroll-STate(scrolled) { } + @container scroll-state( ( scrolled: LEFT) OR ( scrolled: BOTTOM ) ) { } + @container scroll-state (scrolled: right) { } +</style> +<script> + setup(() => { + assert_implements_scroll_state_container_queries(); + assert_equals(testSheet.sheet.cssRules.length, 5); + }); + + const tests = [ + ["scroll-state(scrolled: top)", "Normalize spaces"], + ["scroll-STate(scrolled: )", "No value - invalid, serializes as <general-enclosed>"], + ["scroll-state(scrolled)", "Boolean context"], + ["scroll-state((scrolled: left) or (scrolled: bottom))", "Logical with 'or'"], + ["scroll-state (scrolled: right)", "Not a scroll-state function with space before '('"] + ].map((e, i) => [testSheet.sheet.cssRules[i], ...e]); + + tests.forEach((t) => { + test(() => assert_equals(t[0].conditionText, t[1]), t[2]); + }); +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-arrow-key-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-arrow-key-scroll.html @@ -1,56 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) arrow key press 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()); - - promise_test(async t => { - const ArrowDown = '\uE015'; - scroller.focus(); - await new test_driver.Actions() - .keyDown(ArrowDown) - .keyUp(ArrowDown) - .send(); - await new test_driver.Actions() - .keyDown(ArrowDown) - .keyUp(ArrowDown) - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); - - }, "Arrow key press scroll"); - -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-home-end-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-home-end-scroll.html @@ -1,78 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) Home/End keys press 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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> -<script src="/css/css-transitions/support/helper.js"></script> -<style> - #scroller { - width: 200px; - height: 200px; - container-type: scroll-state; - overflow-y: scroll; - } - #filler { - height: 600px; - } - #target { - --none: no; - --top: no; - --bottom: no; - @container scroll-state(direction: none) { - --none: yes; - } - @container scroll-state(direction: top) { - --top: yes; - } - @container scroll-state(direction: bottom) { - --bottom: 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 => { - const end = "\uE010"; - scroller.focus(); - await new test_driver.Actions() - .keyDown(end) - .keyUp(end) - .send(); - await new test_driver.Actions() - .keyDown(end) - .keyUp(end) - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - }, "End key scroll is an absolute scroll"); - - promise_test(async t => { - const home = "\uE011"; - scroller.focus(); - await new test_driver.Actions() - .keyDown(home) - .keyUp(home) - .send(); - await new test_driver.Actions() - .keyDown(home) - .keyUp(home) - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - }, "Home key scroll is an absolute scroll"); - -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-hv.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-hv.html @@ -1,84 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) state is persisted across horizontal and vertical scrolling</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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> -<script src="/css/css-transitions/support/helper.js"></script> -<style> - #scroller { - width: 200px; - height: 200px; - container-type: scroll-state; - overflow: scroll; - } - #filler { - height: 600px; - width: 600px; - } - #target { - --top: no; - --bottom: no; - --left: no; - --right: no; - --none: no; - @container scroll-state(direction: top) { - --top: yes; - } - @container scroll-state(direction: bottom) { - --bottom: yes; - } - @container scroll-state(direction: left) { - --left: yes; - } - @container scroll-state(direction: right) { - --right: yes; - } - @container scroll-state(direction: none) { - --none: 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 => { - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - }, "Check that scroll-state(direction) state before scrolling"); - - promise_test(async t => { - scroller.scrollBy(300, 0); - await waitForAnimationFrames(2); - scroller.scrollBy(0, 100); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "yes"); - assert_equals(scroller.scrollLeft, 300); - assert_equals(scroller.scrollTop, 100); - }, "Check that scroll-state(direction) horizontal state is persisted across vertical scroll event"); - - promise_test(async t => { - scroller.scrollBy(0, 100); - await waitForAnimationFrames(2); - scroller.scrollBy(0, -100); - await waitForAnimationFrames(2); - scroller.scrollBy(-200, 0); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(scroller.scrollLeft, 100); - assert_equals(scroller.scrollTop, 100); - }, "Check that scroll-state(direction) vertical state is persisted across horizontal scroll event"); - -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-keyboard-scroll-on-body.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-keyboard-scroll-on-body.html @@ -1,62 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) keyboard scroll on body</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> -html { - overflow: scroll; -} - -body { - container-type: scroll-state; - overflow-y: scroll; -} - -body { - height: 300px; -} - -div { - height: 1000px; - --y: no; -} - -@container scroll-state(direction: y) { - div { - --y: yes; - } -} -</style> -<body> -<div id="target"></div> -</body> -<script> - setup(() => assert_implements_scroll_state_container_queries()); - - promise_test(async t => { - await new test_driver.Actions() - .addPointer("TestPointer", "mouse") - .pointerMove(100, 100) - .pointerDown() - .pointerUp() - .send(); - await new test_driver.Actions() - .keyDown('\uE00D') - .keyUp('\uE00D') - .send(); - await new test_driver.Actions() - .keyDown('\uE00D') - .keyUp('\uE00D') - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); - - }, "Spacebar scroll on body"); - -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-keyboard-scroll-on-root.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-keyboard-scroll-on-root.html @@ -1,49 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) keyboard scroll on root element</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> - html { - container-type: scroll-state; - } - - body { - min-height: 200vh; - } - - div { - --y: no; - } - - @container scroll-state(direction: y) { - div { - --y: yes; - } - } -</style> -<body> -<div id="target"></div> -</body> -<script> - setup(() => assert_implements_scroll_state_container_queries()); - - promise_test(async t => { - await new test_driver.Actions() - .keyDown('\uE00D') - .keyUp('\uE00D') - .send(); - await new test_driver.Actions() - .keyDown('\uE00D') - .keyUp('\uE00D') - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); - }, "Spacebar scroll on root"); - -</script> 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 @@ -1,113 +0,0 @@ -<!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="/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: scroll; - } - #filler { - height: 600px; - width: 600px; - } - #target { - --none: no; - --x: no; - --y: no; - @container scroll-state(direction: none) { - --none: yes; - } - @container scroll-state(direction: y) { - --y: yes; - } - @container scroll-state(direction: x) { - --x: 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 => { - let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); - - // Skip test on platforms that do not have a visible scrollbar (e.g. - // overlay scrollbar). - const scrollbar_width = scroller.offsetWidth - scroller.clientWidth; - if (scrollbar_width == 0) { - return; - } - assert_equals(scroller.scrollTop, 0); - - // Vertical scrollbar position top right - const start_pos = { - x: 200, - y: 30, - }; - const end_pos = { x: 200, y: 200 }; - - await drag_scrollbar(start_pos, end_pos); - await scrollEndPromise; - await waitForAnimationFrames(2); - - assert_not_equals(scroller.scrollTop, 0); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); - - }, "Vertical scrollbar drag scroll"); - - promise_test(async t => { - let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); - - // Skip test on platforms that do not have a visible scrollbar (e.g. - // overlay scrollbar). - const scrollbar_height = scroller.offsetHeight - scroller.clientHeight; - if (scrollbar_height == 0) { - return; - } - assert_equals(scroller.scrollLeft, 0); - - // Horizontal scrollbar position bottom left - const start_pos = { - x: 30, - y: 200, - }; - const end_pos = { x: 200, y: 200 }; - - await drag_scrollbar(start_pos, end_pos); - await scrollEndPromise; - await waitForAnimationFrames(2); - - assert_not_equals(scroller.scrollLeft, 0); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); - - }, "Horizontal scrollbar 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 @@ -1,98 +0,0 @@ -<!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-programmatic-absolute-scrolls.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-programmatic-absolute-scrolls.html @@ -1,104 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) ignores absolute scrolls</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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> -<script src="/css/css-transitions/support/helper.js"></script> -<style> - #scroller { - width: 200px; - height: 200px; - container-type: scroll-state; - overflow-x: scroll; - overflow-y: scroll; - } - #filler { - height: 600px; - width: 600px; - } - #target { - --top: no; - --bottom: no; - --y: no; - --left: no; - --right: no; - --x: no; - --none: no; - @container scroll-state(direction: top) { - --top: yes; - } - @container scroll-state(direction: bottom) { - --bottom: yes; - } - @container scroll-state(direction: y) { - --y: yes; - } - @container scroll-state(direction: left) { - --left: yes; - } - @container scroll-state(direction: right) { - --right: yes; - } - @container scroll-state(direction: x) { - --x: yes; - } - @container scroll-state(direction: none) { - --none: 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 => { - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); - - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); - }, "Check that scroll-state(direction) state before scrolling"); - - promise_test(async t => { - scroller.scrollTop = 300; - scroller.scrollLeft = 300; - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); - - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); - assert_equals(scroller.scrollTop, 300); - assert_equals(scroller.scrollLeft, 300); - }, "scrollTop and scrollLeft scrolls should not affect scroll-state(direction)"); - - promise_test(async t => { - scroller.scrollTo(0, 100); - scroller.scrollTo(100, 0); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); - - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); - }, "scrollTo scrolls should not affect scroll-state(direction)"); - -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-programmatic-relative-scrolls.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-programmatic-relative-scrolls.html @@ -1,135 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) changed after 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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> -<script src="/css/css-transitions/support/helper.js"></script> -<style> - #scroller { - width: 200px; - height: 200px; - container-type: scroll-state; - overflow-x: scroll; - overflow-y: scroll; - } - #filler { - height: 600px; - width: 600px; - } - #target { - --top: no; - --bottom: no; - --y: no; - --left: no; - --right: no; - --x: no; - --none: no; - @container scroll-state(direction: top) { - --top: yes; - } - @container scroll-state(direction: bottom) { - --bottom: yes; - } - @container scroll-state(direction: y) { - --y: yes; - } - @container scroll-state(direction: left) { - --left: yes; - } - @container scroll-state(direction: right) { - --right: yes; - } - @container scroll-state(direction: x) { - --x: yes; - } - @container scroll-state(direction: none) { - --none: 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 => { - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); - - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); - }, "Check that scroll-state(direction) state before scrolling"); - - promise_test(async t => { - scroller.scrollBy(0, -100); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); - - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); - }, "Scrolling up when scrollbar is on the top should not change scroll-state(direction)"); - - promise_test(async t => { - scroller.scrollTop = 200; - scroller.scrollBy(0, -100, "instant"); - scroller.scrollTop = 0; - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "no"); - - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); - }, "Relative scroll followed by absolute scroll should change scroll direction"); - - promise_test(async t => { - scroller.scrollBy(0, 300); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); - assert_equals(scroller.scrollTop, 300); - }, "scroll-state(direction) after scrolling bottom"); - - promise_test(async t => { - scroller.scrollBy(0, -200); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); - assert_equals(scroller.scrollTop, 100); - }, "scroll-state(direction) after scrolling top"); - - promise_test(async t => { - scroller.scrollBy(300, 0); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "yes"); - assert_equals(scroller.scrollLeft, 300); - }, "scroll-state(direction) after scrolling right"); - - promise_test(async t => { - scroller.scrollBy(-200, 0); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--left"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--x"), "yes"); - assert_equals(scroller.scrollLeft, 100); - }, "scroll-state(direction) after scrolling left"); - -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-pu-pd-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-pu-pd-scroll.html @@ -1,76 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) PageUp/PageDown keys press 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; - --top: no; - @container scroll-state(direction: none) { - --none: yes; - } - @container scroll-state(direction: top) { - --top: 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 => { - const PageUp = '\uE00E'; - const PageDown = '\uE00F'; - scroller.focus(); - await new test_driver.Actions() - .keyDown(PageUp) - .keyUp(PageUp) - .send(); - await new test_driver.Actions() - .keyDown(PageUp) - .keyUp(PageUp) - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); - - }, "PageUp key shouldn't scroll when scroller is already on top"); - - promise_test(async t => { - const PageUp = '\uE00E'; - const PageDown = '\uE00F'; - scroller.scrollTop = 100; - scroller.focus(); - await new test_driver.Actions() - .keyDown(PageUp) - .keyUp(PageUp) - .send(); - await new test_driver.Actions() - .keyDown(PageUp) - .keyUp(PageUp) - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); - - }, "PageUp key 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 @@ -1,67 +0,0 @@ -<!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="/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 { - --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 => { - assert_equals(scroller.scrollTop, 0); - - let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); - - /* Scrollbar down button should be located on bottom right side */ - const track_position = { x: 200, y: 200 }; - await scrollbar_track_click(track_position); - - await scrollEndPromise; - await waitForAnimationFrames(2); - - assert_not_equals(scroller.scrollTop, 0); - 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 @@ -1,67 +0,0 @@ -<!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="/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 { - --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 => { - assert_equals(scroller.scrollTop, 0); - - let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); - - /* Scrollbar should be located on top right side */ - const track_position = { x: 200, y: 150 }; - await scrollbar_track_click(track_position); - - await scrollEndPromise; - await waitForAnimationFrames(2); - - assert_not_equals(scroller.scrollTop, 0); - 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-spacebar-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-spacebar-scroll.html @@ -1,58 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(direction) spacebar 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()); - - promise_test(async t => { - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); - scroller.focus(); - await new test_driver.Actions() - .keyDown('\uE00D') - .keyUp('\uE00D') - .send(); - await new test_driver.Actions() - .keyDown('\uE00D') - .keyUp('\uE00D') - .send(); - await waitForAnimationFrames(2); - assert_equals(getComputedStyle(target).getPropertyValue("--none"), "no"); - assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); - - }, "Spacebar 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 @@ -1,81 +0,0 @@ -<!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 @@ -1,49 +0,0 @@ -<!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> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-wm.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-wm.html @@ -1,150 +0,0 @@ -<!DOCTYPE html> -<title>@container: scroll-state(scroll-state) matching for writing direction</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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> -<script src="/css/css-transitions/support/helper.js"></script> -<style> - .direction { - container-type: scroll-state; - width: 100px; - height: 100px; - overflow: scroll; - } - .filler { - height: 600px; - width: 600px; - } - .target { - @container scroll-state(direction: block-start) { --block-start: yes } - @container scroll-state(direction: block-end) { --block-end: yes } - @container scroll-state(direction: inline-start) { --inline-start: yes } - @container scroll-state(direction: inline-end) { --inline-end: yes } - @container scroll-state(direction: top) { --top: yes } - @container scroll-state(direction: left) { --left: yes } - @container scroll-state(direction: bottom) { --bottom: yes } - @container scroll-state(direction: right) { --right: yes } - } - .ltr { direction: ltr; } - .rtl { direction: rtl; } - .htb { writing-mode: horizontal-tb; } - .vlr { writing-mode: vertical-lr; } - .vrl { writing-mode: vertical-rl; } -</style> -<div class="direction h htb ltr"><div class="filler"><span class="target"></span></div></div> -<div class="direction h htb rtl"><div class="filler"><span class="target"></span></div></div> -<div class="direction h vlr ltr"><div class="filler"><span class="target"></span></div></div> -<div class="direction h vlr rtl"><div class="filler"><span class="target"></span></div></div> -<div class="direction h vrl ltr"><div class="filler"><span class="target"></span></div></div> -<div class="direction h vrl rtl"><div class="filler"><span class="target"></span></div></div> -<div class="direction v htb ltr"><div class="filler"><span class="target"></span></div></div> -<div class="direction v htb rtl"><div class="filler"><span class="target"></span></div></div> -<div class="direction v vlr ltr"><div class="filler"><span class="target"></span></div></div> -<div class="direction v vlr rtl"><div class="filler"><span class="target"></span></div></div> -<div class="direction v vrl ltr"><div class="filler"><span class="target"></span></div></div> -<div class="direction v vrl rtl"><div class="filler"><span class="target"></span></div></div> -<script> - setup(() => assert_implements_scroll_state_container_queries()); - - function match_scroll_direction(container_selector, expected_matches) { - let scroller = document.querySelector(container_selector + " .target"); - let style = getComputedStyle(scroller); - for (let custom_prop of [ "--block-start", - "--block-end", - "--inline-start", - "--inline-end", - "--top", - "--left", - "--bottom", - "--right" ]) { - assert_equals(style.getPropertyValue(custom_prop) === "yes", - expected_matches[custom_prop] === true, custom_prop); - } - } - - promise_test(async t => { - let scroller = document.querySelector(".direction.h.htb.ltr"); - scroller.scrollBy(150, 0); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.h.htb.ltr", { "--inline-end": true, "--right": true }); - }, "scroll-state(direction) horizontal scrollbar horizontal-tb/ltr"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.h.htb.rtl"); - scroller.scrollBy(-150, 0); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.h.htb.rtl", { "--inline-end": true, "--left": true }); - }, "scroll-state(direction) horizontal scrollbar horizontal-tb/rtl"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.h.vlr.ltr"); - scroller.scrollBy(150, 0); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.h.vlr.ltr", { "--block-end": true, "--right": true }); - }, "scroll-state(direction) horizontal scrollbar vertical-lr/ltr"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.h.vlr.rtl"); - scroller.scrollBy(150, 0); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.h.vlr.rtl", { "--block-end": true, "--right": true }); - }, "scroll-state(direction) horizontal scrollbar vertical-lr/rtl"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.h.vrl.ltr"); - scroller.scrollBy(-150, 0); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.h.vrl.ltr", { "--block-end": true, "--left": true }); - }, "scroll-state(direction) horizontal scrollbar vertical-rl/ltr"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.h.vrl.rtl"); - scroller.scrollBy(-150, 0); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.h.vrl.rtl", { "--block-end": true, "--left": true }); - }, "scroll-state(direction) horizontal scrollbar vertical-rl/rtl"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.v.htb.ltr"); - scroller.scrollBy(0, 150); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.v.htb.ltr", { "--block-end": true, "--bottom": true }); - }, "scroll-state(direction) vertical scrollbar horizontal-tb/ltr"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.v.htb.rtl"); - scroller.scrollBy(0, 150); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.v.htb.rtl", { "--block-end": true, "--bottom": true }); - }, "scroll-state(direction) vertical scrollbar horizontal-tb/rtl"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.v.vlr.ltr"); - scroller.scrollBy(0, 150); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.v.vlr.ltr", { "--inline-end": true, "--bottom": true }); - }, "scroll-state(direction) vertical scrollbar vertical-lr/ltr"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.v.vlr.rtl"); - scroller.scrollBy(0, -150); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.v.vlr.rtl", { "--inline-end": true, "--top": true }); - }, "scroll-state(direction) vertical scrollbar vertical-lr/rtl"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.v.vrl.ltr"); - scroller.scrollBy(0, 150); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.v.vrl.ltr", { "--inline-end": true, "--bottom": true }); - }, "scroll-state(direction) vertical scrollbar vertical-rl/ltr"); - - promise_test(async t => { - let scroller = document.querySelector(".direction.v.vrl.rtl"); - scroller.scrollBy(0, -150); - await waitForAnimationFrames(2); - match_scroll_direction(".direction.v.vrl.rtl", { "--inline-end": true, "--top": true }); - }, "scroll-state(direction) vertical scrollbar vertical-rl/rtl"); - -</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-arrow-key-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-arrow-key-scroll.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) arrow key press scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: 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 => { + const ArrowDown = '\uE015'; + scroller.focus(); + await new test_driver.Actions() + .keyDown(ArrowDown) + .keyUp(ArrowDown) + .send(); + await new test_driver.Actions() + .keyDown(ArrowDown) + .keyUp(ArrowDown) + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + + }, "Arrow key press scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-home-end-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-home-end-scroll.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) Home/End keys press scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<script src="/css/css-transitions/support/helper.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-y: scroll; + } + #filler { + height: 600px; + } + #target { + --none: no; + --top: no; + --bottom: no; + @container scroll-state(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: top) { + --top: yes; + } + @container scroll-state(scrolled: bottom) { + --bottom: 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 => { + const end = "\uE010"; + scroller.focus(); + await new test_driver.Actions() + .keyDown(end) + .keyUp(end) + .send(); + await new test_driver.Actions() + .keyDown(end) + .keyUp(end) + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + }, "End key scroll is an absolute scroll"); + + promise_test(async t => { + const home = "\uE011"; + scroller.focus(); + await new test_driver.Actions() + .keyDown(home) + .keyUp(home) + .send(); + await new test_driver.Actions() + .keyDown(home) + .keyUp(home) + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + }, "Home key scroll is an absolute scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-hv.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-hv.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) state is persisted across horizontal and vertical scrolling</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<script src="/css/css-transitions/support/helper.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow: scroll; + } + #filler { + height: 600px; + width: 600px; + } + #target { + --top: no; + --bottom: no; + --left: no; + --right: no; + --none: no; + @container scroll-state(scrolled: top) { + --top: yes; + } + @container scroll-state(scrolled: bottom) { + --bottom: yes; + } + @container scroll-state(scrolled: left) { + --left: yes; + } + @container scroll-state(scrolled: right) { + --right: yes; + } + @container scroll-state(scrolled: none) { + --none: 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 => { + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + }, "Check that scroll-state(scrolled) state before scrolling"); + + promise_test(async t => { + scroller.scrollBy(300, 0); + await waitForAnimationFrames(2); + scroller.scrollBy(0, 100); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "yes"); + assert_equals(scroller.scrollLeft, 300); + assert_equals(scroller.scrollTop, 100); + }, "Check that scroll-state(scrolled) horizontal state is persisted across vertical scroll event"); + + promise_test(async t => { + scroller.scrollBy(0, 100); + await waitForAnimationFrames(2); + scroller.scrollBy(0, -100); + await waitForAnimationFrames(2); + scroller.scrollBy(-200, 0); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 100); + }, "Check that scroll-state(scrolled) vertical state is persisted across horizontal scroll event"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-keyboard-scroll-on-body.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-keyboard-scroll-on-body.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) keyboard scroll on body</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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> +html { + overflow: scroll; +} + +body { + container-type: scroll-state; + overflow-y: scroll; +} + +body { + height: 300px; +} + +div { + height: 1000px; + --y: no; +} + +@container scroll-state(scrolled: y) { + div { + --y: yes; + } +} +</style> +<body> +<div id="target"></div> +</body> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + promise_test(async t => { + await new test_driver.Actions() + .addPointer("TestPointer", "mouse") + .pointerMove(100, 100) + .pointerDown() + .pointerUp() + .send(); + await new test_driver.Actions() + .keyDown('\uE00D') + .keyUp('\uE00D') + .send(); + await new test_driver.Actions() + .keyDown('\uE00D') + .keyUp('\uE00D') + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + + }, "Spacebar scroll on body"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-keyboard-scroll-on-root.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-keyboard-scroll-on-root.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) keyboard scroll on root element</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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> + html { + container-type: scroll-state; + } + + body { + min-height: 200vh; + } + + div { + --y: no; + } + + @container scroll-state(scrolled: y) { + div { + --y: yes; + } + } +</style> +<body> +<div id="target"></div> +</body> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + promise_test(async t => { + await new test_driver.Actions() + .keyDown('\uE00D') + .keyUp('\uE00D') + .send(); + await new test_driver.Actions() + .keyDown('\uE00D') + .keyUp('\uE00D') + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + }, "Spacebar scroll on root"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-mouse-drag-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-mouse-drag-scroll.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) user mouse drag scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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: scroll; + } + #filler { + height: 600px; + width: 600px; + } + #target { + --none: no; + --x: no; + --y: no; + @container scroll-state(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: y) { + --y: yes; + } + @container scroll-state(scrolled: x) { + --x: 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 => { + let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); + + // Skip test on platforms that do not have a visible scrollbar (e.g. + // overlay scrollbar). + const scrollbar_width = scroller.offsetWidth - scroller.clientWidth; + if (scrollbar_width == 0) { + return; + } + assert_equals(scroller.scrollTop, 0); + + // Vertical scrollbar position top right + const start_pos = { + x: 200, + y: 30, + }; + const end_pos = { x: 200, y: 200 }; + + await drag_scrollbar(start_pos, end_pos); + await scrollEndPromise; + await waitForAnimationFrames(2); + + assert_not_equals(scroller.scrollTop, 0); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + }, "Vertical scrollbar drag scroll"); + + promise_test(async t => { + let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); + + // Skip test on platforms that do not have a visible scrollbar (e.g. + // overlay scrollbar). + const scrollbar_height = scroller.offsetHeight - scroller.clientHeight; + if (scrollbar_height == 0) { + return; + } + assert_equals(scroller.scrollLeft, 0); + + // Horizontal scrollbar position bottom left + const start_pos = { + x: 30, + y: 200, + }; + const end_pos = { x: 200, y: 200 }; + + await drag_scrollbar(start_pos, end_pos); + await scrollEndPromise; + await waitForAnimationFrames(2); + + assert_not_equals(scroller.scrollLeft, 0); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); + + }, "Horizontal scrollbar drag scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-multiple-scrollers.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-multiple-scrollers.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) multiple scrollers</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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(scrolled: top) { + --top1: yes; + } + @container scroll-state(scrolled: bottom) { + --bottom1: yes; + } + } + #target2 { + @container scroll-state(scrolled: top) { + --top2: yes; + } + @container scroll-state(scrolled: 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-state-scrolled-programmatic-absolute-scrolls.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-programmatic-absolute-scrolls.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) ignores absolute scrolls</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<script src="/css/css-transitions/support/helper.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-x: scroll; + overflow-y: scroll; + } + #filler { + height: 600px; + width: 600px; + } + #target { + --top: no; + --bottom: no; + --y: no; + --left: no; + --right: no; + --x: no; + --none: no; + @container scroll-state(scrolled: top) { + --top: yes; + } + @container scroll-state(scrolled: bottom) { + --bottom: yes; + } + @container scroll-state(scrolled: y) { + --y: yes; + } + @container scroll-state(scrolled: left) { + --left: yes; + } + @container scroll-state(scrolled: right) { + --right: yes; + } + @container scroll-state(scrolled: x) { + --x: yes; + } + @container scroll-state(scrolled: none) { + --none: 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 => { + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); + }, "Check that scroll-state(scrolled) state before scrolling"); + + promise_test(async t => { + scroller.scrollTop = 300; + scroller.scrollLeft = 300; + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); + assert_equals(scroller.scrollTop, 300); + assert_equals(scroller.scrollLeft, 300); + }, "scrollTop and scrollLeft scrolls should not affect scroll-state(scrolled)"); + + promise_test(async t => { + scroller.scrollTo(0, 100); + scroller.scrollTo(100, 0); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); + }, "scrollTo scrolls should not affect scroll-state(scrolled)"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-programmatic-relative-scrolls.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-programmatic-relative-scrolls.html @@ -0,0 +1,135 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) changed after scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<script src="/css/css-transitions/support/helper.js"></script> +<style> + #scroller { + width: 200px; + height: 200px; + container-type: scroll-state; + overflow-x: scroll; + overflow-y: scroll; + } + #filler { + height: 600px; + width: 600px; + } + #target { + --top: no; + --bottom: no; + --y: no; + --left: no; + --right: no; + --x: no; + --none: no; + @container scroll-state(scrolled: top) { + --top: yes; + } + @container scroll-state(scrolled: bottom) { + --bottom: yes; + } + @container scroll-state(scrolled: y) { + --y: yes; + } + @container scroll-state(scrolled: left) { + --left: yes; + } + @container scroll-state(scrolled: right) { + --right: yes; + } + @container scroll-state(scrolled: x) { + --x: yes; + } + @container scroll-state(scrolled: none) { + --none: 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 => { + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); + }, "Check that scroll-state(scrolled) state before scrolling"); + + promise_test(async t => { + scroller.scrollBy(0, -100); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); + }, "Scrolling up when scrollbar is on the top should not change scroll-state(scrolled)"); + + promise_test(async t => { + scroller.scrollTop = 200; + scroller.scrollBy(0, -100, "instant"); + scroller.scrollTop = 0; + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "no"); + + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); + }, "Relative scroll followed by absolute scroll should change scroll scrolled"); + + promise_test(async t => { + scroller.scrollBy(0, 300); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + assert_equals(scroller.scrollTop, 300); + }, "scroll-state(scrolled) after scrolling bottom"); + + promise_test(async t => { + scroller.scrollBy(0, -200); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + assert_equals(scroller.scrollTop, 100); + }, "scroll-state(scrolled) after scrolling top"); + + promise_test(async t => { + scroller.scrollBy(300, 0); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "yes"); + assert_equals(scroller.scrollLeft, 300); + }, "scroll-state(scrolled) after scrolling right"); + + promise_test(async t => { + scroller.scrollBy(-200, 0); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--left"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--x"), "yes"); + assert_equals(scroller.scrollLeft, 100); + }, "scroll-state(scrolled) after scrolling left"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-pu-pd-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-pu-pd-scroll.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) PageUp/PageDown keys press scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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; + --top: no; + @container scroll-state(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: top) { + --top: 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 => { + const PageUp = '\uE00E'; + const PageDown = '\uE00F'; + scroller.focus(); + await new test_driver.Actions() + .keyDown(PageUp) + .keyUp(PageUp) + .send(); + await new test_driver.Actions() + .keyDown(PageUp) + .keyUp(PageUp) + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); + + }, "PageUp key shouldn't scroll when scroller is already on top"); + + promise_test(async t => { + const PageUp = '\uE00E'; + const PageDown = '\uE00F'; + scroller.scrollTop = 100; + scroller.focus(); + await new test_driver.Actions() + .keyDown(PageUp) + .keyUp(PageUp) + .send(); + await new test_driver.Actions() + .keyDown(PageUp) + .keyUp(PageUp) + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); + + }, "PageUp key scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-scrollbar-button-clicks.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-scrollbar-button-clicks.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) user mouse drag scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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 { + --none: no; + --y: no; + @container scroll-state(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: 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 => { + assert_equals(scroller.scrollTop, 0); + + let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); + + /* Scrollbar down button should be located on bottom right side */ + const track_position = { x: 200, y: 200 }; + await scrollbar_track_click(track_position); + + await scrollEndPromise; + await waitForAnimationFrames(2); + + assert_not_equals(scroller.scrollTop, 0); + 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-state-scrolled-scrollbar-track-clicks.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-scrollbar-track-clicks.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) scrollbar track click scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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 { + --none: no; + --y: no; + @container scroll-state(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: 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 => { + assert_equals(scroller.scrollTop, 0); + + let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); + + /* Scrollbar should be located on top right side */ + const track_position = { x: 200, y: 150 }; + await scrollbar_track_click(track_position); + + await scrollEndPromise; + await waitForAnimationFrames(2); + + assert_not_equals(scroller.scrollTop, 0); + 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-state-scrolled-spacebar-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-spacebar-scroll.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) spacebar click scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: 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 => { + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); + scroller.focus(); + await new test_driver.Actions() + .keyDown('\uE00D') + .keyUp('\uE00D') + .send(); + await new test_driver.Actions() + .keyDown('\uE00D') + .keyUp('\uE00D') + .send(); + await waitForAnimationFrames(2); + assert_equals(getComputedStyle(target).getPropertyValue("--none"), "no"); + assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); + + }, "Spacebar scroll"); + +</script> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-user-touch-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-user-touch-scroll.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) user touch scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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(scrolled: none) { + --none: yes; + } + @container scroll-state(scrolled: 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-state-scrolled-wheel-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-wheel-scroll.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrolled) mouse wheel scroll</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<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(scrolled: 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> diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-wm.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-state-scrolled-wm.html @@ -0,0 +1,150 @@ +<!DOCTYPE html> +<title>@container: scroll-state(scrollable) matching for writing direction</title> +<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> +<script src="/css/css-transitions/support/helper.js"></script> +<style> + .scrolled { + container-type: scroll-state; + width: 100px; + height: 100px; + overflow: scroll; + } + .filler { + height: 600px; + width: 600px; + } + .target { + @container scroll-state(scrolled: block-start) { --block-start: yes } + @container scroll-state(scrolled: block-end) { --block-end: yes } + @container scroll-state(scrolled: inline-start) { --inline-start: yes } + @container scroll-state(scrolled: inline-end) { --inline-end: yes } + @container scroll-state(scrolled: top) { --top: yes } + @container scroll-state(scrolled: left) { --left: yes } + @container scroll-state(scrolled: bottom) { --bottom: yes } + @container scroll-state(scrolled: right) { --right: yes } + } + .ltr { direction: ltr; } + .rtl { direction: rtl; } + .htb { writing-mode: horizontal-tb; } + .vlr { writing-mode: vertical-lr; } + .vrl { writing-mode: vertical-rl; } +</style> +<div class="scrolled h htb ltr"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled h htb rtl"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled h vlr ltr"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled h vlr rtl"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled h vrl ltr"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled h vrl rtl"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled v htb ltr"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled v htb rtl"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled v vlr ltr"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled v vlr rtl"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled v vrl ltr"><div class="filler"><span class="target"></span></div></div> +<div class="scrolled v vrl rtl"><div class="filler"><span class="target"></span></div></div> +<script> + setup(() => assert_implements_scroll_state_container_queries()); + + function match_scroll_scrolled(container_selector, expected_matches) { + let scroller = document.querySelector(container_selector + " .target"); + let style = getComputedStyle(scroller); + for (let custom_prop of [ "--block-start", + "--block-end", + "--inline-start", + "--inline-end", + "--top", + "--left", + "--bottom", + "--right" ]) { + assert_equals(style.getPropertyValue(custom_prop) === "yes", + expected_matches[custom_prop] === true, custom_prop); + } + } + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.h.htb.ltr"); + scroller.scrollBy(150, 0); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.h.htb.ltr", { "--inline-end": true, "--right": true }); + }, "scroll-state(scrolled) horizontal scrollbar horizontal-tb/ltr"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.h.htb.rtl"); + scroller.scrollBy(-150, 0); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.h.htb.rtl", { "--inline-end": true, "--left": true }); + }, "scroll-state(scrolled) horizontal scrollbar horizontal-tb/rtl"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.h.vlr.ltr"); + scroller.scrollBy(150, 0); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.h.vlr.ltr", { "--block-end": true, "--right": true }); + }, "scroll-state(scrolled) horizontal scrollbar vertical-lr/ltr"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.h.vlr.rtl"); + scroller.scrollBy(150, 0); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.h.vlr.rtl", { "--block-end": true, "--right": true }); + }, "scroll-state(scrolled) horizontal scrollbar vertical-lr/rtl"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.h.vrl.ltr"); + scroller.scrollBy(-150, 0); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.h.vrl.ltr", { "--block-end": true, "--left": true }); + }, "scroll-state(scrolled) horizontal scrollbar vertical-rl/ltr"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.h.vrl.rtl"); + scroller.scrollBy(-150, 0); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.h.vrl.rtl", { "--block-end": true, "--left": true }); + }, "scroll-state(scrolled) horizontal scrollbar vertical-rl/rtl"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.v.htb.ltr"); + scroller.scrollBy(0, 150); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.v.htb.ltr", { "--block-end": true, "--bottom": true }); + }, "scroll-state(scrolled) vertical scrollbar horizontal-tb/ltr"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.v.htb.rtl"); + scroller.scrollBy(0, 150); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.v.htb.rtl", { "--block-end": true, "--bottom": true }); + }, "scroll-state(scrolled) vertical scrollbar horizontal-tb/rtl"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.v.vlr.ltr"); + scroller.scrollBy(0, 150); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.v.vlr.ltr", { "--inline-end": true, "--bottom": true }); + }, "scroll-state(scrolled) vertical scrollbar vertical-lr/ltr"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.v.vlr.rtl"); + scroller.scrollBy(0, -150); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.v.vlr.rtl", { "--inline-end": true, "--top": true }); + }, "scroll-state(scrolled) vertical scrollbar vertical-lr/rtl"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.v.vrl.ltr"); + scroller.scrollBy(0, 150); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.v.vrl.ltr", { "--inline-end": true, "--bottom": true }); + }, "scroll-state(scrolled) vertical scrollbar vertical-rl/ltr"); + + promise_test(async t => { + let scroller = document.querySelector(".scrolled.v.vrl.rtl"); + scroller.scrollBy(0, -150); + await waitForAnimationFrames(2); + match_scroll_scrolled(".scrolled.v.vrl.rtl", { "--inline-end": true, "--top": true }); + }, "scroll-state(scrolled) vertical scrollbar vertical-rl/rtl"); + +</script>