layout-instability/input-timestamp.html

<!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>