layout-instability/buffer-layout-shift.html

<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Layout Instability entries are not available via the performance timeline</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; background: blue; }
</style>
<div id='myDiv'></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
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 => {
    new PerformanceObserver(t.step_func(list => {
      const endTime = performance.now();
      assert_equals(list.getEntries().length, 1);
      const entry = list.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));

      // The entry should not be available via getEntries* methods.
      assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries');
      assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries');
      assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries');
      resolve();
    })).observe({type: 'layout-shift'});
    // Modify the position of the div.
    document.getElementById('myDiv').style = "top: 60px";
  });
}, 'Layout shift before onload is not buffered into the performance timeline.');
</script>

</body>