[reading-flow] display: contents participate in the flow

From CSSWG resolution [1]:
> display:contents focusable element occurs immediately before its first child in visual order

[1] w3c/csswg-drafts#9230 (comment)

Currently, reading flow items in display: contents are ignored and
display: contents elements are visited last in the focus order.
That means we lose that order information.

We update the algorithm so when we loop reading items and find one that
is not in the focus scope, we traverse its parent to find an ancestor
that is. This element can then be added in the reading flow instead.

We update A11Y to behave the same way as focus navigation. Since the
A11Y tree uses LayoutTreeBuilder, we update the algorithm to loop
through each reading flow item's ancestor until its parent is the
LayoutTreeBuilderTraversal::Parent. This element can then be added in
the reading flow instead.

Change-Id: I1c3c3ab3a6548611af9a2cfddecc9d889b0ecb14
Bug: 371024057
Bug: 40932006
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5924454
Commit-Queue: Di Zhang <[email protected]>
Reviewed-by: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1368523}

shadow-dom/focus-navigation/reading-flow/tentative/grid-order-across-scopes.html

@@ -18,9 +18,9 @@
 }
 </style>
 
-<!-- Since C is a direct reading flow item, it is visited first. -->
-<!-- Since B,A are inside a display: contents, they are visited after. -->
-<div class="test-case" data-expect="C,B,A"
+<!-- Since B,A are inside a display: contents, they are visited together. -->
+<!-- Since B has order 1, its display: contents parent is visited first. -->
+<div class="test-case" data-expect="B,A,C"
       data-description="Grid items in shadow host that is a display contents grid item">
   <div class=wrapper>
     <div style="display: contents">

shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-display-contents.html

@@ -19,8 +19,8 @@
 }
 </style>
 
-<div class="test-case" data-expect="order1,order3,order2,order4"
-     data-description="Items in display contents are sorted in same grid container.">
+<div class="test-case" data-expect="order1,order2,order4,order3"
+      data-description="Items in display contents are sorted in same grid container and are placed in the position where their first child resides.">
   <div class="wrapper">
     <div style="display: contents">
       <button id="order3" style="order: 3">Order 3</button>
@@ -33,8 +33,8 @@
   </div>
 </div>
 
-<div class="test-case" data-expect="div1B,order1B,order3B,div2B,order2B,order4B"
-     data-description="Items in display contents are sorted in same grid container, with focusable display contents divs at the end of the focus sequence.">
+<div class="test-case" data-expect="div1B,order1B,div2B,order2B,order4B,order3B"
+      data-description="Items in display contents are sorted in same grid container and are placed in the position where their first child resides. The display contents have tabindex and should be focusable.">
   <div class="wrapper">
     <div id="div1B" style="display: contents" tabindex="0">
       <button id="order3B" style="order: 3">Order 3</button>
@@ -47,9 +47,9 @@
   </div>
 </div>
 
-<div class="test-case" data-expect="A1,A2,A3,B1,B2,B3,C1,C2,C3,D1,D2,D3"
+<div class="test-case" data-expect="C1,C2,C3,D1,D2,D3,B1,B2,B3,A1,A2,A3"
       data-description="Grid items are in nested display contents containers.">
-  <div class=box>
+  <div class=wrapper>
     <div style="display:contents" tabindex="0" id="A1">
       <div style="display:contents" tabindex="0" id="A2">
         <button style="order: 4" id="A3">A</button>

shadow-dom/focus-navigation/reading-flow/tentative/grid-order-with-slots.html

@@ -55,7 +55,7 @@
 </span>
 <br>
 
-<span id="host3" class="test-case" data-expect="host3/o2,host3/o4,o1,o3,o5"
+<span id="host3" class="test-case" data-expect="o1,o3,o5,host3/o2,host3/o4"
       data-description="Slot is inside a grid container with reading-flow.">
   <template shadowrootmode="open">
     <style>
@@ -77,7 +77,7 @@
 <br>
 
 <span id="host4" class="test-case"
-      data-expect="host4/after,host4/before,b4,a4,d42,d41,d43,c4"
+      data-expect="b4,a4,d42,d41,d43,c4,host4/after,host4/before"
       data-description="Slot is a grid with reading-flow inside a grid container with reading-flow.">
   <template shadowrootmode="open">
     <style>
@@ -120,7 +120,7 @@
 </span>
 <br>
 
-<span id="host6" class="test-case" data-expect="host6/after,host6/before,b6,a6"
+<span id="host6" class="test-case" data-expect="b6,a6,host6/after,host6/before"
       data-description="Slot is a display contents inside a grid container.">
   <template shadowrootmode="open">
     <style>
@@ -140,7 +140,7 @@
 </span>
 <br>
 
-<span id="host7" class="test-case" data-expect="a7,b7,host7/after,host7/before"
+<span id="host7" class="test-case" data-expect="host7/after,a7,b7,host7/before"
       data-description="Slot is a display block inside a grid container.">
   <template shadowrootmode="open">
     <style>
@@ -150,8 +150,8 @@
     }
     </style>
     <div class="wrapper">
-      <button style="order: 4" id="before">Before</button>
-      <slot style="display: block" style="order: 4"></slot>
+      <button style="order: 5" id="before">Before</button>
+      <slot style="display: block; order: 4"></slot>
       <button style="order: 3" id="after">After</button>
     </div>
   </template>