[GridNG] Inherit NGGridLayoutSubtree in subgrid fragmentation
1. Refactoring the logic for grid fragmentation to inherit the finalized
`NGGridLayoutTree` to children subgrids. Now, instead of passing a
layout tree to `PlaceGridItems`, we pass the sizing tree and recreate
its layout tree as needed if multiple passes of `PlaceItems` are
required, e.g., as in `PlaceGridItemsForFragmentation`.
2. Adding test coverage to the WPT suite for subgrid fragmentation.
Bug: 618969
Change-Id: I33b44738338adf49b07ab57077007a268963aa94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4662005
Commit-Queue: Ethan Jimenez <ethavar@microsoft.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1167600}
diff --git a/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html b/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html
new file mode 100644
index 0000000..959ff4a
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-container-fragmentation-001.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<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="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="display: grid; height: 200px;">
+ <div style="display: grid; grid-template: subgrid / subgrid; background: green;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html b/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html
new file mode 100644
index 0000000..9b28b37
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-container-fragmentation-002.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<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="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="display: grid; grid-template-rows: 200px;">
+ <div style="display: grid; grid-template: subgrid / subgrid; background: green;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html b/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html
new file mode 100644
index 0000000..3f1381a
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-container-fragmentation-003.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<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="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="height: 50px;">
+ <div style="height: 100px; background: green;"></div>
+ </div>
+ <div style="display: grid; height: 100px;">
+ <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-inside: avoid;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html b/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html
new file mode 100644
index 0000000..67c291f
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-container-fragmentation-004.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<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="width: 100px; height: 100px; columns: 4; column-gap: 0; background: red;">
+ <div style="height: 50px;">
+ <div style="height: 100px; background: green;"></div>
+ </div>
+ <div style="display: grid; height: 300px;">
+ <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-before: column;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html b/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html
new file mode 100644
index 0000000..37babe2
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-container-fragmentation-005.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<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="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red; position: relative;">
+ <div style="display: grid; height: 50px;">
+ <div style="display: grid; grid-template: subgrid / subgrid; background: green; break-after: column;"></div>
+ </div>
+ <div style="height: 50px;">
+ <div style="height: 100px; background: green;"></div>
+ </div>
+ <div style="width: 50px; height: 50px; background: green; position: absolute; bottom: 0; left: 0;"></div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html b/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html
new file mode 100644
index 0000000..1a26d81
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-item-fragmentation-001.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<title>Tests basic fragmentation of a grid-item.</title>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="display: grid;">
+ <div style="display: grid; grid-template: subgrid / subgrid;">
+ <div style="min-height: 200px; background: green;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html b/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html
new file mode 100644
index 0000000..24f7d99
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-item-fragmentation-002.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<title>Tests that grid-item reordered with grid-row-start is fragmented correctly.</title>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="display: grid;">
+ <div style="display: grid; grid-template: subgrid / subgrid; grid-row: span 2;">
+ <div style="height: 50px; background: green;"></div>
+ <div style="height: 150px; background: green; grid-row-start: 1;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html b/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html
new file mode 100644
index 0000000..49f0b5f
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-item-fragmentation-003.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<title>Tests that parallel grid items fragment correctly.</title>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="display: grid; grid-template-columns: auto auto;">
+ <div style="display: grid; grid-template: subgrid / subgrid; grid-column: span 2;">
+ <div style="background: green;"></div>
+ <div style="height: 200px; background: green;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html b/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html
new file mode 100644
index 0000000..85ed105
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-item-fragmentation-004.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<title>Tests that an end aligned grid-item is placed within the 2nd fragmentainer.</title>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="display: grid; grid-template-rows: 200px;">
+ <div style="display: grid; grid-template: subgrid / subgrid;">
+ <div style="height: 100px; background: green; align-self: end;"></div>
+ </div>
+ </div>
+ <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div>
+</div>
diff --git a/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html b/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html
new file mode 100644
index 0000000..3832f0d
--- /dev/null
+++ b/css/css-break/grid/subgrid/subgrid-item-fragmentation-005.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#pagination">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<title>Tests that an end aligned grid-item (with auto margins) is placed within the 2nd fragmentainer.</title>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="position: relative; width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+ <div style="display: grid; grid-template-rows: 200px;">
+ <div style="display: grid; grid-template: subgrid / subgrid;">
+ <div style="height: 100px; background: green; margin-top: auto;"></div>
+ </div>
+ </div>
+ <div style="position: absolute; background: green; top: 0; left: 0; width: 50px; height: 100px;"></div>
+</div>
