Skip to content

Commit 43ae6cd

Browse files
dizhang168chromium-wpt-export-bot
dizhang168
authored and
chromium-wpt-export-bot
committed
[reading-order-items] Reading Order Container is a Focus Scope Owner
Add flex or grid container using reading-order-items as a focus scope. We update logic in FocusNavigation so we can focus navigate to/from a reading order item. This CL implements the CSS rule `reading-order-items: grid-order` for forward navigation. The feature is guarded behind the flag CSSReadingOrderItemsEnabled. Change-Id: Ic673d894927931a10f7c74d86e19eff5fdbd2024 Bug: 40932006 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5431133 Commit-Queue: Di Zhang <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1291373}
1 parent 8fbd359 commit 43ae6cd

File tree

7 files changed

+480
-0
lines changed

7 files changed

+480
-0
lines changed

‎shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Display: reading-order-items with value grid-order on shadow host</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
5+
<link rel="author" title="Di Zhang" href="mailto:[email protected]">
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-vendor.js"></script>
10+
<script src="/resources/testdriver-actions.js"></script>
11+
<script src='../../resources/shadow-dom.js'></script>
12+
<script src="../../resources/focus-utils.js"></script>
13+
14+
<style>
15+
.wrapper {
16+
display: grid;
17+
reading-order-items: grid-order;
18+
}
19+
</style>
20+
21+
<div class="test-case" data-expect="root/B,root/A"
22+
data-description="Grid items in shadow host with delegatesFocus">
23+
<div id="root" class="wrapper" tabindex="0">
24+
<template shadowrootmode="open" shadowrootdelegatesfocus>
25+
<button id="A" style="order: 2">A</button>
26+
<button id="B" style="order: 1">B</button>
27+
</template>
28+
</div>
29+
</div>
30+
31+
<div class="test-case" data-expect="root2,root2/B,root2/A"
32+
data-description="Grid items in shadow host without delegatesFocus">
33+
<div id="root2" class="wrapper" tabindex="0">
34+
<template shadowrootmode="open">
35+
<button id="A" style="order: 2">A</button>
36+
<button id="B" style="order: 1">B</button>
37+
</template>
38+
</div>
39+
</div>
40+
41+
<script>
42+
runFocusTestCases();
43+
</script>

‎shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Display: reading-order-items with value grid-order on iframe</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
5+
<link rel="author" title="Di Zhang" href="mailto:[email protected]">
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-vendor.js"></script>
10+
<script src="/resources/testdriver-actions.js"></script>
11+
<script src='../../resources/shadow-dom.js'></script>
12+
<script src="../../resources/focus-utils.js"></script>
13+
14+
<style>
15+
.wrapper {
16+
display: grid;
17+
reading-order-items: grid-order;
18+
}
19+
</style>
20+
21+
<div class="test-case" data-expect="start,frame2/B,frame1/A,end"
22+
data-description="Grid items are iframes.">
23+
<button id="start">Item Start</button>
24+
<div class="wrapper">
25+
<iframe id="frame1" style="order: 2" srcdoc="<button id=A>A</button>"></iframe>
26+
<iframe id="frame2" style="order: 1" srcdoc="<button id=B>B</button>"></iframe>
27+
</div>
28+
<button id="end">Item End</button>
29+
</div>
30+
31+
<script>
32+
window.onload = runFocusTestCases;
33+
</script>

