content/test/data/accessibility/css/reading-flow-shadow-dom-slot.html

<!---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>