event-timing/pointerdown-pointerup-no-overlap.html

<!DOCTYPE html>
<html>
<meta charset=utf-8 />
<title>Event Timing: pointerdown and pointerup should not overlap when there is a paint in between</title>
<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/testdriver-actions.js></script>
<script src=resources/event-timing-test-utils.js></script>
<button id='button'>Click me.</button>
<script>
  promise_test(async t => {
    assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');
    const button = document.getElementById('button');
    const observedEntries = [];

    button.addEventListener('pointerdown', () => {
      mainThreadBusy(30);
    });
    button.addEventListener('pointerup', () => {
      mainThreadBusy(30);
    });
    button.addEventListener('click', () => {
      mainThreadBusy(150);
    });

    const observerPromise = new Promise(resolve => {
      new PerformanceObserver(entryList => {
        observedEntries.push(...entryList.getEntries().filter(entry =>
          entry.name === 'pointerdown' || entry.name === 'pointerup' || entry.name === 'click'
        ));

        // We expect pointerdown, pointerup, and click.
        if (observedEntries.length >= 3) {
          resolve();
        }
      }).observe({type: 'event', durationThreshold: 16, buffered: true});
    });

    const actions1 = new test_driver.Actions();
    await actions1
      .addPointer("testPointer", "mouse")
      .pointerMove(0, 0, {origin: button})
      .pointerDown({button: actions1.ButtonType.LEFT})
      .pause(50)
      .send();

    // Wait for a paint to occur
    await afterNextPaint();

    // Perform pointerup
    const actions2 = new test_driver.Actions();
    await actions2
      .addPointer("testPointer", "mouse")
      .pointerMove(0, 0, {origin: button})
      .pointerUp({button: actions2.ButtonType.LEFT})
      .send();

    await observerPromise;

    const pointerdownEntry = observedEntries.find(e => e.name === 'pointerdown');
    const pointerupEntry = observedEntries.find(e => e.name === 'pointerup');
    const clickEntry = observedEntries.find(e => e.name === 'click');

    assert_true(!!pointerdownEntry, 'Should have pointerdown entry');
    assert_true(!!pointerupEntry, 'Should have pointerup entry');
    assert_true(!!clickEntry, 'Should have click entry');

    // Calculate end times: startTime + duration.
    const pointerdownEndTime = pointerdownEntry.startTime + pointerdownEntry.duration;
    const pointerupStartTime = pointerupEntry.startTime;

    // pointerdown should complete BEFORE pointerup starts.
    assert_less_than_equal(pointerdownEndTime, pointerupStartTime,
      'pointerdown should end before or when pointerup starts (no overlap)');
  }, 'pointerdown and pointerup should not overlap when there is no pointerdown handler');
</script>
</html>