[Gap Decorations]: Major paint logic for Optimized GapGeometry

This CL implements the core paint logic for the optimized approach to
gap geometry. The main changes are in the "population" methods in
`gap_geometry.h` and the addition of the new `GapPainter` class in
`gap_painter.h`.

Gap decorations are painted relative to intersections within a gap, as a
result this change generates these intersection points at paint time
rather than storing precomputed intersections from layout. The general
principle for generating intersection points is:

content-start → intersections between main × cross gaps → content-end

However, the way we compute the middle intersections depends on the
container type. For flex cross gaps, there are only two intersections
(start and end), so the pattern doesn’t fully apply. This distinction
requires calculating the end offset for flex cross gaps dynamically.

The code is exercised through existing web tests in the
virtual/css-gap-decorations-optimized/external/wpt/css/css-gaps/ folder
as all changes are behind the CSSGapDecorationOptimized feature flag.

Note: This CL does not yet handle rule-break behavior as a result tests
that are exercising that logic are marked as failing in this CL.
Currently, decorations are painted from the start to the end of a gap
without interruption. Rule-break handling will be addressed in an
upcoming change.

Other changes made in this CL are:
* For flex:
- Previously, ContentStart and ContentEnd offsets were not set when a flex line contained only a single item. This has been corrected.
- The offset for the main gap no longer needs to be adjusted based on flex direction. It now consistently represents the position where the flex line ends plus the gap. (Relevant test updated accordingly.)
* For `MainGap` and `CrossGapRange`:
- Introduced getters and setters for `CrossGapRange`, improving ease of use during paint time.
* For grid tests:
- Updated test references to use standard div elements instead of relying on column rules from multi-column layout.

Bug: 436140061, 357648037
Change-Id: I0a0eadbad7f4911a98ae22060327ef1acc526ab3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6848348
Reviewed-by: Alison Maher <[email protected]>
Commit-Queue: Sam Davis Omekara <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1511107}

Author: Sam Davis Omekara Jr

css/css-gaps/grid/grid-gap-decorations-003-ref.html

@@ -7,28 +7,37 @@
   }
 
   .container {
-    width: 110px;
     height: 110px;
-    column-count: 2;
+    width: 110px;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+
     column-gap: 10px;
-    column-rule-color: pink;
-    column-rule-style: dotted;
-    column-rule-width: 10px;
-    overflow: hidden;
-    position: relative;
+    row-gap: 10px;
   }
 
+
   .item {
     background: skyblue;
     height: 50px;
     width: 100%;
     margin: 0;
   }
 
-  /* For 2x2 grid-like layout, add a 10px bottom margin to
-    odd children(#1 & #3) to simulate a horizontal row gap.*/
-  .item:nth-child(odd) {
-    margin-bottom: 10px;
+  .col-rule {
+    margin: 0px;
+    padding: 0px;
+    width: 0px;
+
+
+    height: 110px;
+    border-right: 10px dotted;
+    border-color: pink;
+    position: absolute;
+    left: 50px;
+    top: 0px;
+
   }
 
   .row-rule {
@@ -42,13 +51,12 @@
     position: absolute;
     top: 50px;
   }
-
 </style>
 <div class="container">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
 </div>
-<div class="row-rule">
-</div>
+<div class="col-rule"></div>
+<div class="row-rule"></div>

css/css-gaps/grid/grid-gap-decorations-004-ref.html

@@ -6,51 +6,54 @@
     margin: 0px;
   }
 
-  .container {
-    width: 108px;
+  .grid-container {
     height: 108px;
-    background: green;
-
-    column-count: 2;
+    width: 108px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
     column-gap: 12px;
+    row-gap: 12px;
+    background-color: green;
 
-    column-rule-color: pink;
-    column-rule-style: double;
-    column-rule-width: 12px;
-
-    overflow: hidden;
   }
 
-  .item {
+  .grid-item {
     background: skyblue;
-    height: 48px;
-    width: 100%;
-    margin: 0;
   }
 
-  /* For 2x2 grid-like layout, add a 10px bottom margin to
-    odd children(#1 & #3) to simulate a horizontal row gap.*/
-  .item:nth-child(odd) {
-    margin-bottom: 12px;
+  .col-rule {
+    margin: 0px;
+    padding: 0px;
+    width: 0px;
+
+
+    height: 108px;
+    border-right: 12px double;
+    border-color: pink;
+    position: absolute;
+    left: 48px;
+    top: 0px;
+
   }
 
-  .row-gap {
+  .row-rule {
     margin: 0px;
     padding: 0px;
-    height: 4px;
-    background: pink;
+    height: 0px;
+
     width: 108px;
+    border-bottom: 12px double;
+    border-color: pink;
     position: absolute;
+    top: 48px;
   }
-
 </style>
-<div class="container">
-  <div class="item"></div>
-  <div class="item"></div>
-  <div class="item"></div>
-  <div class="item"></div>
+<div class="grid-container">
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
+  <div class="grid-item"></div>
 </div>
 
-<!-- Two horizontal bars to simulate row gaps with style double -->
-<div id="horizontal1" class="row-gap" style="top: 48px;"></div>
-<div id="horizontal2" class="row-gap" style="top: 56px;"></div>
+<div class="row-rule"> </div>
+<div class="col-rule"> </div>

css/css-gaps/grid/grid-gap-decorations-005-ref.html

@@ -1,62 +1,53 @@
+
 <!DOCTYPE html>
 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:[email protected]">
 <style>
   body {
     margin: 0px;
   }
-
   .container {
-    width: 110px;
     height: 110px;
-    background: green;
-
-    column-count: 2;
+    width: 110px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
     column-gap: 10px;
-
-    column-rule-color: pink;
-    column-rule-style: double;
-    column-rule-width: 5px;
-
-    overflow: hidden;
+    row-gap: 10px;
+    background: green;
   }
-
   .item {
     background: skyblue;
     height: 50px;
     width: 100%;
     margin: 0;
   }
-
-  .double {
+  .col-rule {
+    margin: 0px;
+    padding: 0px;
+    width: 0px;
+    height: 110px;
+    border-right: 5px double;
+    border-color: pink;
+    position: absolute;
+    left: 52.5px;
+    top: 0px;
+  }
+  .row-rule {
     margin: 0px;
     padding: 0px;
     height: 0px;
-
     width: 110px;
     border-bottom: 5px double;
     border-color: pink;
     position: absolute;
-    /*
-      The top position of the double border is set to 52.5px
-      to account for 10px gap and 5px height of the double border,
-      in order to center it in the gap.
-    */
     top: 52.5px;
   }
-
-  /* For 2x2 grid-like layout, add a 10px bottom margin to
-    odd children(#1 & #3) to simulate a horizontal row gap.*/
-  .item:nth-child(odd) {
-    margin-bottom: 10px;
-  }
 </style>
 <div class="container">
-    <div class="item"></div>
-    <div class="item"></div>
-    <div class="item"></div>
-    <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
+  <div class="item"></div>
 </div>
-
-<div class="double">
-</div>
+<div class="col-rule"></div>
+<div class="row-rule"></div>