1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
content / test / data / accessibility / css / reading-flow-display-contents-mixed-siblings.html [blame]
<style>
.wrapper {
display: flex;
reading-flow: flex-visual;
}
</style>
<!---Test reading flow for flex items re-ordered using CSS property order.
If items are in a display: contents element that has reading flow layout parent,
its direct children should also follow reading flow order.
Buttons 1, 3 and container (contents) are children of the reading flow container.
Buttons 2 and 4 are children of (contents), also a reading flow container.
To respect the tree structure, (contents) -> 2 -> 4 must be visited together.
Since 1 is first, button 1 is visited first.
Expect order to be:
1
(contents)
2 4
3
-->
<div class="wrapper">
<div style="display: contents" tabindex="0" role="group">
<button style="order: 3">3</button>
<button style="order: 1">1</button>
<div style="display: contents" tabindex="0" role="group">
<button style="order: 4">4</button>
<button style="order: 2">2</button>
</div>
</div>
</div>
<!-- Copy of the test above, but without tabindex/group. -->
<div class="wrapper">
<div style="display: contents">
<button style="order: 3">3</button>
<button style="order: 1">1</button>
<div style="display: contents">
<button style="order: 4">4</button>
<button style="order: 2">2</button>
</div>
</div>
</div>