Skip to content

Commit f5a4d62

Browse files
dizhang168chromium-wpt-export-bot
dizhang168
authored and
chromium-wpt-export-bot
committedMar 8, 2025·
[reading-flow] Implement source-order keyword
Per CSSWG resolution [1]: - RESOLVED: Resolution to restore previous reading order property and use it as a starting point for reading order flow. - RESOLVED: as a starting point, define that if the reading order of 2 items is equivalent, reading flow breaks the tie. We add the new keyword source-order as a valid keyword for the reading-flow property. When set on a flex, grid or block layout box, it is recognized as a reading flow container that should follow DOM tree order, but that order can be overwritten by reading-order. We remove the sorting by reading-order in flex/grid algorithms added at: https://chromium-review.googlesource.com/c/chromium/src/+/6244985 Instead, this sorting happens inside the focus controller logic, once a list of reading flow elements are defined. Accessibility tree is not handled yet and will be updated in a separate patch. [1] w3c/csswg-drafts#11208 (comment) Change-Id: I0859f7675651b57bc1329bef8a23e49ed7906436 Bug: 393550130 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6333684 Reviewed-by: Mason Freed <masonf@chromium.org> Commit-Queue: Di Zhang <dizhangg@chromium.org> Cr-Commit-Position: refs/heads/main@{#1429811}
1 parent b8776b9 commit f5a4d62

File tree

7 files changed

+150
-24
lines changed

7 files changed

+150
-24
lines changed
 

‎css/css-display/reading-flow/tentative/reading-flow-computed.html

+1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@
1414
test_computed_value('reading-flow', 'grid-rows');
1515
test_computed_value('reading-flow', 'grid-columns');
1616
test_computed_value('reading-flow', 'grid-order');
17+
test_computed_value('reading-flow', 'source-order');
1718
</script>
1819
</body>

‎css/css-display/reading-flow/tentative/reading-flow-valid.html

+1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@
1313
test_valid_value('reading-flow', 'grid-rows');
1414
test_valid_value('reading-flow', 'grid-columns');
1515
test_valid_value('reading-flow', 'grid-order');
16+
test_valid_value('reading-flow', 'source-order');
1617
</script>
1718
</body>

‎shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-position-absolute.html

+11-7
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,19 @@
1919
}
2020
</style>
2121

22-
<div class="test-case" data-expect="c,b,a1,a2"
23-
data-description="Items in position:absolute container are visited at the end of the focus sequence.">
22+
<div class="test-case" data-expect="f,e,c,d,a,b"
23+
data-description="Items in position:absolute container are visited at the end of the focus sequence. reading-order can override DOM order.">
2424
<div class="wrapper">
25-
<div style="order: 2; position:absolute; left:100px">
26-
<button id="a1">A1</button>
27-
<button id="a2">A2</button>
25+
<div style="order: 2; reading-order: 1; position:absolute; left:100px; top: 50px">
26+
<button id="a">A</button>
27+
<button id="b">B</button>
2828
</div>
29-
<div style="order:3"><button id="b">B</button></div>
30-
<div style="order:1"><button id="c">C</button></div>
29+
<div style="order: 2; position:absolute; left:100px">
30+
<button id="c">C</button>
31+
<button id="d">D</button>
32+
</div>
33+
<div style="order:3"><button id="e">E</button></div>
34+
<div style="order:1"><button id="f">F</button></div>
3135
</div>
3236
</div>
3337

‎shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-position-fixed.html

+11-7
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,19 @@
1919
}
2020
</style>
2121

22-
<div class="test-case" data-expect="c,b,a1,a2"
23-
data-description="Items in position:fixed container are visited at the end of the focus sequence.">
22+
<div class="test-case" data-expect="f,e,c,d,a,b"
23+
data-description="Items in position:fixed container are visited at the end of the focus sequence. reading-order can override DOM order.">
2424
<div class="wrapper">
25-
<div style="order: 2; position:fixed; left:100px">
26-
<button id="a1">A1</button>
27-
<button id="a2">A2</button>
25+
<div style="order: 2; reading-order: 1; position:fixed; left:100px; top: 50px">
26+
<button id="a">A</button>
27+
<button id="b">B</button>
2828
</div>
29-
<div style="order:3"><button id="b">B</button></div>
30-
<div style="order:1"><button id="c">C</button></div>
29+
<div style="order: 2; position:fixed; left:100px">
30+
<button id="c">C</button>
31+
<button id="d">D</button>
32+
</div>
33+
<div style="order:3"><button id="e">E</button></div>
34+
<div style="order:1"><button id="f">F</button></div>
3135
</div>
3236
</div>
3337

‎shadow-dom/focus-navigation/reading-flow/tentative/normal.html

+24-10
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,49 @@
1414

1515
<style>
1616
.wrapper {
17-
display: grid;
1817
reading-flow: normal;
1918
}
19+
.grid {
20+
display: grid;
21+
}
22+
.block {
23+
display: block;
24+
}
2025
</style>
2126

