Initial work on fragmenting NG tables.
This introduces the general block fragmentation mechanisms to the table*
layout algorithms. There are a couple of things missing, such as
handling early-breaks, and break-before and break-after propagation from
cells to the containing row.
We also don't yet stretch / recalculate the row and section block-sizes
when we insert a break inside that consumes additional space (e.g. when
breaking before monolithic content such as line boxes).
The biggest change is in the table layout algorithm itself. We need to
include caption layout during regular child layout now, so that we break
and resume correctly before / inside captions. Had to restructure the
caption layout code, so that we can re-use it during actual table child
layout.
The table layout algorithm needed a special child iterator (table child
layout order are ordered as top captions, table header, table bodies,
table footer, bottom captions - regardless of DOM order). The section
and row algorithms can use the regular block child iterator.
However, since the table, table section and table row layout algorithms
need a section / row / cell index, that's updated when we iterate over
the children, and we now may skip finished children, the index
calculation is now a bit more complicated. Let the child iterator class
take care of this, instead of increasing it by one per iteration.
We may want to reconsider how we do table-cell vertical alignment. Right
now it performs fragment-based alignment (because that pretty much just
worked without any effort), but we may want to do "global" alignment
instead, so that contents of short cells in a fragmented row start in a
subsequent row fragment, rather than always in the first one.
Bug: 1078927
Change-Id: Iffe96022110b1bd6008676c3e46b78d33a94522c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3427690
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#966638}
diff --git a/css/css-break/table/break-before-second-row.html b/css/css-break/table/break-before-second-row.html
new file mode 100644
index 0000000..3a8d307
--- /dev/null
+++ b/css/css-break/table/break-before-second-row.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
+<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="columns:2; column-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:green;">
+ <div style="height:40px;"></div>
+ <div style="position:relative; z-index:-1; display:table; border-spacing:0 20px; width:100%; background:red;">
+ <div style="display:table-row;">
+ <br>
+ </div>
+ <div style="display:table-row;">
+ <div style="height:80px; background:red;">
+ <br>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/table/break-inside-cell-000.html b/css/css-break/table/break-inside-cell-000.html
new file mode 100644
index 0000000..2982eed
--- /dev/null
+++ b/css/css-break/table/break-inside-cell-000.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
+<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="columns:2; column-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:red;">
+ <div style="height:40px; background:green;"></div>
+ <div style="display:table; width:100%; background:red;">
+ <div style="display:table-cell; vertical-align:top; background:green;">
+ <br>
+ </div>
+ <div style="display:table-cell; vertical-align:top; background:green;">
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/table/break-inside-cell-001.html b/css/css-break/table/break-inside-cell-001.html
new file mode 100644
index 0000000..cd55f46
--- /dev/null
+++ b/css/css-break/table/break-inside-cell-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks">
+<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="columns:2; column-gap:0; column-fill:auto; line-height:20px; width:100px; height:100px; background:red;">
+ <div style="display:table; width:100%; background:red;">
+ <div style="display:table-row;">
+ <div style="display:table-cell; vertical-align:top; background:green;">
+ <br>
+ <br>
+ </div>
+ <div style="display:table-cell; vertical-align:top; background:green;"></div>
+ </div>
+ <div style="display:table-row;">
+ <div style="display:table-cell; vertical-align:top; background:green;">
+ <br>
+ </div>
+ <div style="display:table-cell; vertical-align:top; background:green;">
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/table/section-with-overflow-000.html b/css/css-break/table/section-with-overflow-000.html
new file mode 100644
index 0000000..9090527
--- /dev/null
+++ b/css/css-break/table/section-with-overflow-000.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
+<style>
+ .halfsquare {
+ margin: -10px; /* Cover the border-spacing. */
+ width: 50px;
+ height: 100px;
+ background: green;
+ }
+</style>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:200px;">
+ <div style="display:table; border-spacing:10px; background:red;">
+ <div style="display:table-cell; vertical-align:top;">
+ <div style="height:50px;">
+ <div class="halfsquare"></div>
+ <div style="height:120px;"></div>
+ <div class="halfsquare" style="position:relative; z-index:-1;"></div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/table/section-with-overflow-001.html b/css/css-break/table/section-with-overflow-001.html
new file mode 100644
index 0000000..665f524
--- /dev/null
+++ b/css/css-break/table/section-with-overflow-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
+ <div style="display:table; width:100%;">
+ <div style="display:table-footer-group;">
+ <div style="display:table-cell; vertical-align:top;">
+ <div style="height:30px; background:green;"></div>
+ </div>
+ </div>
+ <div style="display:table-row-group;">
+ <div style="display:table-cell; vertical-align:top;">
+ <div style="height:40px; background:green;">
+ <div style="height:70px;"></div>
+ <div style="height:130px; background:green;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/table/section-with-overflow-002.html b/css/css-break/table/section-with-overflow-002.html
new file mode 100644
index 0000000..c6c63ab
--- /dev/null
+++ b/css/css-break/table/section-with-overflow-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
+<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="columns:4; column-gap:0; column-fill:auto; width:100px; height:100px; background:red;">
+ <div style="display:table; width:100%;">
+ <div style="display:table-caption; caption-side:bottom;">
+ <div style="width:25px; height:40px; background:green;">
+ </div>
+ </div>
+ <div style="display:table-footer-group;">
+ <div style="display:table-cell; vertical-align:top;">
+ <div style="height:240px;"></div>
+ </div>
+ </div>
+ <div style="display:table-caption;">
+ <div style="width:25px; height:40px; background:green;">
+ <div style="height:220px;"></div>
+ <div style="height:60px; background:green;"></div>
+ </div>
+ </div>
+ <div style="display:table-row-group;">
+ <div style="display:table-cell; vertical-align:top;">
+ <div style="height:40px; background:green;">
+ <div style="height:40px;"></div>
+ <div style="height:100px; background:green;"></div>
+ </div>
+ </div>
+ </div>
+ <div style="display:table-header-group;">
+ <div style="display:table-cell; vertical-align:top;">
+ <div style="height:40px; background:green;">
+ <div style="height:240px;"></div>
+ <div style="height:80px; background:green;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/table/sections-and-captions-mixed-order-ref.html b/css/css-break/table/sections-and-captions-mixed-order-ref.html
new file mode 100644
index 0000000..b3265c9
--- /dev/null
+++ b/css/css-break/table/sections-and-captions-mixed-order-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+ .fakecolumn {
+ float: left;
+ width: 50px;
+ height: 100px;
+ background: green;
+ }
+</style>
+<p>There should be four columns with the numbers from 1 to 20 in ascending
+ order. No red should be seen.</p>
+<div style="width:200px; line-height:20px;">
+ <div class="fakecolumn">
+ 1<br>
+ 2<br>
+ 3<br>
+ 4<br>
+ 5<br>
+ </div>
+ <div class="fakecolumn">
+ 6<br>
+ 7<br>
+ 8<br>
+ 9<br>
+ 10<br>
+ </div>
+ <div class="fakecolumn">
+ 11<br>
+ 12<br>
+ 13<br>
+ 14<br>
+ 15<br>
+ </div>
+ <div class="fakecolumn">
+ 16<br>
+ 17<br>
+ 18<br>
+ 19<br>
+ 20<br>
+ </div>
+</div>
diff --git a/css/css-break/table/sections-and-captions-mixed-order.html b/css/css-break/table/sections-and-captions-mixed-order.html
new file mode 100644
index 0000000..67d20e3
--- /dev/null
+++ b/css/css-break/table/sections-and-captions-mixed-order.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-break-3/#parallel-flows">
+<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display">
+<style>
+ #table > div {
+ background: green;
+ }
+</style>
+<link rel="match" href="sections-and-captions-mixed-order-ref.html">
+<p>There should be four columns with the numbers from 1 to 20 in ascending
+ order. No red should be seen.</p>
+<div style="columns:4; column-gap:0; column-fill:auto; width:200px; line-height:20px; height:100px; orphans:1; widows:1; background:red;">
+ <div id="table" style="display:table; width:100%;">
+ <div style="display:table-caption; caption-side:bottom;">14</div>
+ <div style="display:table-caption;">1</div>
+ <div style="display:table-footer-group;">8<br>9<br>10<br>11<br>12<br>13</div>
+ <div style="display:table-row-group;">4</div>
+ <div style="display:table-row-group;">5<br>6</div>
+ <div style="display:table-footer-group;">7</div>
+ <div style="display:table-header-group;">3</div>
+ <div style="display:table-caption; caption-side:bottom;">15<br>16<br>17<br>18<br>19<br>20</div>
+ <div style="display:table-caption;">2</div>
+ </div>
+</div>
