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
content / test / data / accessibility / css / reading-flow-shadow-dom-slot.html [blame]
<!---Test reading flow for flex items re-ordered using CSS property order.
Items are inside a reading flow container. The slot inherits layout from
container and its slotted content should follow reading flow.
Buttons 1, 3 and 5 are slotted to follow a reading flow.
To respect the tree structure, (slot) -> 1 -> 3 -> 5 must be visited together.
Since 1 is first, (slot) is visited first.
Expect order to be:
(slot)
1 3 5
2
4
-->
<div>
<template shadowrootmode="open">
<style>
.wrapper {
display: flex;
reading-flow: flex-visual;
}
</style>
<div class="wrapper">
<button style="order: 4">4</button>
<slot style="order: 3"></slot>
<button style="order: 2">2</button>
</div>
</template>
<button style="order: 5">5</button>
<button style="order: 1">1</button>
<button style="order: 3">3</button>
</div>