[TableFragmentation] Make paint the table-grid fragmentation aware.

As above. This patch computes a stitched table-grid rect for all fragments, and then will pass the stitched rect into the background geometry info. Bug: 1078927 Change-Id: Ie88190f7200abd544fdab8aab98fec54e690334f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3646247 Reviewed-by: Philip Rogers <pdr@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1008379}
web-platform-tests · May 27, 2022 · 622b9a0 · 622b9a0
1 parent e08e12d
commit 622b9a0
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 0 deletions.
diff --git a/css/css-break/table/table-grid-paint-htb-ltr-ref.html b/css/css-break/table/table-grid-paint-htb-ltr-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+.multicol {
+  inline-size: 400px;
+  block-size: 100px;
+  columns: 4;
+  column-fill: auto;
+  gap: 0;
+}
+.pattern {
+  background: repeating-linear-gradient(orange, orange 25px, dodgerblue 25px, dodgerblue 50px);
+}
+</style>
+<div class="multicol">
+  <div style="block-size: 140px; background: lime"></div>
+  <div class="pattern" style="border: solid 10px; block-size: 225px;"></div>
+  <div style="block-size: 15px; background: lime"></div>
+</div>
diff --git a/css/css-break/table/table-grid-paint-htb-ltr.html b/css/css-break/table/table-grid-paint-htb-ltr.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="match" href="table-grid-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 25px, dodgerblue 25px, dodgerblue 50px);
+}
+</style>
+<div class="multicol">
+  <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;">
+    <caption style="block-size: 140px; background: lime"></caption>
+    <tbody><td style="padding: 0; block-size: 225px;"></td></tbody>
+    <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption>
+  </table>
+</div>
diff --git a/css/css-break/table/table-grid-paint-vlr-rtl-ref.html b/css/css-break/table/table-grid-paint-vlr-rtl-ref.html
@@ -0,0 +1,22 @@
+<!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 25px, dodgerblue 25px, dodgerblue 50px);
+}
+</style>
+<div class="multicol">
+  <div style="block-size: 140px; background: lime"></div>
+  <div class="pattern" style="border: solid 10px; block-size: 225px;"></div>
+  <div style="block-size: 15px; background: lime"></div>
+</div>
diff --git a/css/css-break/table/table-grid-paint-vlr-rtl.html b/css/css-break/table/table-grid-paint-vlr-rtl.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="match" href="table-grid-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 25px, dodgerblue 25px, dodgerblue 50px);
+}
+</style>
+<div class="multicol">
+  <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;">
+    <caption style="block-size: 140px; background: lime"></caption>
+    <tbody><td style="padding: 0; block-size: 225px;"></td></tbody>
+    <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption>
+  </table>
+</div>
diff --git a/css/css-break/table/table-grid-paint-vrl-rtl-ref.html b/css/css-break/table/table-grid-paint-vrl-rtl-ref.html
@@ -0,0 +1,22 @@
+<!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 25px, dodgerblue 25px, dodgerblue 50px);
+}
+</style>
+<div class="multicol">
+  <div style="block-size: 140px; background: lime"></div>
+  <div class="pattern" style="border: solid 10px; block-size: 225px;"></div>
+  <div style="block-size: 15px; background: lime"></div>
+</div>
diff --git a/css/css-break/table/table-grid-paint-vrl-rtl.html b/css/css-break/table/table-grid-paint-vrl-rtl.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="match" href="table-grid-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 25px, dodgerblue 25px, dodgerblue 50px);
+}
+</style>
+<div class="multicol">
+  <table class="pattern" style="inline-size: 100%; border-spacing: 0; border: solid 10px;">
+    <caption style="block-size: 140px; background: lime"></caption>
+    <tbody><td style="padding: 0; block-size: 225px;"></td></tbody>
+    <caption style="caption-side: bottom; block-size: 15px; background: lime"></caption>
+  </table>
+</div>