Bug 1636475 [wpt PR 23483] - Convert CLS source attribution integration tests to WPT., a=testonly
authorSteve Kobes <skobes@chromium.org>
Wed, 13 May 2020 09:48:39 +0000
changeset 531161 c18ec8257b9f3c61a2ce538734b91dd3b2d6e847
parent 531160 2445588003cd7c824255b3747dda2deb12c57b63
child 531162 7143cd0578a92d557e51976c537783f2f988fc9b
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1636475, 23483, 1053510, 2189951, 766956
milestone78.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 1636475 [wpt PR 23483] - Convert CLS source attribution integration tests to WPT., a=testonly Automatic update from web-platform-tests Convert CLS source attribution integration tests to WPT. Bug: 1053510 Change-Id: Ia1549ffa6d0c5d3e6f3dbdca79c83e4a66304852 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2189951 Commit-Queue: Steve Kobes <skobes@chromium.org> Reviewed-by: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#766956} -- wpt-commits: d0b09af9c467a2fa00dd84ec1d85037ee70a4fb3 wpt-pr: 23483
testing/web-platform/tests/layout-instability/resources/test-adapter.js
testing/web-platform/tests/layout-instability/resources/util.js
testing/web-platform/tests/layout-instability/simple-block-movement.html
testing/web-platform/tests/layout-instability/sources-enclosure.html
testing/web-platform/tests/layout-instability/sources-maximpact.html
--- a/testing/web-platform/tests/layout-instability/resources/test-adapter.js
+++ b/testing/web-platform/tests/layout-instability/resources/test-adapter.js
@@ -1,5 +1,5 @@
 // Abstracts expectations for reuse in different test frameworks.
 
 cls_expect = (watcher, expectation) => {
-  assert_equals(watcher.score, expectation.score);
+  watcher.checkExpectation(expectation);
 };
--- a/testing/web-platform/tests/layout-instability/resources/util.js
+++ b/testing/web-platform/tests/layout-instability/resources/util.js
@@ -63,8 +63,27 @@ ScoreWatcher = function() {
       this.score += entry.value;
       if (!entry.hadRecentInput)
         this.scoreWithInputExclusion += entry.value;
       this.resolve();
     });
   });
   observer.observe({entryTypes: ['layout-shift']});
 };
+
+ScoreWatcher.prototype.checkExpectation = function(expectation) {
+  if (expectation.score)
+    assert_equals(this.score, expectation.score);
+  if (expectation.sources)
+    check_sources(expectation.sources, this.lastEntry.sources);
+};
+
+check_sources = (expect_sources, actual_sources) => {
+  assert_equals(expect_sources.length, actual_sources.length);
+  let rect_match = (e, a) =>
+      e[0] == a.x && e[1] == a.y && e[2] == a.width && e[3] == a.height;
+  let match = e => a =>
+      e.node === a.node &&
+      rect_match(e.previousRect, a.previousRect) &&
+      rect_match(e.currentRect, a.currentRect);
+  for (let e of expect_sources)
+    assert_true(actual_sources.some(match(e)), e.node + " not found");
+};
--- a/testing/web-platform/tests/layout-instability/simple-block-movement.html
+++ b/testing/web-platform/tests/layout-instability/simple-block-movement.html
@@ -1,19 +1,19 @@
 <!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/test-adapter.js"></script>
+<script src="resources/util.js"></script>
 <style>
 #shifter { position: relative; width: 300px; height: 200px; }
 </style>
 <div id="shifter"></div>
-<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>
 <script>
 
 promise_test(async () => {
   const watcher = new ScoreWatcher;
 
   // Wait for the initial render to complete.
   await waitForAnimationFrames(2);
 
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/layout-instability/sources-enclosure.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<title>Layout Instability: source attribution with redundant enclosure</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/test-adapter.js"></script>
+<script src="resources/util.js"></script>
+<style>
+body { margin: 0; }
+#shifter {
+  position: relative; background: #def;
+  width: 300px; height: 200px;
+}
+#inner {
+  position: relative; background: #f97;
+  width: 100px; height: 100px;
+}
+#absfollow {
+  position: absolute; background: #ffd; opacity: 50%;
+  width: 350px; height: 200px; left: 0; top: 160px;
+}
+.stateB { top: 160px; }
+.stateB #inner { left: 100px; }
+.stateC ~ #absfollow { top: 0; }
+</style>
+<div id="shifter" class="stateA">
+  <div id="inner"></div>
+</div>
+<div id="absfollow"></div>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+  let shifter = document.querySelector("#shifter");
+  let absfollow = document.querySelector("#absfollow");
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  shifter.className = "stateB";
+  await watcher.promise;
+
+  // Shift of #inner ignored as redundant, fully enclosed by #shifter.
+  cls_expect(watcher, {sources: [{
+    node: shifter,
+    previousRect: [0, 0, 300, 200],
+    currentRect: [0, 160, 300, 200]
+  }]});
+
+  shifter.className = "stateC";
+  await watcher.promise;
+
+  // Shift of #shifter ignored as redundant, fully enclosed by #absfollow.
+  cls_expect(watcher, {sources: [{
+    node: absfollow,
+    previousRect: [0, 160, 350, 200],
+    currentRect: [0, 0, 350, 200]
+  }]});
+
+}, "Sources with redundant enclosure.");
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/layout-instability/sources-maximpact.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<title>Layout Instability: source attribution prioritization</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/test-adapter.js"></script>
+<script src="resources/util.js"></script>
+<style>
+body { margin: 0; }
+#a, #b, #c, #d, #e, #f {
+  display: inline-block;
+  background: gray;
+  min-width: 10px;
+  min-height: 10px;
+  vertical-align: top;
+}
+#a { width: 30px; height: 30px; }
+#b { width: 20px; height: 20px; }
+#c { height: 50px; }
+#d { width: 50px; }
+#e { width: 40px; height: 30px; }
+#f { width: 30px; height: 40px; }
+</style>
+<div id="grow"></div>
+<div id="a"></div
+><div id="b"></div
+><div id="c"></div
+><div id="d"></div
+><div id="e"></div
+><div id="f"></div>
+<script>
+
+let $ = id => document.querySelector(id);
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  $("#grow").style.height = "50px";
+  await watcher.promise;
+
+  cls_expect(watcher, {sources: [
+    {
+      node: $("#a"),
+      previousRect: [0, 0, 30, 30],
+      currentRect: [0, 50, 30, 30]
+    },
+    {
+      node: $("#f"),
+      previousRect: [150, 0, 30, 40],
+      currentRect: [150, 50, 30, 40]
+    },
+    {
+      node: $("#c"),
+      previousRect: [50, 0, 10, 50],
+      currentRect: [50, 50, 10, 50]
+    },
+    {
+      node: $("#d"),
+      previousRect: [60, 0, 50, 10],
+      currentRect: [60, 50, 50, 10]
+    },
+    {
+      node: $("#e"),
+      previousRect: [110, 0, 40, 30],
+      currentRect: [110, 50, 40, 30]
+    }
+  ]});
+}, "Source attribution prioritizes by impact.");
+
+</script>