[TableFragmentation] Paint section/row backgrounds in cells correctly.

This correctly calculates the part-rect when fragmentation is present. We use the OffsetInStitchedFragments to currently get the part size, and offset, and use that to correctly paint the table section/row backgrounds in the cell. There shouldn't be any significant performance delta due to this patch. Bug: 1078927 Change-Id: I05eb09e9221005c4da9404508317c1bf99687cce Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3632829 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1001100}
chromium · May 9, 2022 · 959fa70 · 959fa70
1 parent 2aa0f2f
commit 959fa70
Show file tree

Hide file tree

Showing 14 changed files with 372 additions and 2 deletions.
diff --git a/third_party/blink/renderer/core/paint/ng/ng_table_painters.cc b/third_party/blink/renderer/core/paint/ng/ng_table_painters.cc
@@ -6,6 +6,7 @@
 
 #include "third_party/blink/renderer/core/layout/geometry/writing_mode_converter.h"
 #include "third_party/blink/renderer/core/layout/layout_box.h"
+#include "third_party/blink/renderer/core/layout/ng/ng_fragmentation_utils.h"
 #include "third_party/blink/renderer/core/layout/ng/ng_link.h"
 #include "third_party/blink/renderer/core/layout/ng/ng_physical_box_fragment.h"
 #include "third_party/blink/renderer/core/layout/ng/table/layout_ng_table.h"
@@ -560,14 +561,21 @@ void NGTableSectionPainter::PaintBoxDecorationBackground(
         paint_info, paint_rect, fragment_.Style(), PhysicalBoxSides(),
         !box_decoration_data.ShouldPaintBackground());
   }
+
+  // If we are fragmented - determine the total part size, relative to the
+  // current fragment.
+  PhysicalRect part_rect = paint_rect;
+  if (!fragment_.IsOnlyForNode())
+    part_rect.offset -= OffsetInStitchedFragments(fragment_, &part_rect.size);
+
   for (const NGLink& child : fragment_.Children()) {
     const auto& child_fragment = *child;
     DCHECK(child_fragment.IsBox());
     if (!child_fragment.IsTableNGRow())
       continue;
     NGTableRowPainter(To<NGPhysicalBoxFragment>(child_fragment))
         .PaintTablePartBackgroundIntoCells(
-            paint_info, *To<LayoutBox>(fragment_.GetLayoutObject()), paint_rect,
+            paint_info, *To<LayoutBox>(fragment_.GetLayoutObject()), part_rect,
             paint_rect.offset + child.offset);
   }
   if (box_decoration_data.ShouldPaintShadow()) {
@@ -601,9 +609,15 @@ void NGTableRowPainter::PaintBoxDecorationBackground(
         !box_decoration_data.ShouldPaintBackground());
   }
 
