chromium/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.

Expect order to be:
2  -> 4 -> (slot) -> 1 -> 3 -> 5
-->

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