[masonry] Make grid-axis rules be blocked by spanners

Record each lane entry's unique placement ID during the existing
`CrossGap` walk. For each `MainGap`, merge the sorted `CrossGap` runs
from its adjacent lanes and compare the entry IDs for every resulting
segment.

We store the blocked ranges using `GapSegmentStateRanges`, the same way
that the other containers do this. Then we reuse the same linear segment
walker during paint to generate intersection offsets.

Some WPT ref files required changes, due to recent resolutions reached
by the CSSWG w3c/csswg-drafts#14153 to reflect
per-lane stacking-axis gutters.

We add more WPT coverage including for rule-break: intersection and
none.

We are explicitly deferring `overlap-join` grid lanes implementation
as a follow up

Bug: 343257585
Change-Id: Ia2d917fb4d1ff109564a50dc60e687797ec9e301
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8261939
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Commit-Queue: Javier Contreras <javiercon@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1682509}

Author: Javier Contreras Tenorio

css/css-gaps/grid-lanes/column-gap-decorations-006-ref.html

@@ -34,7 +34,8 @@
 </div>
 <div class="col-rule" style="left: 89px; top: 66px; height: 106px;"></div>
 <div class="col-rule" style="left: 185px; top: 0; height: 172px;"></div>
-<div class="row-rule" style="top: 59px; left: 0; width: 182px;"></div>
+<div class="row-rule" style="top: 59px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 59px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 117px; left: 0; width: 86px;"></div>
 <div class="row-rule" style="top: 117px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 81px; left: 192px; width: 86px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-007-ref.html

@@ -37,7 +37,8 @@
 </div>
 <div class="col-rule" style="left: 89px; top: 0; height: 110px;"></div>
 <div class="col-rule" style="left: 185px; top: 0; height: 160px;"></div>
-<div class="row-rule" style="top: 113px; left: 0; width: 182px;"></div>
+<div class="row-rule" style="top: 113px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 113px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 43px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 43px; left: 192px; width: 86px;"></div>
-<div class="row-rule" style="top: 113px; left: 192px; width: 86px;"></div>
+<div class="row-rule" style="top: 93px; left: 192px; width: 86px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-014-ref.html

@@ -36,7 +36,9 @@
 <div class="col-rule" style="left: 137px; top: 108px; height: 44px;"></div>
 <div class="col-rule" style="left: 209px; top: 0; height: 206px;"></div>
 <div class="row-rule" style="top: 47px; left: 0; width: 62px;"></div>
-<div class="row-rule" style="top: 47px; left: 72px; width: 134px;"></div>
+<div class="row-rule" style="top: 47px; left: 72px; width: 62px;"></div>
+<div class="row-rule" style="top: 47px; left: 144px; width: 62px;"></div>
 <div class="row-rule" style="top: 101px; left: 72px; width: 62px;"></div>
-<div class="row-rule" style="top: 155px; left: 72px; width: 134px;"></div>
+<div class="row-rule" style="top: 155px; left: 72px; width: 62px;"></div>
+<div class="row-rule" style="top: 155px; left: 144px; width: 62px;"></div>
 <div class="row-rule" style="top: 47px; left: 216px; width: 62px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-017-ref.html

@@ -40,7 +40,8 @@
 </div>
 <div class="col-rule" style="left: 89px; top: 0; height: 110px;"></div>
 <div class="col-rule" style="left: 185px; top: 0; height: 160px;"></div>
-<div class="row-rule" style="top: 113px; left: 0; width: 182px;"></div>
+<div class="row-rule" style="top: 113px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 113px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 43px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 43px; left: 192px; width: 86px;"></div>
-<div class="row-rule" style="top: 113px; left: 192px; width: 86px;"></div>
+<div class="row-rule" style="top: 93px; left: 192px; width: 86px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-018-ref.html

