Skip to content

Commit 1f4b5b0

Browse files
marco-cmarco-c
committed
Bug 1979335 [wpt PR 53976] - [carousel] Implement new focus behaviour for scroll-marker-group: links, a=testonly
Automatic update from web-platform-tests [carousel] Implement new focus behaviour for scroll-marker-group: links When scroll-marker-group property of a scroller is set to `links`: 1) All ::scroll-marker pseudo-elements are tab stops, in order. 2) Activating a ::scroll-marker pseudo-element scrolls its originating element into view and sets the sequential focus navigation starting point to the originating element losing focus from the ::scroll-marker. Note that since the property is shipped and now we change its behaviour, there are unit tests with a new feature flag disabled to verify that we don't change the old behaviour. New tentative WPT tests are added to test new behaviours as well. The `tabs` mode will be implemented in the following CL. Bug: 425931511 Change-Id: I8d5a78a372881aead4af4223a91607a32f4838c9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6765563 Reviewed-by: Rune Lillesveen <futharkchromium.org> Commit-Queue: Daniil Sakhapov <sakhapovchromium.org> Cr-Commit-Position: refs/heads/main{#1491962} -- wpt-commits: 8f5d77a152ede4700b9cc18e536075a43c31203d wpt-pr: 53976 UltraBlame original commit: 90dcd7a2a8191995eac91d79d582e4eef8abfa96
1 parent 553df81 commit 1f4b5b0

File tree

2 files changed

+126
-0
lines changed

2 files changed

+126
-0
lines changed

‎testing/web-platform/tests/css/css-overflow/scroll-marker-activation-focus-behaviour-links-mode.tentative.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Test: ::scroll-marker loses focus from ::scroll-marker with scroll-marker-group mode set to links</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-activation">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12122#issuecomment-2920507737">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<script src="/resources/testdriver.js"></script>
9+
<script src="/resources/testdriver-actions.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<style>
12+
body {
13+
margin: 0;
14+
}
15+
16+
#scroller {
17+
width: 600px;
18+
height: 300px;
19+
overflow: auto;
20+
scroll-marker-group: before links;
21+
white-space: nowrap;
22+
}
23+
24+
#scroller div {
25+
background: green;
26+
display: inline-block;
27+
width: 600px;
28+
height: 200px;
29+
}
30+
31+
#scroller::scroll-marker-group {
32+
display: flex;
33+
height: 20px;
34+
width: 40px;
35+
}
36+
37+
#scroller div::scroll-marker {
38+
content: "";
39+
width: 100px;
40+
height: 20px;
41+
background-color: green;
42+
display: inline-block;
43+
}
44+
45+
#scroller div::scroll-marker:focus {
46+
background-color: blue;
47+
}
48+
</style>
49+
<div id="scroller">
50+
<div id="target"></div>
51+
<div></div>
52+
</div>
53+
<script>
54+
promise_test(async t => {
55+
actions_promise = new test_driver.Actions()
56+
.pointerMove(35, 15)
57+
.pointerDown()
58+
.pointerUp()
59+
.send();
60+
await actions_promise;
61+
assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "::scroll-marker activation retains focus");
62+
});
63+
</script>

‎testing/web-platform/tests/css/css-overflow/scroll-marker-activation-focus-behaviour-tabs-mode.tentative.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Test: ::scroll-marker retains focus on ::scroll-marker with scroll-marker-group mode set to tabs</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-activation">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12122#issuecomment-2920507737">
6+
<script src="/resources/testharness.js"></script>
7+
<script src="/resources/testharnessreport.js"></script>
8+
<script src="/resources/testdriver.js"></script>
9+
<script src="/resources/testdriver-actions.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<style>
12+
body {
13+
margin: 0;
14+
}
15+
16+
#scroller {
17+
width: 600px;
18+
height: 300px;
19+
overflow: auto;
20+
scroll-marker-group: before tabs;
21+
white-space: nowrap;
22+
}
23+
24+
#scroller div {
25+
background: green;
26+
display: inline-block;
27+
width: 600px;
28+
height: 200px;
29+
}
30+
31+
#scroller::scroll-marker-group {
32+
display: flex;
33+
height: 20px;
34+
width: 40px;
35+
}
36+
37+
#scroller div::scroll-marker {
38+
content: "";
39+
width: 100px;
40+
height: 20px;
41+
background-color: green;
42+
display: inline-block;
43+
}
44+
45+
#scroller div::scroll-marker:focus {
46+
background-color: blue;
47+
}
48+
</style>
49+
<div id="scroller">
50+
<div id="target"></div>
51+
<div></div>
52+
</div>
53+
<script>
54+
promise_test(async t => {
55+
actions_promise = new test_driver.Actions()
56+
.pointerMove(15, 15)
57+
.pointerDown()
58+
.pointerUp()
59+
.send();
60+
await actions_promise;
61+
assert_equals(getComputedStyle(target, "::scroll-marker").backgroundColor, "rgb(0, 0, 255)", "::scroll-marker activation retains focus");
62+
});
63+
</script>

0 commit comments

Comments
 (0)