mozilla-central: changeset 585994:b37f2b8cbccc6e7aa0b4b8d8f6714c2d9c1fd97c

Bug 1718778 [wpt PR 29543] - PrePaint: LayoutObject traversal with LayoutNG fragment lookups., a=testonly Automatic update from web-platform-tests 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} -- wpt-commits: c0b406d151940c4253d59c041d895e763c27e754 wpt-pr: 29543

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

--- a/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-035.html
+++ b/testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-035.html
@@ -6,17 +6,18 @@
 <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
 <style>
   .multicol {
     column-count: 2;
     column-fill: auto;
     column-gap: 0px;
     height: 100px;
     width: 100px;
-    margin-left: -200px;
+    margin-left: -250px;
+    margin-top: -50px;
   }
   .abs {
     position: absolute;
     width: 50px;
     height: 200px;
     top: 0px;
     background: red;
   }
@@ -26,15 +27,15 @@
     height: 200px;
     top: 0px;
     background: green;
   }
 </style>
 <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>
     </div>
   </div>
 </div>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>

author	Morten Stenshorne <mstensho@chromium.org>
	Sat, 17 Jul 2021 09:50:58 +0000
changeset 585994	b37f2b8cbccc6e7aa0b4b8d8f6714c2d9c1fd97c
parent 585993	8d707b5182d7968e8a116309dc3f2ae59c33ba37
child 585995	6f611bde040eeadbae8b5b1e4804f8cf5d4ec8b3
push id	38625
push user	archaeopteryx@coole-files.de
push date	Tue, 20 Jul 2021 09:46:04 +0000
treeherder	mozilla-central@d71ea8ccda7b [default view] [failures only]
perfherder	[talos] [build metrics] [platform microbench] (compared to previous push)
reviewers	testonly
bugs	1718778, 29543, 1224888, 1225304, 1043787, 1205685, 2996982, 901004
milestone	92.0a1
first release with	nightly linux32 d71ea8ccda7b / 92.0a1 / 20210720094604 / files nightly linux64 d71ea8ccda7b / 92.0a1 / 20210720094604 / files nightly mac d71ea8ccda7b / 92.0a1 / 20210720094604 / files nightly win32 d71ea8ccda7b / 92.0a1 / 20210720094604 / files nightly win64 d71ea8ccda7b / 92.0a1 / 20210720094604 / files
last release without	nightly linux32 9c579e2ce174 / 92.0a1 / 20210719215029 / files nightly linux64 9c579e2ce174 / 92.0a1 / 20210719215029 / files nightly mac 9c579e2ce174 / 92.0a1 / 20210719215029 / files nightly win32 9c579e2ce174 / 92.0a1 / 20210719215029 / files nightly win64 9c579e2ce174 / 92.0a1 / 20210719215029 / files

testing/web-platform/tests/css/css-break/abspos-in-opacity-000-ref.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/abspos-in-opacity-000.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/abspos-in-opacity-001-ref.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/abspos-in-opacity-001.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/change-inline-color-ref.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/change-inline-color.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof-ref.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/contain-strict-with-opacity-and-oof.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/out-of-flow-in-multicolumn-035.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/transform-008-ref.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/transform-008.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/transform-009-ref.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-break/transform-009.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-multicol/spanner-in-opacity-ref.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-multicol/spanner-in-opacity.html		file \| annotate \| diff \| comparison \| revisions