Pre-paint: Use ancestor fragments when walking a missed child.
Find and use the right fragments for ancestors between the containing
block (fragmentainer) and the missed OOF descendant, when possible.
There are cases where we miss an OOF child, but still have some of the
ancestors represented in the current fragmentainer. We need to find
them, so that we can use the correct paint offset and size.
The clipping issues mentioned in crbug.com/1442211 will be dealt with in
a follow-up CL. We still don't apply any clipping on ancestors when
walking a missed child.
Bug: 1442211
Change-Id: I4fcb0e7260829070d6a5f66f6785b3897fb00f90
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4513908
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1142377}
diff --git a/css/css-break/clipping-001.html b/css/css-break/clipping-001.html
new file mode 100644
index 0000000..da15ec7
--- /dev/null
+++ b/css/css-break/clipping-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211">
+<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; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
+ <div style="height:25px; background:green;"></div>
+ <div style="position:relative; overflow:clip; height:150px;">
+ <div>
+ <div style="position:absolute; top:-25px; width:100%;">
+ <div style="height:25px; background:red;"></div>
+ <div style="height:150px; background:green;"></div>
+ <div style="height:25px; background:red;"></div>
+ </div>
+ </div>
+ </div>
+ <div style="height:25px; background:green;"></div>
+</div>
diff --git a/css/css-break/clipping-002.html b/css/css-break/clipping-002.html
new file mode 100644
index 0000000..e1f2c4e
--- /dev/null
+++ b/css/css-break/clipping-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211">
+<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; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
+ <div style="height:25px; background:green;"></div>
+ <div style="position:relative; overflow:clip; height:350px;">
+ <div>
+ <div style="position:absolute; top:-25px; width:100%;">
+ <div style="height:25px; background:red;"></div>
+ <div style="height:350px; background:green;"></div>
+ <div style="height:25px; background:red;"></div>
+ </div>
+ </div>
+ </div>
+ <div style="height:25px; background:green;"></div>
+</div>
diff --git a/css/css-break/transform-017.html b/css/css-break/transform-017.html
new file mode 100644
index 0000000..b01e3cc
--- /dev/null
+++ b/css/css-break/transform-017.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211">
+<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:1; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
+ <div style="height:50px;"></div>
+ <div style="transform:scaleY(2); transform-origin:bottom; width:100px; height:50px;">
+ <div style="position:absolute; top:150px;">
+ <div style="position:absolute; top:-150px; width:100px; height:50px; background:green;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/transform-018.html b/css/css-break/transform-018.html
new file mode 100644
index 0000000..dc9a791
--- /dev/null
+++ b/css/css-break/transform-018.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211">
+<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="display:flow-root; position:relative; width:100px; height:100px; background:red;">
+ <div style="position:absolute; width:25%; height:40px; background:green;"></div>
+ <div style="position:absolute; right:0; top:0; width:25%; height:30px; background:green;"></div>
+ <div style="position:absolute; right:0; bottom:0; width:25%; height:30px; background:green;"></div>
+ <div style="margin-top:50px; columns:4; gap:0; column-fill:auto; height:50px;">
+ <div style="height:20px;"></div>
+ <div style="transform:scaleY(2); transform-origin:bottom; height:150px;">
+ <div>
+ <div style="position:absolute; width:100%; height:100%; background:green;"></div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/transform-019.html b/css/css-break/transform-019.html
new file mode 100644
index 0000000..758ff71
--- /dev/null
+++ b/css/css-break/transform-019.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211">
+<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; gap:0; column-fill:auto; width:100px; height:100px; background:red;">
+ <div style="height:50px;">
+ <div style="height:150px; background:green;"></div>
+ </div>
+ <div style="transform:scaleY(2); transform-origin:bottom; width:50px; height:100px;">
+ <div>
+ <div style="position:absolute; top:100px; width:50px; height:25px; background:green;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/transform-020.html b/css/css-break/transform-020.html
new file mode 100644
index 0000000..e15df5f
--- /dev/null
+++ b/css/css-break/transform-020.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211">
+<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="display:flow-root; position:relative; width:100px; height:100px; background:red;">
+ <div style="position:absolute; width:25%; height:50px; background:green;"></div>
+ <div style="position:absolute; right:0; width:25%; height:50px; background:green;"></div>
+ <div style="columns:4; margin-top:50px; gap:0; column-fill:auto; width:100px; height:50px;">
+ <div style="position:relative; height:50px; background:green;">
+ <div style="position:absolute; transform:scaleY(2); transform-origin:bottom; top:50px; width:100%; height:100px;">
+ <div>
+ <div style="position:absolute; top:50px; width:100%; height:75px; background:green;"></div>
+ </div>
+ <div style="height:50px; background:green;"></div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/transform-021.html b/css/css-break/transform-021.html
new file mode 100644
index 0000000..c97ef30
--- /dev/null
+++ b/css/css-break/transform-021.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442211">
+<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="display:flow-root; position:relative; width:100px; height:100px; background:red;">
+ <div style="position:absolute; width:25%; height:50px; background:green;"></div>
+ <div style="position:absolute; right:0; width:25%; height:50px; background:green;"></div>
+ <div style="columns:4; margin-top:50px; gap:0; column-fill:auto; width:100px; height:50px;">
+ <div style="position:relative; height:50px; background:green;">
+ <div style="position:absolute; transform:scaleY(2); transform-origin:bottom; top:50px; width:100%; height:100px;">
+ <div style="position:absolute; top:50px; width:100%; height:75px; background:green;"></div>
+ <div style="height:50px; background:green;"></div>
+ </div>
+ </div>
+ </div>
+</div>