@@ -37,4 +37,5 @@
 <div class="col-rule" style="left: 89px; top: 0; height: 250px;"></div>
 <div class="col-rule" style="left: 185px; top: 100px; height: 150px;"></div>
 <div class="row-rule" style="top: 153px; left: 0; width: 86px;"></div>
-<div class="row-rule" style="top: 93px; left: 96px; width: 182px;"></div>
+<div class="row-rule" style="top: 93px; left: 96px; width: 86px;"></div>
+<div class="row-rule" style="top: 93px; left: 192px; width: 86px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-019-ref.html

@@ -35,5 +35,9 @@
 </div>
 <div class="col-rule" style="left: 89px; top: 0; height: 150px;"></div>
 <div class="col-rule" style="left: 185px; top: 0; height: 150px;"></div>
-<div class="row-rule" style="top: 153px; left: 0; width: 278px;"></div>
-<div class="row-rule" style="top: 263px; left: 0; width: 278px;"></div>
+<div class="row-rule" style="top: 153px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 153px; left: 96px; width: 86px;"></div>
+<div class="row-rule" style="top: 153px; left: 192px; width: 86px;"></div>
+<div class="row-rule" style="top: 263px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 263px; left: 96px; width: 86px;"></div>
+<div class="row-rule" style="top: 263px; left: 192px; width: 86px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-022-ref.html

@@ -40,10 +40,10 @@
   <div class="hi">6</div>
   <div>7</div>
 </div>
-<div class="col-rule" style="left: 89px; top: 0; height: 50px;"></div>
 <div class="col-rule" style="left: 89px; top: 110px; height: 110px;"></div>
 <div class="col-rule" style="left: 185px; top: 0; height: 220px;"></div>
 <div class="row-rule" style="top: 103px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 103px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 173px; left: 96px; width: 86px;"></div>
 <div class="row-rule" style="top: 103px; left: 192px; width: 86px;"></div>
 <div class="row-rule" style="top: 173px; left: 192px; width: 86px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-023-ref.html

@@ -36,5 +36,8 @@
 </div>
 <div class="col-rule" style="left: 89px; top: 50px; height: 90px;"></div>
 <div class="col-rule" style="left: 185px; top: 50px; height: 140px;"></div>
-<div class="row-rule" style="top: 43px; left: 0; width: 278px;"></div>
-<div class="row-rule" style="top: 143px; left: 0; width: 182px;"></div>
+<div class="row-rule" style="top: 43px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 43px; left: 96px; width: 86px;"></div>
+<div class="row-rule" style="top: 43px; left: 192px; width: 86px;"></div>
+<div class="row-rule" style="top: 143px; left: 0; width: 86px;"></div>
+<div class="row-rule" style="top: 143px; left: 96px; width: 86px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-028-ref.html

@@ -37,6 +37,7 @@
 </div>
 <div class="col-rule" style="left: 63px; top: 0; height: 100px;"></div>
 <div class="col-rule" style="left: 133px; top: 0; height: 40px;"></div>
-<div class="col-rule" style="left: 133px; top: 80px; height: 20px;"></div>
-<div class="row-rule" style="top: 43px; left: 70px; width: 130px;"></div>
-<div class="row-rule" style="top: 103px; left: 0; width: 200px;"></div>
+<div class="row-rule" style="top: 43px; left: 140px; width: 60px;"></div>
+<div class="row-rule" style="top: 103px; left: 0; width: 60px;"></div>
+<div class="row-rule" style="top: 103px; left: 70px; width: 60px;"></div>
+<div class="row-rule" style="top: 103px; left: 140px; width: 60px;"></div>

css/css-gaps/grid-lanes/column-gap-decorations-029-ref.html

@@ -36,4 +36,3 @@
 </div>
 <div class="col-rule" style="left: 63px; top: 0; height: 100px;"></div>
 <div class="col-rule" style="left: 133px; top: 0; height: 40px;"></div>
-<div class="col-rule" style="left: 133px; top: 80px; height: 20px;"></div>