Add browser test for SubframeWeightingFactor OOPIF logic

We need to wait the layout shift score in the subframe in PageLoadMetricsTestWaiter before we check the metric recorded in the UKM and UMA to reduce the flakiness in the browser tests. Since the layout shift score is only recorded in the page level not on the main frame and subframe respectively, I have to use |is_main_frame| in PageLoadMetricsTestWaiter to check where the layout shift scores is from. Bug: 943668 Change-Id: I5b84f9e7f1f94444c0ae81057d098e96bdbc3448 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3945928 Reviewed-by: Steve Kobes <[email protected]> Reviewed-by: Annie Sullivan <[email protected]> Commit-Queue: Lan Wei <[email protected]> Cr-Commit-Position: refs/heads/main@{#1063330}
web-platform-tests · Oct 25, 2022 · e915026 · e915026
1 parent cfb03a1
commit e915026
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/layout-instability/main-frame.html b/layout-instability/main-frame.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<body>
+<title>Layout Instability: subframe layout shift score</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #i {
+    border: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: pink;
+  }
+</style>
+<iframe id="i" width="400" height="300" src="sub-frame.html"></iframe>
+
+<script>
+const loadPromise = new Promise(resolve => {
+  window.addEventListener("load", () => {
+    resolve(true);
+  });
+});
+
+let iframe = document.getElementById('i');
+const load_promise = new Promise(resolve => {
+  iframe.addEventListener('load', function() {
+    resolve(true);
+  });
+});
+
+checkMainFrameLoad = async () => {
+  await loadPromise;
+  return true;
+};
+
+checkIFrameLoad = async () => {
+  // Wait for the iframe finishing loading
+  await load_promise;
+  return true;
+};
+
+promise_test(async t => {
+  checkMainFrameLoad();
+  // Wait for the iframe finishing loading
+  checkIFrameLoad();
+
+  // Wait for the message sent from the iframe after it receives all the layout
+  // shifts.
+  await new Promise(resolve => {
+    window.addEventListener("message", (event) => {
+      if (event.data.type == "layout shift score") {
+        t.step(() => {
+          assert_equals(event.data.score, event.data.expectedScore);
+        });
+        resolve();
+      }
+    }, false);
+  });
+}, "");
+</script>
+</body>
+</html>
diff --git a/layout-instability/sub-frame.html b/layout-instability/sub-frame.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/test-adapter.js"></script>
+<script src="resources/util.js"></script>
+<style>
+  #j {
+    position: relative;
+    width: 300px;
+    height: 100px;
+    background-color: purple;
+  }
+</style>
+<div id="j"></div>
+<script>
+function shiftFrame() {
+  document.getElementById('j').style.top = '60px';
+}
+function unshiftFrame() {
+  document.getElementById('j').style.top = '';
+}
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+  shiftFrame();
+
+  const expectedScore = computeExpectedScore(300 * (100 + 60), 60);
+
+  cls_expect(watcher, {score: 0});
+  await watcher.promise;
+  cls_expect(watcher, {score: expectedScore});
+
+  unshiftFrame();
+  await watcher.promise;
+  cls_expect(watcher, {score: expectedScore * 2});
+
+  window.parent.postMessage({
+    type: 'layout shift score',
+    score: watcher.score,
+    expectedScore: expectedScore * 2,
+  }, '*');
+}, 'We will see two layout shift with the same score in the subframe.');
+</script>
+</body>
+</html>