+  // If we are fragmented - determine the total part size, relative to the
+  // current fragment.
+  PhysicalRect part_rect = paint_rect;
+  if (!fragment_.IsOnlyForNode())
+    part_rect.offset -= OffsetInStitchedFragments(fragment_, &part_rect.size);
+
   PaintTablePartBackgroundIntoCells(paint_info,
                                     *To<LayoutBox>(fragment_.GetLayoutObject()),
-                                    paint_rect, paint_rect.offset);
+                                    part_rect, paint_rect.offset);
   if (box_decoration_data.ShouldPaintShadow()) {
     BoxPainterBase::PaintInsetBoxShadowWithInnerRect(paint_info, paint_rect,
                                                      fragment_.Style());

diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
@@ -1582,6 +1582,9 @@ virtual/layout_ng_table_frag/external/wpt/css/css-break/table/break-before-table
 virtual/layout_ng_table_frag/external/wpt/css/css-break/table/break-before-table-cell-child.html [ Pass ]
 virtual/layout_ng_table_frag/external/wpt/css/css-break/table/table-cell-expansion-003.html [ Pass ]
 virtual/layout_ng_table_frag/external/wpt/css/css-break/table/table-col-paint-htb-ltr.html [ Pass ]
+virtual/layout_ng_table_frag/external/wpt/css/css-break/table/table-row-paint-vlr-rtl.html [ Pass ]
+virtual/layout_ng_table_frag/external/wpt/css/css-break/table/table-row-paint-vrl-rtl.html [ Pass ]
+virtual/layout_ng_table_frag/external/wpt/css/css-break/table/table-section-paint-vrl-rtl.html [ Pass ]
 
 ### Tests failing with LayoutNGTableFragmentation enabled:
 crbug.com/1295905 [ Mac11-arm64 ] virtual/layout_ng_table_frag/external/wpt/css/css-break/table/sections-and-captions-mixed-order.html [ Failure ]
@@ -3888,6 +3891,9 @@ crbug.com/1078927 external/wpt/css/css-break/table/break-before-table-cell.html
 crbug.com/1078927 external/wpt/css/css-break/table/break-before-table-cell-child.html [ Failure ]
 crbug.com/1078927 external/wpt/css/css-break/table/table-cell-expansion-003.html [ Failure ]
 crbug.com/1078927 external/wpt/css/css-break/table/table-col-paint-htb-ltr.html [ Failure ]
+crbug.com/1078927 external/wpt/css/css-break/table/table-row-paint-vlr-rtl.html [ Failure ]
+crbug.com/1078927 external/wpt/css/css-break/table/table-row-paint-vrl-rtl.html [ Failure ]
+crbug.com/1078927 external/wpt/css/css-break/table/table-section-paint-vrl-rtl.html [ Failure ]
 crbug.com/1058792 external/wpt/css/css-break/transform-007.html [ Failure ]
 crbug.com/1224888 external/wpt/css/css-break/transform-009.html [ Failure ]
 crbug.com/1156312 external/wpt/css/css-break/widows-orphans-017.html [ Failure ]

diff --git a/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-htb-ltr-ref.html b/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-htb-ltr-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <div style="position: relative; inline-size: 100%; block-size: 400px;">
+    <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div>
+    <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div>
+    <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div>
+  </div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-htb-ltr.html b/third_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-htb-ltr.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel="match" href="table-row-paint-htb-ltr-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering">
+<style>
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <table style="border-spacing: 10px; inline-size: 100%;">
+    <caption style="background: red; block-size: 50px;"></caption>
+    <tr class="pattern" style="block-size: 110px;">
+      <td></td>
+      <td></td>
+    </tr>
+    <tr class="pattern" style="block-size: 135px;">
+      <td></td>
+      <td></td>
+    </tr>
+    <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption>
+  </table>
+</div>
diff --git a/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vlr-rtl-ref.html b/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vlr-rtl-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+body {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <div style="position: relative; inline-size: 100%; block-size: 400px;">
+    <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div>
+    <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div>
+    <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div>
+  </div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vlr-rtl.html b/third_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vlr-rtl.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="match" href="table-row-paint-vlr-rtl-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering">
+<style>
+body {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <table style="border-spacing: 10px; inline-size: 100%;">
+    <caption style="background: red; block-size: 50px;"></caption>
+    <tr class="pattern" style="block-size: 110px;">
+      <td></td>
+      <td></td>
+    </tr>
+    <tr class="pattern" style="block-size: 135px;">
+      <td></td>
+      <td></td>
+    </tr>
+    <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption>
+  </table>
+</div>
diff --git a/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vrl-rtl-ref.html b/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vrl-rtl-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+body {
+  writing-mode: vertical-rl;
+  direction: rtl;
+}
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <div style="position: relative; inline-size: 100%; block-size: 400px;">
+    <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 110px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 180px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 135px;"></div>
+    <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div>
+    <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div>
+  </div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vrl-rtl.html b/third_party/blink/web_tests/external/wpt/css/css-break/table/table-row-paint-vrl-rtl.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="match" href="table-row-paint-vrl-rtl-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering">
+<style>
+body {
+  writing-mode: vertical-rl;
+  direction: rtl;
+}
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <table style="border-spacing: 10px; inline-size: 100%;">
+    <caption style="background: red; block-size: 50px;"></caption>
+    <tr class="pattern" style="block-size: 110px;">
+      <td></td>
+      <td></td>
+    </tr>
+    <tr class="pattern" style="block-size: 135px;">
+      <td></td>
+      <td></td>
+    </tr>
+    <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption>
+  </table>
+</div>
diff --git a/...rty/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-htb-ltr-ref.html b/...rty/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-htb-ltr-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <div style="position: relative; inline-size: 100%; block-size: 400px;">
+    <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div>
+    <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div>
+    <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div>
+    <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div>
+  </div>
+</div>
diff --git a/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-htb-ltr.html b/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-htb-ltr.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="match" href="table-section-paint-htb-ltr-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering">
+<style>
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <table style="border-spacing: 10px; inline-size: 100%;">
+    <caption style="background: red; block-size: 50px;"></caption>
+    <tbody class="pattern">
+      <tr style="block-size: 110px;">
+        <td></td>
+        <td></td>
+      </tr>
+      <tr style="block-size: 135px;">
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+    <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption>
+  </table>
+</div>
diff --git a/...rty/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-vlr-rtl-ref.html b/...rty/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-vlr-rtl-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+body {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <div style="position: relative; inline-size: 100%; block-size: 400px;">
+    <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div>
+    <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div>
+    <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div>
+    <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div>
+  </div>
+</div>
diff --git a/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-vlr-rtl.html b/...d_party/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-vlr-rtl.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="match" href="table-section-paint-vlr-rtl-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#fragmentation">
+<link rel="help" href="https://drafts.csswg.org/css-tables-3/#rendering">
+<style>
+body {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(to right, orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <table style="border-spacing: 10px; inline-size: 100%;">
+    <caption style="background: red; block-size: 50px;"></caption>
+    <tbody class="pattern">
+      <tr style="block-size: 110px;">
+        <td></td>
+        <td></td>
+      </tr>
+      <tr style="block-size: 135px;">
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+    <caption style="caption-side: bottom; background: red; block-size: 75px;"></caption>
+  </table>
+</div>
diff --git a/...rty/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-vrl-rtl-ref.html b/...rty/blink/web_tests/external/wpt/css/css-break/table/table-section-paint-vrl-rtl-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+body {
+  writing-mode: vertical-rl;
+  direction: rtl;
+}
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(to left, orange, orange 30px, dodgerblue 30px, dodgerblue 60px);
+}
+</style>
+<div class="multicol">
+  <div style="position: relative; inline-size: 100%; block-size: 400px;">
+    <div style="position: absolute; inset-block-start: 0; inline-size: 100%; background: red; block-size: 50px;"></div>
+    <div class="pattern" style="position: absolute; inset-block-start: 60px; inset-inline-start: 10px; inline-size: calc(100% - 20px); block-size: 255px;"></div>
+    <div style="position: absolute; inset-block-start: 170px; inline-size: 100%; block-size: 10px; background: white;"></div>
+    <div style="position: absolute; inset-block-start: 60px; inset-inline-start: 45px; inline-size: 10px; block-size: 255px; background: white;"></div>
+    <div style="position: absolute; inset-block-end: 0; inline-size: 100%; background: red; block-size: 75px;"></div>
+  </div>
+</div>