[GridFragmentation] Add OOF candidates.
This patch adds the OOF candidates with the correct static position
to the grid fragment.
This places all the OOF candidates into the last fragment - as this
has the most up to date grid geometry information.
Bug: 614667
Change-Id: I0b6a19789de2adc8a286a817650d60e6cfa6eb6b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3448032
Reviewed-by: Alison Maher <almaher@microsoft.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#969026}
diff --git a/css/css-break/grid/grid-item-oof-001.html b/css/css-break/grid/grid-item-oof-001.html
new file mode 100644
index 0000000..e948892
--- /dev/null
+++ b/css/css-break/grid/grid-item-oof-001.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#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="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;">
+ <div style="position: relative;">
+ <div style="display: grid; height: 200px;">
+ <div style="position: absolute; width: 50px; height: 200px; background: green;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/grid/grid-item-oof-002.html b/css/css-break/grid/grid-item-oof-002.html
new file mode 100644
index 0000000..b1ced43
--- /dev/null
+++ b/css/css-break/grid/grid-item-oof-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#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="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;">
+ <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 150px;">
+ <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 150px; background: green; align-self: end;"></div>
+ <div style="grid-row-start: 1; position: absolute; width: 50px; height: 50px; background: green; align-self: start;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/grid-item-oof-003.html b/css/css-break/grid/grid-item-oof-003.html
new file mode 100644
index 0000000..59235f9
--- /dev/null
+++ b/css/css-break/grid/grid-item-oof-003.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#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="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;">
+ <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 150px;">
+ <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 150px; background: green; align-self: center;"></div>
+ <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 25px; background: green; align-self: end;"></div>
+ <div style="grid-row-start: 1; grid-row-end: 3; position: absolute; width: 50px; height: 25px; background: green; align-self: start;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/grid-item-oof-004.html b/css/css-break/grid/grid-item-oof-004.html
new file mode 100644
index 0000000..f73d91a
--- /dev/null
+++ b/css/css-break/grid/grid-item-oof-004.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#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="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;">
+ <div style="position: relative; display: grid; height: 200px; grid-template-rows: 50px 100px;">
+ <div style="position: absolute; background: green; width: 50px; height: 100px;"></div>
+ <div style="grid-row-start: 2; break-before: column; height: 50px; background: green;"></div> <!-- break-before pushes this row into the 2nd column. -->
+ <div style="grid-row-start: 2; position: absolute; width: 50px; height: 50px; background: green; align-self: end;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/grid-item-oof-005.html b/css/css-break/grid/grid-item-oof-005.html
new file mode 100644
index 0000000..3536b30
--- /dev/null
+++ b/css/css-break/grid/grid-item-oof-005.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#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="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;">
+ <div style="position: relative; display: grid; grid-template-rows: 50px auto;">
+ <div style="position: absolute; background: green; width: 50px; height: 100px;"></div>
+ <div style="grid-row-start: 2;"> <!-- Row expands from 80px to 90px -->
+ <div style="break-inside: avoid; height: 40px;"></div>
+ <div style="break-inside: avoid; height: 40px;"></div>
+ </div>
+ <div style="grid-row-start: 2; position: absolute; width: 50px; height: 40px; background: green; align-self: end;"></div>
+ <div style="position: absolute; background: green; width: 50px; height: 60px; bottom: -60px;"></div>
+ </div>
+</div>
diff --git a/css/css-break/grid/grid-item-oof-006.html b/css/css-break/grid/grid-item-oof-006.html
new file mode 100644
index 0000000..63a14e5
--- /dev/null
+++ b/css/css-break/grid/grid-item-oof-006.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#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="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;">
+ <div style="position: relative; display: grid; grid-template-rows: 50px 100px 50px;">
+ <div style="background: green;">
+ <div style="position: absolute; background: green; grid-row-start: 2; inset: 0;"></div>
+ <div style="position: absolute; background: green; grid-row-start: 3; inset: 0;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/grid/grid-item-oof-007.html b/css/css-break/grid/grid-item-oof-007.html
new file mode 100644
index 0000000..6802973
--- /dev/null
+++ b/css/css-break/grid/grid-item-oof-007.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#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="columns: 2; height: 100px; width: 100px; column-gap: 0; column-fill: auto; background: red;">
+ <div style="position: relative; display: grid; grid-template-rows: 50px auto 50px;">
+ <div style="background: green;">
+ <div style="position: absolute; background: green; grid-row-start: 2; inset: 0;"></div>
+ <div style="position: absolute; background: green; grid-row-start: 3; inset: 0;"></div>
+ </div>
+ <div> <!-- Expands row from 70px to 100px -->
+ <div style="break-inside: avoid; height: 20px;"></div>
+ <div style="break-inside: avoid; height: 50px;"></div>
+ </div>
+ </div>
+</div>
