PrePaint: LayoutObject traversal with LayoutNG fragment lookups.
Almost completely move away from fragment traversal in pre-paint.
Instead do LayoutObject traversal accompanied by a corresponding
NGPhysicalBoxFragment when possible. This means that we'll keep track of
the fragment of the parent LayoutObject at any given time, and, when
entering a child LayoutObject, we'll search that fragment for a child
fragment (or child fragment item) representing a child LayoutObject.
If we don't find the child, it means that it doesn't exist in the
current fragmentainer.
One piece of complexity here is out-of-flow positioned elements. Since
we're traversing the LayoutObject tree, and keep track of the fragment
of the parent LayoutObject, for OOFs, we also need to keep track of the
ancestor fragments that may contain absolutely or fixed positioned
descendants, and search them, rather than the parent fragment, when
looking for OOFs. We also need to make paint offset adjustments when
entering OOFs, since OOFs are direct children of a fragmentainer, rather
than a child of their actual containing block.
There are still a few cases where it's just too hard to avoid fragment
traversal, though:
1. OOF fragments with missing containing block fragments. This happens
when an OOF inside block fragmentation overflows its actual containing
block, and occurs in fragmentainers where the containing block doesn't
occur.
2. Fragmented floats inside inline formatting contexts, when the float
occurs in fragmentainers where some of its ancestors don't.
3. Column spanners are always entered directly from the ancestor
multicol container.
When we fall back to fragment traversal like this, we'll also miss any
paint effects that should be caused by the missing ancestors. The new
test external/wpt/css/css-break/transform-009.html is failing because of
this. See crbug.com/1224888 . We might want to revisit this later if
important enough, but it will require large changes to how we lay out
OOFs in block fragmentation.
This CL fixes as many as *one* existing test. Added a few new ones that
previously didn't pass (except for the one mentioned above). This CL
fixes a few things:
1. Apply paint effects caused by parents not in the containing block
chain (e.g. on an abspos inside opacity inside relpos).
2. Handle transforms correctly for OOFs inside multicol.
3. Clear paint invalidation flags for text and non-atomic inlines, so
that if someone dirties them, we'll actually mark the tree properly, and
recalculate paint properties and invalidate for paint as necessary.
virtual/layout_ng_fragment_traversal/external/wpt/css/CSS2/positioning/
toogle-abspos-on-relpos-inline-child.html is now failing. See
crbug.com/1225304
Updated css/css-break/out-of-flow-in-multicolumn-035.html to add some
transform translation, to test fixedpos inside abspos in multicol. This
test now fails with legacy block fragmentation.
Remove NGFragmentChildIterator, since this was only used as a helper for
fragment traversal in pre-paint. It helped us access incoming break
tokens very easily. We cannot use it for LayoutObject traversal. We
still need the incoming break token in a couple of relatively rare
cases, and we'll just find it manually there. This isn't exactly cheap,
but I believe that, at some point in the future, we won't need incoming
break tokens at all during painting (only during layout).
As part of reducing the need for incoming break tokens, we'll no longer
use the "flow thread offset" as an ID in FragmentData in NG (in fact, we
were abusing this field by storing consumed block-size instead of flow
thread offset). Instead we'll use the fragmentainer index, which is
easier and cheaper to obtain. PaintInfo will now map from
NGPhysicalBoxFragment to FragmentData in more cases than before, rather
than comparing fragment IDs. The only case in NG where we need to map
using the fragment ID is for self-painting non-atomic inlines (which
don't store a vector of physical fragments in the layout object).
Bug: 1043787, 1205685
Change-Id: I63f5b9bc07d45770a728f6d125baf02800863aa5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2996982
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#901004}
diff --git a/css/css-break/abspos-in-opacity-000-ref.html b/css/css-break/abspos-in-opacity-000-ref.html
new file mode 100644
index 0000000..b7013a9
--- /dev/null
+++ b/css/css-break/abspos-in-opacity-000-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<p>There should be a purple square below.</p>
+<div style="width:100px; height:100px; background:blue;">
+ <div style="opacity:0.5;">
+ <div style="width:100px; height:100px; background:red;"></div>
+ </div>
+</div>
diff --git a/css/css-break/abspos-in-opacity-000.html b/css/css-break/abspos-in-opacity-000.html
new file mode 100644
index 0000000..f41c035
--- /dev/null
+++ b/css/css-break/abspos-in-opacity-000.html
@@ -0,0 +1,10 @@
+<!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/">
+<link rel="match" href="abspos-in-opacity-000-ref.html">
+<p>There should be a purple square below.</p>
+<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:blue;">
+ <div style="opacity:0.5;">
+ <div style="position:absolute; width:100px; height:100px; background:red;"></div>
+ </div>
+</div>
diff --git a/css/css-break/abspos-in-opacity-001-ref.html b/css/css-break/abspos-in-opacity-001-ref.html
new file mode 100644
index 0000000..b7013a9
--- /dev/null
+++ b/css/css-break/abspos-in-opacity-001-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<p>There should be a purple square below.</p>
+<div style="width:100px; height:100px; background:blue;">
+ <div style="opacity:0.5;">
+ <div style="width:100px; height:100px; background:red;"></div>
+ </div>
+</div>
diff --git a/css/css-break/abspos-in-opacity-001.html b/css/css-break/abspos-in-opacity-001.html
new file mode 100644
index 0000000..e81c558
--- /dev/null
+++ b/css/css-break/abspos-in-opacity-001.html
@@ -0,0 +1,12 @@
+<!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/">
+<link rel="match" href="abspos-in-opacity-001-ref.html">
+<p>There should be a purple square below.</p>
+<div style="columns:2; column-gap:0; column-fill:auto; width:100px; height:100px; background:blue;">
+ <div style="position:relative;">
+ <div style="opacity:0.5; height:200px;">
+ <div style="position:absolute; width:50px; height:200px; background:red;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/change-inline-color-ref.html b/css/css-break/change-inline-color-ref.html
new file mode 100644
index 0000000..7f99f57
--- /dev/null
+++ b/css/css-break/change-inline-color-ref.html
@@ -0,0 +1,16 @@
+<!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/">
+<style>
+ .fakecolumn {
+ width: 1em;
+ text-align: center;
+ }
+</style>
+<p>The word PASS should be seen below.</p>
+<div style="display:flex; color:green;">
+ <div class="fakecolumn">P</div>
+ <div class="fakecolumn">A</div>
+ <div class="fakecolumn">S</div>
+ <div class="fakecolumn">S</div>
+</div>
diff --git a/css/css-break/change-inline-color.html b/css/css-break/change-inline-color.html
new file mode 100644
index 0000000..c4334af
--- /dev/null
+++ b/css/css-break/change-inline-color.html
@@ -0,0 +1,17 @@
+<!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/">
+<link rel="match" href="change-inline-color-ref.html">
+<p>The word PASS should be seen below.</p>
+<div style="columns:4; width:4em; text-align:center; column-gap:0; orphans:1; widows:1; color:white;">
+ <span id="span">
+ P A S S
+ </span>
+</div>
+<script>
+ requestAnimationFrame(()=> {
+ requestAnimationFrame(()=> {
+ span.style.color = "green";
+ });
+ });
+</script>
diff --git a/css/css-break/contain-strict-with-opacity-and-oof-ref.html b/css/css-break/contain-strict-with-opacity-and-oof-ref.html
new file mode 100644
index 0000000..a9c82c4
--- /dev/null
+++ b/css/css-break/contain-strict-with-opacity-and-oof-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<p>There should be a (pale) green square below, and no (pale) red.</p>
+<div style="will-change:transform; contain:strict; width:100px; height:100px;">
+ <div style="opacity:0.2; width:100px; height:100px;">
+ <div style="width:100px; height:100px; background:green;"></div>
+ </div>
+</div>
diff --git a/css/css-break/contain-strict-with-opacity-and-oof.html b/css/css-break/contain-strict-with-opacity-and-oof.html
new file mode 100644
index 0000000..b3323a6
--- /dev/null
+++ b/css/css-break/contain-strict-with-opacity-and-oof.html
@@ -0,0 +1,13 @@
+<!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/">
+<link rel="match" href="contain-strict-with-opacity-and-oof-ref.html">
+<p>There should be a (pale) green square below, and no (pale) red.</p>
+<div style="columns:3; margin-top:-50px; column-fill:auto; height:200px;">
+ <div style="height:50px;"></div>
+ <div style="will-change:transform; contain:strict; width:100px; height:100px;">
+ <div style="opacity:0.2; width:100px; height:100px; background:red;">
+ <div style="position:absolute; width:100px; height:100px; background:green;"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/out-of-flow-in-multicolumn-035.html b/css/css-break/out-of-flow-in-multicolumn-035.html
index 6a2d527..f1fff40 100644
--- a/css/css-break/out-of-flow-in-multicolumn-035.html
+++ b/css/css-break/out-of-flow-in-multicolumn-035.html
@@ -11,7 +11,8 @@
column-gap: 0px;
height: 100px;
width: 100px;
- margin-left: -200px;
+ margin-left: -250px;
+ margin-top: -50px;
}
.abs {
position: absolute;
@@ -31,7 +32,7 @@
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="multicol">
<div style="height: 400px;"></div>
- <div style="transform: translateX(0);">
+ <div style="transform: translate(50px,50px); ">
<div style="height: 200px;"></div>
<div class="abs">
<div class="fixed"></div>
diff --git a/css/css-break/transform-008-ref.html b/css/css-break/transform-008-ref.html
new file mode 100644
index 0000000..2a16079
--- /dev/null
+++ b/css/css-break/transform-008-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+ .fakecolumn {
+ width: 100px;
+ height: 100px;
+ }
+ .relpos {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 50px;
+ }
+ .transform {
+ transform: rotate(45deg);
+ height: 100%;
+ }
+ .abspos {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: green;
+ }
+</style>
+<p>Below there should be two green squares, and one green rectangle between
+ them. They should all be rotated.</p>
+<div style="display:flex;">
+ <div class="fakecolumn">
+ <div class="relpos" style="margin-top:50px; height:50px;">
+ <div class="transform">
+ <div class="abspos"></div>
+ </div>
+ </div>
+ </div>
+ <div class="fakecolumn">
+ <div class="relpos" style="height:100px;">
+ <div class="transform">
+ <div class="abspos"></div>
+ </div>
+ </div>
+ </div>
+ <div class="fakecolumn">
+ <div class="relpos" style="height:50px;">
+ <div class="transform">
+ <div class="abspos"></div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/transform-008.html b/css/css-break/transform-008.html
new file mode 100644
index 0000000..b3b80d7
--- /dev/null
+++ b/css/css-break/transform-008.html
@@ -0,0 +1,31 @@
+<!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/#transforms">
+<link rel="match" href="transform-008-ref.html">
+<style>
+ .relpos {
+ position: relative;
+ top: 50px;
+ left: 50px;
+ width: 50px;
+ }
+ .transform {
+ transform: rotate(45deg);
+ height: 200px;
+ }
+ .abspos {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: green;
+ }
+</style>
+<p>Below there should be two green squares, and one green rectangle between
+ them. They should all be rotated.</p>
+<div style="columns:3; column-gap:0; column-fill:auto; width:300px; height:100px;">
+ <div class="relpos" style="margin-top:50px;">
+ <div class="transform">
+ <div class="abspos"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/transform-009-ref.html b/css/css-break/transform-009-ref.html
new file mode 100644
index 0000000..d7d3ebf
--- /dev/null
+++ b/css/css-break/transform-009-ref.html
@@ -0,0 +1,71 @@
+<!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/#transforms">
+<style>
+ .fakecolumn {
+ width: 100px;
+ height: 100px;
+ }
+ .relpos {
+ position: relative;
+ width: 30px;
+ top: 50px;
+ left: 50px;
+ }
+ .transform {
+ transform: rotate(45deg);
+ height: 100%;
+ }
+ .abspos {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: green;
+ }
+</style>
+<p>Below there should be six rotated green rectangles (not all with the same
+ size).</p>
+<div style="display:flex;">
+ <div class="fakecolumn">
+ <div class="relpos" style="margin-top:50px;">
+ <div class="transform" style="height:0;">
+ <div class="abspos" style="height:50px;"></div>
+ </div>
+ </div>
+ </div>
+ <div class="fakecolumn">
+ <div class="relpos">
+ <div class="transform" style="height:0;">
+ <div class="abspos" style="height:100px;"></div>
+ </div>
+ </div>
+ </div>
+ <div class="fakecolumn">
+ <div class="relpos" style="margin-top:50px;">
+ <div class="transform" style="height:50px;">
+ <div class="abspos" style="top:-50px; height:100px;"></div>
+ </div>
+ </div>
+ </div>
+ <div class="fakecolumn">
+ <div class="relpos">
+ <div class="transform" style="height:100px;">
+ <div class="abspos"></div>
+ </div>
+ </div>
+ </div>
+ <div class="fakecolumn">
+ <div class="relpos">
+ <div class="transform" style="height:0;">
+ <div class="abspos" style="height:100px;"></div>
+ </div>
+ </div>
+ </div>
+ <div class="fakecolumn">
+ <div class="relpos">
+ <div class="transform" style="height:0;">
+ <div class="abspos" style="height:50px;"></div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-break/transform-009.html b/css/css-break/transform-009.html
new file mode 100644
index 0000000..f0653f7
--- /dev/null
+++ b/css/css-break/transform-009.html
@@ -0,0 +1,33 @@
+<!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/#transforms">
+<link rel="match" href="transform-009-ref.html">
+<style>
+ .relpos {
+ position: relative;
+ width: 30px;
+ top: 50px;
+ left: 50px;
+ }
+ .transform {
+ transform: rotate(45deg);
+ height: 150px;
+ }
+ .abspos {
+ position: absolute;
+ width: 100%;
+ height: 500px;
+ top: -200px;
+ background: green;
+ }
+</style>
+<p>Below there should be six rotated green rectangles (not all with the same
+ size).</p>
+<div style="columns:5; column-gap:0; column-fill:auto; width:500px; height:100px;">
+ <div style="height:250px;"></div>
+ <div class="relpos">
+ <div class="transform">
+ <div class="abspos"></div>
+ </div>
+ </div>
+</div>
diff --git a/css/css-multicol/spanner-in-opacity-ref.html b/css/css-multicol/spanner-in-opacity-ref.html
new file mode 100644
index 0000000..e981eac
--- /dev/null
+++ b/css/css-multicol/spanner-in-opacity-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<p>Test passes if there is a purple square below.</p>
+<div style="width:100px; background:blue;">
+ <div style="opacity:0.5;">
+ <div style="height:100px; background:red;"></div>
+ </div>
+</div>
diff --git a/css/css-multicol/spanner-in-opacity.html b/css/css-multicol/spanner-in-opacity.html
new file mode 100644
index 0000000..78b1ac8
--- /dev/null
+++ b/css/css-multicol/spanner-in-opacity.html
@@ -0,0 +1,10 @@
+<!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/">
+<link rel="match" href="spanner-in-opacity-ref.html">
+<p>Test passes if there is a purple square below.</p>
+<div style="columns:2; column-fill:auto; column-gap:0; width:100px; background:blue;">
+ <div style="opacity:0.5;">
+ <div style="column-span:all; height:100px; background:red;"></div>
+ </div>
+</div>
