1 files changed, 72 insertions, 0 deletions
diff --git a/testing/web-platform/tests/layout-instability/input-timestamp.html b/testing/web-platform/tests/layout-instability/input-timestamp.html
new file mode 100644
index 0000000000..ba31d47866
--- /dev/null
+++ b/testing/web-platform/tests/layout-instability/input-timestamp.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Layout Instability: observe timestamp after user input</title>
+
+<body>
+  <style>
+    #myDiv {
+      position: relative;
+      width: 300px;
+      height: 100px;
+      background: blue;
+    }
+
+    /* Disable the button's focus ring, which otherwise expands its visual rect by
+ * 1px on all sides, triggering a layout shift event.
+ */
+    #button {
+      outline: none;
+    }
+  </style>
+  <div id='myDiv'></div>
+  <button id='button'>Generate a 'click' event</button>
+  <script src=/resources/testharness.js></script>
+  <script src=/resources/testharnessreport.js></script>
+  <script src=/resources/testdriver.js></script>
+  <script src=/resources/testdriver-vendor.js></script>
+  <script src=resources/util.js></script>
+  <script src=/event-timing/resources/event-timing-test-utils.js></script>
+  <script>
+    let timeAfterClick;
+
+    promise_test(async t => {
+      assert_implements(window.LayoutShift, 'Layout Instability is not supported.');
+      // Wait for the initial render to complete.
+      await waitForAnimationFrames(2);
+
+      const startTime = performance.now();
+      return new Promise(resolve => {
+        const observer = new PerformanceObserver(
+          t.step_func(entryList => {
+            const endTime = performance.now();
+            assert_equals(entryList.getEntries().length, 1);
+            const entry = entryList.getEntries()[0];
+            assert_equals(entry.entryType, "layout-shift");
+            assert_equals(entry.name, "");
+            assert_greater_than_equal(entry.startTime, startTime);
+            assert_less_than_equal(entry.startTime, endTime);
+            assert_equals(entry.duration, 0.0);
+            // The layout shift value should be:
+            // 300 * (100 + 60) * (60 / maxDimension) / viewport size.
+            assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
+            // We should see that there was a click input entry.
+            assert_equals(entry.hadRecentInput, false);
+            assert_greater_than_equal(timeAfterClick, entry.lastInputTime);
+            resolve();
+          })
+        );
+        observer.observe({ entryTypes: ['layout-shift'] });
+        // User input event
+        clickAndBlockMain('button').then(() => {
+          // 600ms delay
+          step_timeout(function() {
+            timeAfterClick = performance.now();
+            // Modify the position of the div.
+            document.getElementById('myDiv').style = "top: 60px";
+          }, 600);
+        });
+      });
+    }, 'Layout shift right after user input is observable via PerformanceObserver.');
+  </script>
+
+</body>