2227
<div class="test-case" data-expect="t1-c,t1-d,t1-g1,t1-h2,t2-e,t2-f,t2-g2,a,b,g,h,h1"
23-
data-description="Grid items with `order` property and tabindex. Focus should be in DOM tabindexed-order.">
24-
<div class="wrapper">
25-
<button id="a" style="order: -1">Item A</button>
26-
<button id="b" style="order: 0">Item B</button>
28+
data-description="Grid items. Focus should be in DOM tabindexed-order.">
29+
<div class="wrapper grid">
30+
<button id="a" tabindex="3" style="order: -1">Item A</button>
31+
<button id="b" tabindex="3" style="order: 0">Item B</button>
2732
<button id="t1-c" tabindex="1" style="order: -1">Item C</button>
2833
</div>
29-
<div class="wrapper">
34+
<div class="wrapper grid">
3035
<button id="t1-d" tabindex="1" style="order: 1">Item D</button>
3136
<button id="t2-e" tabindex="2" style="order: 0">Item E</button>
3237
<button id="t2-f" tabindex="2" style="order: -1">Item F</button>
3338
</div>
34-
<div class="wrapper">
35-
<div id="g" style="order: 2" tabindex="0">G
39+
<div class="wrapper grid">
40+
<div id="g" style="order: 2" tabindex="3">G
3641
<div id="t1-g1" tabindex="1">Item G1</div>
3742
<div id="t2-g2" tabindex="2">Item G2</div>
3843
</div>
39-
<div id="h" style="order: 1" tabindex="0">H
40-
<div id="h1" tabindex="0">Item H1</div>
44+
<div id="h" style="order: 1" tabindex="3">H
45+
<div id="h1" tabindex="3">Item H1</div>
4146
<div id="t1-h2" tabindex="1">Item H2</div>
4247
</div>
4348
</div>
4449
</div>
4550

51+
<div class="test-case" data-expect="t5-c,t6-a,t6-b"
52+
data-description="Block elements. Focus should be in DOM tabindexed-order.">
53+
<div class="wrapper block">
54+
<button id="t6-a" style="order: 1; reading-order: 1" tabindex="6">Item A</button>
55+
<button id="t6-b" style="order: -1; reading-order: -1" tabindex="6">Item B</button>
56+
<button id="t5-c" style="order: 0; reading-order: 0" tabindex="5">Item C</button>
57+
</div>
58+
</div>
59+
4660
<script>
4761
runFocusTestCases();
4862
</script>

‎shadow-dom/focus-navigation/reading-flow/tentative/source-order-invalid.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<meta name="timeout" content="long">
4+
<title>CSS Display: reading-flow with value source-order should not work</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-flow">
6+
<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="/resources/testdriver.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<script src="/resources/testdriver-actions.js"></script>
12+
<script src='../../resources/shadow-dom.js'></script>
13+
<script src="../../resources/focus-utils.js"></script>
14+
15+
<style>
16+
.wrapper {
17+
display: inline;
18+
reading-flow: source-order;
19+
}
20+
</style>
21+
22+
<div class="test-case" data-expect="a,b,c"
23+
data-description="Inline elements. Focus should be in DOM tabindexed-order.">
24+
<div class="wrapper">
25+
<button id="a" style="reading-order: 1">Item A</button>
26+
<button id="b" style="reading-order: -1">Item B</button>
27+
<button id="c" style="reading-order: 0">Item C</button>
28+
</div>
29+
</div>
30+
31+
<script>
32+
runFocusTestCases();
33+
</script>

‎shadow-dom/focus-navigation/reading-flow/tentative/source-order-valid.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<meta name="timeout" content="long">
4+
<title>CSS Display: reading-flow with value source-order should work</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-flow">
6+
<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="/resources/testdriver.js"></script>
10+
<script src="/resources/testdriver-vendor.js"></script>
11+
<script src="/resources/testdriver-actions.js"></script>
12+
<script src='../../resources/shadow-dom.js'></script>
13+
<script src="../../resources/focus-utils.js"></script>
14+
15+
<style>
16+
.wrapper {
17+
reading-flow: source-order;
18+
}
19+
</style>
20+
21+
<div class="test-case" data-expect="b1,c1,a1"
22+
data-description="Block elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.">
23+
<div class="wrapper" style="display: block">
24+
<button id="a1" style="reading-order: 1">Item A</button>
25+
<button id="b1" style="reading-order: -1">Item B</button>
26+
<button id="c1" style="reading-order: 0">Item C</button>
27+
</div>
28+
</div>
29+
30+
<div class="test-case" data-expect="b2,c2,a2"
31+
data-description="Block inline elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.">
32+
<div class="wrapper" style="display: block-inline">
33+
<button id="a2" style="reading-order: 1">Item A</button>
34+
<button id="b2" style="reading-order: -1">Item B</button>
35+
<button id="c2" style="reading-order: 0">Item C</button>
36+
</div>
37+
</div>
38+
39+
<div class="test-case" data-expect="b3,c3,a3"
40+
data-description="Flex elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.">
41+
<div class="wrapper" style="display: flex">
42+
<button id="a3" style="reading-order: 1; order: -1">Item A</button>
43+
<button id="b3" style="reading-order: -1">Item B</button>
44+
<button id="c3" style="reading-order: 0">Item C</button>
45+
</div>
46+
</div>
47+
48+
<div class="test-case" data-expect="b4,c4,a4"
49+
data-description="Grid elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.">
50+
<div class="wrapper" style="display: grid">
51+
<button id="a4" style="reading-order: 1; order: -1">Item A</button>
52+
<button id="b4" style="reading-order: -1">Item B</button>
53+
<button id="c4" style="reading-order: 0">Item C</button>
54+
</div>
55+
</div>
56+
57+
<div class="test-case" data-expect="b5,c5,a5"
58+
data-description="Flow root elements. Focus should be in DOM tabindexed-order, but reading-order takes effect.">
59+
<div class="wrapper" style="display: flow-root">
60+
<button id="a5" style="reading-order: 1">Item A</button>
61+
<button id="b5" style="reading-order: -1">Item B</button>
62+
<button id="c5" style="reading-order: 0">Item C</button>
63+
</div>
64+
</div>
65+
66+
67+
<script>
68+
runFocusTestCases();
69+
</script>

0 commit comments

Comments
 (0)
Please sign in to comment.