commit 3e166c1f78d3abd94cbee8a32573f3c9fbfb1f27 parent b25c08610a930762e10c5df647b602a75b54d1d1 Author: moonira <moonira@google.com> Date: Fri, 3 Oct 2025 09:00:08 +0000 Bug 1989996 [wpt PR 54980] - Move scroll direction tests to external/wpt, a=testonly Automatic update from web-platform-tests Move scroll direction tests to external/wpt This is now specced: https://drafts.csswg.org/css-conditional-5/#direction. Also also updated the help links. Bug: 414556050 Change-Id: I991aafee42b4ad1adc0cd7dbe598d4d38d93ed43 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6958832 Commit-Queue: Munira Tursunova <moonira@google.com> Reviewed-by: David Awogbemila <awogbemila@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1521342} -- wpt-commits: c9a028b28ebd1eba13110761769711d2bb0a1c3a wpt-pr: 54980 Diffstat:
12 files changed, 923 insertions(+), 0 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 @@ -0,0 +1,38 @@ +<!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 @@ -0,0 +1,33 @@ +<!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/scroll-direction-arrow-key-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-arrow-key-scroll.html @@ -0,0 +1,56 @@ +<!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 @@ -0,0 +1,78 @@ +<!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 @@ -0,0 +1,84 @@ +<!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 @@ -0,0 +1,62 @@ +<!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 @@ -0,0 +1,49 @@ +<!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-programmatic-absolute-scrolls.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-programmatic-absolute-scrolls.html @@ -0,0 +1,104 @@ +<!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 @@ -0,0 +1,135 @@ +<!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 @@ -0,0 +1,76 @@ +<!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-spacebar-scroll.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-spacebar-scroll.html @@ -0,0 +1,58 @@ +<!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-wm.html b/testing/web-platform/tests/css/css-conditional/container-queries/scroll-state/scroll-direction-wm.html @@ -0,0 +1,150 @@ +<!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>