‎shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Display: reading-order-items with value grid-order in nested grids</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
5+
<link rel="author" title="Di Zhang" href="mailto:[email protected]">
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-vendor.js"></script>
10+
<script src="/resources/testdriver-actions.js"></script>
11+
<script src='../../resources/shadow-dom.js'></script>
12+
<script src="../../resources/focus-utils.js"></script>
13+
14+
<style>
15+
.box {
16+
display: grid;
17+
reading-order-items: grid-order;
18+
border-radius: 5px;
19+
padding: 20px;
20+
border-style: dashed;
21+
}
22+
23+
</style>
24+
25+
<div class="test-case" data-expect="w,d3,b3a,b3b,d2,b2,d1,b1a,b1b"
26+
data-description="Grid items are not grid containers.">
27+
<div class="box" id="w" tabindex="0">
28+
<div style="order: 2" id="d1" tabindex="0">Div 1
29+
<button id="b1a" style="order: 3">Button 1A</button>
30+
<button id="b1b">Button 1B</button>
31+
</div>
32+
<div id="d2" tabindex="0">Div 2
33+
<button id="b2">Button 2</button>
34+
</div>
35+
<div id="d3" style="order: -1" tabindex="0">Div 3
36+
<button id="b3a" style="order: 2">Button 3A</button>
37+
<button id="b3b">Button 3B</button>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div class="test-case"
43+
data-expect="wrapper,div3,button3b,button3a,div2,button2,div1,button1b,button1a"
44+
data-description="Grid items are grid containers.">
45+
<div class="box" id="wrapper" tabindex="0">
46+
<div class="box" style="order: 2" id="div1" tabindex="0">Div 1
47+
<button id="button1a" style="order: 3">Button 1A</button>
48+
<button id="button1b">Button 1B</button>
49+
</div>
50+
<div class="box" id="div2" tabindex="0">Div 2
51+
<button id="button2">Button 2</button>
52+
</div>
53+
<div class="box" id="div3" style="order: -1" tabindex="0">Div 3
54+
<button id="button3a" style="order: 2">Button 3A</button>
55+
<button id="button3b">Button 3B</button>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<div class="test-case" data-expect="a,b,d,c"
61+
data-description="Only has grid containers.">
62+
<div class="box" id="a" tabindex="0">A
63+
<div class="box" id="b" tabindex="0">B
64+
<div class="box" id="c" tabindex="0" style="order: 2">C</div>
65+
<div class="box" id="d" tabindex="0">D</div>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<script>
71+
runFocusTestCases();
72+
</script>

‎shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Display: reading-order-items with value grid-order</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
5+
<link rel="author" title="Di Zhang" href="mailto:[email protected]">
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-vendor.js"></script>
10+
<script src="/resources/testdriver-actions.js"></script>
11+
<script src='../../resources/shadow-dom.js'></script>
12+
<script src="../../resources/focus-utils.js"></script>
13+
14+
<style>
15+
.wrapper {
16+
display: grid;
17+
reading-order-items: grid-order;
18+
}
19+
.popover {
20+
inset:auto;
21+
top:200px;
22+
left:200px;
23+
}
24+
</style>
25+
26+
<div class="wrapper">
27+
<button id=a style="order: 4">A</button>
28+
<button id=invoker style="order: 2" popovertarget=P>Invoker</button>
29+
<button id=c style="order: 1">C</button>
30+
</div>
31+
<div popover id=P class="popover">
32+
<button id=b1 style="order: 3">Popover button B1</button>
33+
<button id=b2 style="order: 1">Popover button B2</button>
34+
<button id=b3 style="order: 2">Popover button B3</button>
35+
</div>
36+
37+
<script>
38+
document.querySelector('[popovertarget]').click();
39+
40+
promise_test(async () => {
41+
let elements = [
42+
'c',
43+
'invoker',
44+
'b1',
45+
'b2',
46+
'b3',
47+
'a',
48+
];
49+
await assert_focus_navigation_forward(elements);
50+
}, `Popover in reading-order-items: grid-order container.`);
51+
52+
promise_test(async () => {
53+
P.classList.add("wrapper");
54+
let elements = [
55+
'c',
56+
'invoker',
57+
'b2',
58+
'b3',
59+
'b1',
60+
'a',
61+
];
62+
await assert_focus_navigation_forward(elements);
63+
}, `Popover in container and itself with reading-order-items: grid-order.`);
64+
</script>

