Bug 1656700 [wpt PR 24843] - Reland "Use border box or layout overflow rect for layout shift tracking", a=testonly
authorXianzhu Wang <wangxianzhu@chromium.org>
Fri, 07 Aug 2020 12:41:34 +0000
changeset 544795 5eee896e20b40ad57ae51351d3c3a8bac927959b
parent 544794 52fefc76d908c71a00085be4a913607fe0eeba6b
child 544796 e7b1c0273f4bc0253459eda4dc3ac76af76f3453
push id37701
push userrmaries@mozilla.com
push dateSat, 15 Aug 2020 21:17:39 +0000
treeherdermozilla-central@ffc01c0f13a8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1656700, 24843, 1090763, 1108622, 2319538, 793806, 2333578, 793874, 2333648, 794218
milestone81.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1656700 [wpt PR 24843] - Reland "Use border box or layout overflow rect for layout shift tracking", a=testonly Automatic update from web-platform-tests Reland "Use border box or layout overflow rect for layout shift tracking" This reverts commit 491b5a9cbe75eb9cdde6e9e0b21e8246f441b086. The original CL was reverted because it caused failure on MSAN bots due to use of uninitialized value. The reason was that PaintInvalidatorContext::tree_builder_context_ pointed into an PrePaintTreeWalkContext entry in a vector, and the vector could be reallocated when we added new entries, causing the pointer in the parent PaintInvalidatorContext to point to an invalid address. Now remove PaintInvalidatorContext::tree_builder_context_ and add PaintInvalidatorContext::transform_ (which was the only used information from the parent PaintInvalidatorContext) to avoid the problem. Original change's description: > Revert "Use border box or layout overflow rect for layout shift tracking" > > This reverts commit 0933392f84b4bb96466bd86c0e814d96f63ba137. > > Reason for revert: ASAN/MSAN failures due to "use of uninitialized value"; see e.g. https://logs.chromium.org/logs/chromium/buildbucket/cr-buildbucket.appspot.com/8873209606965810848/+/steps/browser_tests/0/logs/Deterministic_failure:_AllForms__x2f_FormStructureBrowserTest.DataDrivenHeuristics__x2f_148__status_FAILURE_/0 > > Original change's description: > > Use border box or layout overflow rect for layout shift tracking > > > > This CL addresses the following issues of layout shift tracking: > > - Changed visual overflows triggered layout shift report > > (originally filed as crbug.com/1090763). > > - Descendant layout overflows were not included in ancestor's layout > > shift report. > > - Unnecessary descendant layout shift report. > > - Slow visual rect calculation for LayoutInline and LayoutText. > > > > It includes the following changes > > - Track LayoutBoxes and LayoutTexts only. > > - Track both old and new starting points and visual representations > > instead of using location of visual rects as starting points. > > - For a LayoutBox, the local visual representation is the layout > > overflow rect if the LayoutBox has layout overflow and doesn't clip > > overflow. Otherwise use the border box rect. > > - For a LayoutText, suppose its shift causes shift of all contents > > in containing block logically below the LayoutText, and use that > > part of visual representation of the containing block as the visual > > representation of the shift. > > - Map both local starting points and local visual representations to > > the initial containing block and viewport. > > > > This has the following benefits: > > - More accurate starting points and visual representations, conforming > > to the specs; > > - Better performance by > > * avoiding unnecessary layout shift reports of descendants > > * avoiding slow LayoutInline and LayoutText visual rect calculation. > > - sizeof(LayoutObject) is reduced by 16 bytes because now we use the > > previous geometry data in LayoutBoxes for paint invalidation. > > > > Bug: 1108622 > > Change-Id: I7ebb4e250e7ca2a03b4dadea50034e300e55ad84 > > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2319538 > > Reviewed-by: Steve Kobes <skobes@chromium.org> > > Reviewed-by: Koji Ishii <kojii@chromium.org> > > Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> > > Cr-Commit-Position: refs/heads/master@{#793806} > > TBR=wangxianzhu@chromium.org,skobes@chromium.org,kojii@chromium.org > > Change-Id: I590f2abc4a48ba65bdfe7a948ffce00b299f9e06 > No-Presubmit: true > No-Tree-Checks: true > No-Try: true > Bug: 1108622 > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2333578 > Reviewed-by: Peter Kasting <pkasting@chromium.org> > Commit-Queue: Peter Kasting <pkasting@chromium.org> > Cr-Commit-Position: refs/heads/master@{#793874} # Not skipping CQ checks because this is a reland. Bug: 1108622 Change-Id: I253a24799b6d2a3af346d4f65e3889217064b035 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2333648 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#794218} -- wpt-commits: 5111694f4f8d0ae21d4535e53f208d24061411a5 wpt-pr: 24843
testing/web-platform/tests/layout-instability/inline-flow-shift-vertical-rl.html
testing/web-platform/tests/layout-instability/inline-flow-shift.html
testing/web-platform/tests/layout-instability/outline.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/layout-instability/inline-flow-shift-vertical-rl.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>Layout Instability: simple block movement is detected</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<body style="writing-mode: vertical-rl">
+<div style="height: 200px; font-size: 20px; line-height: 25px">
+  1AAAAAAA<br>
+  2AAAAAAA<br>
+  3AAAAAAA<br>
+  <div id="inline-block" style="display: inline-block; width: 50px">4AAAAAAA</div><br>
+  5AAAAAAA<br>
+  6AAAAAAA<br>
+  7AAAAAAA<br>
+</div>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Modify the position of the div.
+  const inline_block = document.querySelector("#inline-block");
+  inline_block.style.width = '100px';
+
+  // The lines below the inline-block are shifted down by 50px.
+  // The implementation may measure the real width of the shifted text
+  // or use the available width (i.e. width of the containing block).
+  // Also tolerate extra 10% error.
+  const text_width = inline_block.offsetWidth;
+  const expectedScoreMin = computeExpectedScore(text_width * (30 * 3 + 50), 50) * 0.9;
+  const expectedScoreMax = computeExpectedScore(200 * (30 * 3 + 50), 50) * 1.1;
+
+  // Observer fires after the frame is painted.
+  assert_equals(watcher.score, 0);
+  await watcher.promise;
+  assert_between_exclusive(watcher.score, expectedScoreMin, expectedScoreMax);
+}, 'Inline flow movement.');
+
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/layout-instability/inline-flow-shift.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>Layout Instability: simple block movement is detected</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<div style="width: 200px; font-size: 20px; line-height: 25px">
+  1AAAAAAA<br>
+  2AAAAAAA<br>
+  3AAAAAAA<br>
+  <div id="inline-block" style="display: inline-block; height: 50px">4AAAAAAA</div><br>
+  5AAAAAAA<br>
+  6AAAAAAA<br>
+  7AAAAAAA<br>
+</div>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Modify the position of the div.
+  const inline_block = document.querySelector("#inline-block");
+  inline_block.style.height = '100px';
+
+  // The lines below the inline-block are shifted down by 50px.
+  // The implementation may measure the real width of the shifted text
+  // or use the available width (i.e. width of the containing block).
+  // Also tolerate extra 10% error.
+  const text_width = inline_block.offsetWidth;
+  const expectedScoreMin = computeExpectedScore(text_width * (30 * 3 + 50), 50) * 0.9;
+  const expectedScoreMax = computeExpectedScore(200 * (30 * 3 + 50), 50) * 1.1;
+
+  // Observer fires after the frame is painted.
+  assert_equals(watcher.score, 0);
+  await watcher.promise;
+  assert_between_exclusive(watcher.score, expectedScoreMin, expectedScoreMax);
+}, 'Inline flow movement.');
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/layout-instability/outline.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>Layout Instability: outline doesn't contribute to layout shift</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<div id="target" style="width: 300px; height: 300px"></div>
+<script>
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Add outline for target. This should not generate a shift.
+  target.style.outline = "10px solid blue";
+
+  await waitForAnimationFrames(3);
+  assert_equals(watcher.score, 0);
+}, "Outline.");
+</script>