Convert some LayoutShiftTrackerTest cases to WPT.

Bug: 984109
Change-Id: I34290d577d9a96218dfbf892f669572a2c1b1395
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1895389
Commit-Queue: Steve Kobes <skobes@chromium.org>
Reviewed-by: Nicolás Peña Moreno <npm@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712747}

third_party/blink/renderer/core/layout/layout_shift_tracker_test.cc

@@ -41,57 +41,6 @@ class LayoutShiftTrackerTest : public RenderingTest {
   }
 };
 
-TEST_F(LayoutShiftTrackerTest, SimpleBlockMovement) {
-  SetBodyInnerHTML(R"HTML(
-    <style>
-      #j { position: relative; width: 300px; height: 100px; }
-    </style>
-    <div id='j'></div>
-  )HTML");
-
-  EXPECT_EQ(0.0, GetLayoutShiftTracker().Score());
-  EXPECT_EQ(0.0, GetLayoutShiftTracker().OverallMaxDistance());
-
-  GetDocument().getElementById("j")->setAttribute(html_names::kStyleAttr,
-                                                  AtomicString("top: 60px"));
-  UpdateAllLifecyclePhases();
-  // 300 * (100 + 60) * (60 / 800) / (default viewport size 800 * 600)
-  EXPECT_FLOAT_EQ(0.1 * (60.0 / 800.0), GetLayoutShiftTracker().Score());
-  EXPECT_FLOAT_EQ(60.0, GetLayoutShiftTracker().OverallMaxDistance());
-}
-
-TEST_F(LayoutShiftTrackerTest, Transform) {
-  SetBodyInnerHTML(R"HTML(
-    <style>
-      body { margin: 0; }
-      #c { transform: translateX(-300px) translateY(-40px); }
-      #j { position: relative; width: 600px; height: 140px; }
-    </style>
-    <div id='c'>
-      <div id='j'></div>
-    </div>
-  )HTML");
-
-  GetDocument().getElementById("j")->setAttribute(html_names::kStyleAttr,
-                                                  AtomicString("top: 60px"));
-  UpdateAllLifecyclePhases();
-  // (600 - 300) * (140 - 40 + 60) * (60 / 800) / (800 * 600)
-  EXPECT_FLOAT_EQ(0.1 * (60.0 / 800.0), GetLayoutShiftTracker().Score());
-}
-
-TEST_F(LayoutShiftTrackerTest, RtlDistance) {
-  SetBodyInnerHTML(R"HTML(
-    <style>
-      #j { position: relative; width: 100px; height: 100px; direction: rtl; }
-    </style>
-    <div id='j'></div>
-  )HTML");
-  GetDocument().getElementById("j")->setAttribute(
-      html_names::kStyleAttr, AtomicString("width: 70px; left: 10px"));
-  UpdateAllLifecyclePhases();
-  EXPECT_FLOAT_EQ(20.0, GetLayoutShiftTracker().OverallMaxDistance());
-}
-
 TEST_F(LayoutShiftTrackerTest, IgnoreAfterInput) {
   SetBodyInnerHTML(R"HTML(
     <style>

third_party/blink/web_tests/external/wpt/layout-instability/resources/util.js

+// Utilities for Layout Instability tests.
+
+// Returns a promise that is resolved when the specified number of animation
+// frames has occurred.
+waitForAnimationFrames = frameCount => {
+  return new Promise(resolve => {
+    const handleFrame = () => {
+      if (--frameCount <= 0)
+        resolve();
+      else
+        requestAnimationFrame(handleFrame);
+    };
+    requestAnimationFrame(handleFrame);
+  });
+};
+
+// Returns a promise that is resolved when the next animation frame occurs.
+waitForAnimationFrame = () => waitForAnimationFrames(1);
+
+// Helper to compute an expected layout shift score based on an expected impact
+// region and max move distance for a particular animation frame.
+computeExpectedScore = (impactRegionArea, moveDistance) => {
+  const docElement = document.documentElement;
+
+  const viewWidth = docElement.clientWidth;
+  const viewHeight = docElement.clientHeight;
+
+  const viewArea = viewWidth * viewHeight;
+  const viewMaxDim = Math.max(viewWidth, viewHeight);
+
+  const impactFraction = impactRegionArea / viewArea;
+  const distanceFraction = moveDistance / viewMaxDim;
+
+  return impactFraction * distanceFraction;
+};
+
+// An object that tracks the document cumulative layout shift score.
+// Usage:
+//
+//   const watcher = new ScoreWatcher;
+//   ...
+//   assert_equals(watcher.score, expectedScore);
+//
+// The score reflects only layout shifts that occur after the ScoreWatcher is
+// constructed.
+ScoreWatcher = function() {
+  if (PerformanceObserver.supportedEntryTypes.indexOf("layout-shift") == -1)
+    throw new Error("Layout Instability API not supported");
+  this.score = 0;
+  const resetPromise = () => {
+    this.promise = new Promise(resolve => {
+      this.resolve = () => {
+        resetPromise();
+        resolve();
+      }
+    });
+  };
+  resetPromise();
+  const observer = new PerformanceObserver(list => {
+    list.getEntries().forEach(entry => {
+      this.score += entry.value;
+      this.resolve();
+    });
+  });
+  observer.observe({entryTypes: ['layout-shift']});
+};

third_party/blink/web_tests/external/wpt/layout-instability/rtl-distance.html

+<!DOCTYPE html>
+<title>Layout Instability: movement distance uses starting corner</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<style>
+
+#shifter { position: relative; width: 100px; height: 100px; direction: rtl; }
+
+</style>
+<div id='shifter'></div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Move the left edge rightward by 10px and the right edge leftward by 20px.
+  document.querySelector("#shifter").style = "width: 70px; left: 10px";
+
+  // The movement distance should use the displacement of the right edge.
+  const expectedScore = computeExpectedScore(100 * 100, 20);
+
+  await watcher.promise;
+  assert_equals(watcher.score, expectedScore);
+}, 'RTL element.');
+
+</script>

third_party/blink/web_tests/external/wpt/layout-instability/simple-block-movement.html

+<!DOCTYPE html>
+<title>Layout Instability: simple block movement is detected</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<style>
+
+#shifter { position: relative; width: 300px; height: 100px; }
+
+</style>
+<div id="shifter"></div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Modify the position of the div.
+  document.querySelector("#shifter").style = "top: 60px";
+
+  // An element of size (300 x 100) has shifted by 60px.
+  const expectedScore = computeExpectedScore(300 * (100 + 60), 60);
+
+  // Observer fires after the frame is painted.
+  assert_equals(watcher.score, 0);
+  await watcher.promise;
+  assert_equals(watcher.score, expectedScore);
+}, 'Simple block movement.');
+
+</script>

third_party/blink/web_tests/external/wpt/layout-instability/transform.html

+<!DOCTYPE html>
+<title>Layout Instability: shift inside a transformed container</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<style>
+
+body { margin: 0; }
+#container { transform: translateX(-300px) translateY(-40px); }
+#shifter { position: relative; width: 600px; height: 140px; }
+
+</style>
+<div id="container">
+  <div id="shifter"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Modify the position of the div.
+  document.querySelector("#shifter").style = "top: 60px";
+
+  // The shifter has size 600 x 140, but the container's transform
+  // reduces its viewport overlap.
+  const expectedScore = computeExpectedScore(
+      (600 - 300) * (140 - 40 + 60), 60);
+
+  await watcher.promise;
+  assert_equals(watcher.score, expectedScore);
+}, 'Transformed container.');
+
+</script>