chromium/content/test/data/accessibility/css/reading-flow-display-contents-uniform-siblings.html

<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.
In this test, all child siblings are either display: contents or
all not display: contents.

Expect order to be:
1  -> 2 -> 3 -> 4
-->

<div class="wrapper">
  <div style="display: contents" tabindex="0" role="group">
    <div style="display: contents" tabindex="0" role="group">
      <button style="order: 3">3</button>
      <button style="order: 1">1</button>
      <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">
    <div style="display: contents">
      <button style="order: 3">3</button>
      <button style="order: 1">1</button>
      <button style="order: 4">4</button>
      <button style="order: 2">2</button>
    </div>
  </div>
</div>