loaf-ui-event-render-start.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /long-animation-frame/tentative/loaf-ui-event-render-start.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>Long Animation Frame Timing: UI events and renderStart</title>

<meta name="timeout" content="long">

<script src=/resources/testdriver.js></script>

<script src=/resources/testdriver-actions.js></script>

<script src=/resources/testdriver-vendor.js></script>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/utils.js"></script>

<body>

<h1>Long Animation Frame: UI events and renderStart</h1>

<div id="log"></div>

<script>

promise_test(async t => {

  const BUSY_DURATION_1 = 150;

  const BUSY_DURATION_2 = 250;

  const eventPromise = new Promise(resolve => document.body.addEventListener("pointermove", () => {

    busy_wait(BUSY_DURATION_1);

    requestAnimationFrame(() => busy_wait(BUSY_DURATION_2));

    resolve();

  }, {passive: true}));

  const actions = new test_driver.Actions();

  await actions.pointerMove(10, 10, {origin: document.body})

    .pointerDown()

    .pointerMove(3, 3)

    .pointerUp()

    .send();

  const scriptPredicate = s => s.invoker === "BODY.onpointermove";

  const loaf = await new Promise(resolve =>

    new PerformanceObserver(entries => {

      const entry = entries.getEntries().find(

        e => e.scripts.some(scriptPredicate));

      resolve(entry);

    }).observe({type: "long-animation-frame", buffered: true}));

  const script = loaf.scripts.find(scriptPredicate)

  assert_greater_than_equal(loaf.renderStart, script.startTime + script.duration);

  assert_greater_than_equal(loaf.blockingDuration, BUSY_DURATION_1 + BUSY_DURATION_2 - 50);

}, "UI events should always be before renderStart but still affect blockingDuration")

</script>

</body>