More accurate layout shift tracking for texts

Previously when a text shifted, we assumed the whole area below the text in the containing block shifted, which might report too big shifted area, e.g. if the text shift was just in one line. Now pass the logical height of the shifted text and calculate the shifted area for the text only. Shifts of other texts below are checked separately. Bug: 1121405 Change-Id: I029c5dfcf6d0537a9be4f8c33cac9d63bd4b4f1d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2386842 Commit-Queue: Xianzhu Wang <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Cr-Commit-Position: refs/heads/master@{#803755}
web-platform-tests · Sep 2, 2020 · b715a02 · b715a02
1 parent 5b45e1e
commit b715a02
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/layout-instability/inline-flow-shift-one-line.html b/layout-instability/inline-flow-shift-one-line.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>Layout Instability: inline/text 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">4AAAAAAA</div><br>
+  <div id="shift" style="display: inline-block"></div>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 width of |shift|.
+  document.querySelector("#shift").style.width = '50px';
+
+  // Only the line after |shift| is shifted right 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 = document.querySelector("#inline-block").clientWidth;
+  const expectedScoreMin = computeExpectedScore((text_width + 50) * 20, 50) * 0.9;
+  const expectedScoreMax = computeExpectedScore(200 * 25, 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>
diff --git a/layout-instability/inline-flow-shift-vertical-rl.html b/layout-instability/inline-flow-shift-vertical-rl.html
@@ -31,8 +31,8 @@
   // 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;
+  const expectedScoreMin = computeExpectedScore(text_width * (20 * 3 + 50), 50) * 0.9;
+  const expectedScoreMax = computeExpectedScore(200 * (25 * 3 + 50), 50) * 1.1;
 
   // Observer fires after the frame is painted.
   assert_equals(watcher.score, 0);