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