‎shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Display: reading-order-items with value grid-order in Shadow DOM</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items">
5+
<link rel="author" title="Di Zhang" href="mailto:[email protected]">
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-vendor.js"></script>
10+
<script src="/resources/testdriver-actions.js"></script>
11+
<script src='../../resources/shadow-dom.js'></script>
12+
<script src="../../resources/focus-utils.js"></script>
13+
14+
<style>
15+
.wrapper {
16+
display: grid;
17+
reading-order-items: grid-order;
18+
}
19+
</style>
20+
21+
<span id="root1" class="test-case" data-expect="b1,a1,c1"
22+
data-description="Slot assigned element is a grid with reading-order-items.">
23+
<template shadowrootmode="open">
24+
<style>
25+
.wrapper {
26+
display: grid;
27+
reading-order-items: grid-order;
28+
}
29+
</style>
30+
<slot></slot>
31+
</template>
32+
<div class="wrapper">
33+
<button style="order: 2" id="a1">Item A</button>
34+
<button style="order: 1" id="b1">Item B</button>
35+
<button style="order: 3" id="c1">Item C</button>
36+
</div>
37+
</span>
38+
<br>
39+
40+
<span id="root2" class="test-case" data-expect="b2,a2,c2"
41+
data-description="Slot is a grid with reading-order-items.">
42+
<template shadowrootmode="open">
43+
<style>
44+
.wrapper {
45+
display: grid;
46+
reading-order-items: grid-order;
47+
}
48+
</style>
49+
<slot class="wrapper"></slot>
50+
</template>
51+
<button style="order: 2" id="a2">Item A</button>
52+
<button style="order: 1" id="b2">Item B</button>
53+
<button style="order: 3" id="c2">Item C</button>
54+
</span>
55+
<br>
56+
57+
<span id="root3" class="test-case" data-expect="root3/o2,root3/o4,o1,o3,o5"
58+
data-description="Slot is inside a grid container with reading-order-items.">
59+
<template shadowrootmode="open">
60+
<style>
61+
.wrapper {
62+
display: grid;
63+
reading-order-items: grid-order;
64+
}
65+
</style>
66+
<div class="wrapper">
67+
<button style="order: 4" id="o4">Order 4</button>
68+
<slot style="order: 10"></slot>
69+
<button style="order: 2" id="o2">Order 2</button>
70+
</div>
71+
</template>
72+
<button style="order: 5" id="o5">Order 5</button>
73+
<button style="order: 1" id="o1">Order 1</button>
74+
<button style="order: 3" id="o3">Order 3</button>
75+
</span>
76+
<br>
77+
78+
<span id="root4" class="test-case"
79+
data-expect="root4/after,root4/before,b4,a4,d42,d41,d43,c4"
80+
data-description="Slot is a grid with reading-order-items inside a grid container with reading-order-items.">
81+
<template shadowrootmode="open">
82+
<style>
83+
.wrapper {
84+
display: grid;
85+
reading-order-items: grid-order;
86+
}
87+
</style>
88+
<div class="wrapper">
89+
<button style="order: 4" id="before">Before</button>
90+
<slot style="order: 10"></slot>
91+
<button style="order: 2" id="after">After</button>
92+
</div>
93+
</template>
94+
<button style="order: 3" id="a4">Item A</button>
95+
<button style="order: 1" id="b4">Item B</button>
96+
<button style="order: 6" id="c4">Item C</button>
97+
<div style="order: 5" class="wrapper">
98+
<button style="order: 2" id="d41">Item D1</button>
99+
<button style="order: 1" id="d42">Item D2</button>
100+
<button style="order: 3" id="d43">Item D3</button>
101+
</div>
102+
</span>
103+
<br>
104+
105+
<span id="root5" class="test-case" data-expect="b51,a51,c51,b52,a52,c52"
106+
data-description="Slot is not inside a shadow root.">
107+
<div class="wrapper">
108+
<slot name=slot1>
109+
<button style="order: 2" id="a51">Item A</button>
110+
<button style="order: 1" id="b51">Item B</button>
111+
<button style="order: 3" id="c51">Item C</button>
112+
</slot>
113+
</div>
114+
<slot class="wrapper" name=slot2>
115+
<button style="order: 2" id="a52">Item A</button>
116+
<button style="order: 1" id="b52">Item B</button>
117+
<button style="order: 3" id="c52">Item C</button>
118+
</slot>
119+
</span>
120+
<br>
121+
122+
<span id="root6" class="test-case" data-expect="root6/after,root6/before,b6,a6"
123+
data-description="Slot is a display contents inside a grid container.">
124+
<template shadowrootmode="open">
125+
<style>
126+
.wrapper {
127+
display: grid;
128+
reading-order-items: grid-order;
129+
}
130+
</style>
131+
<div class="wrapper">
132+
<button style="order: 4" id="before">Before</button>
133+
<slot style="display: contents" style="order: 4"></slot>
134+
<button style="order: 3" id="after">After</button>
135+
</div>
136+
</template>
137+
<button id="a6" style="order: 7">A</button>
138+
<button id="b6" style="order: 2">B</button>
139+
</span>
140+
<br>
141+
142+
<span id="root7" class="test-case" data-expect="a7,b7,root7/after,root7/before"
143+
data-description="Slot is a display block inside a grid container.">
144+
<template shadowrootmode="open">
145+
<style>
146+
.wrapper {
147+
display: grid;
148+
reading-order-items: grid-order;
149+
}
150+
</style>
151+
<div class="wrapper">
152+
<button style="order: 4" id="before">Before</button>
153+
<slot style="display: block" style="order: 4"></slot>
154+
<button style="order: 3" id="after">After</button>
155+
</div>
156+
</template>
157+
<button id="a7" style="order: 7">A</button>
158+
<button id="b7" style="order: 2">B</button>
159+
</span>
160+
<br>
161+
162+
<script>
163+
runFocusTestCases();
164+
</script>

0 commit comments

Comments
 (0)