Event Timing reports EventTarget for more pointer events

event-timing/buffered-and-duration-threshold.html

@@ -19,7 +19,7 @@
       new PerformanceObserver(() => {
         resolve2();
       }).observe({type: "event", durationThreshold: 16});
-      await clickOnElementAndDelay('myDiv', 30);
+      await clickAndBlockMain('myDiv', { duration: 30 });
     });
     const afterFirstClick = performance.now();
     new PerformanceObserver(t.step_func(list => {
@@ -37,7 +37,7 @@
       });
     })).observe({type: 'event', durationThreshold: 16, buffered: true});
     // This should be the only click observed since the other one would not be buffered.
-    await clickOnElementAndDelay('myDiv', 30);
+    await clickAndBlockMain('myDiv', { duration: 30 } );
   });
 }, "PerformanceObserver buffering independent of durationThreshold");
 </script>

event-timing/click-timing.html

@@ -19,44 +19,53 @@
   let timeBeforeFirstClick;
   let timeAfterFirstClick;
   let timeAfterSecondClick;
-  let observedEntries = [];
-  async_test(function(t) {
-    assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');
-    new PerformanceObserver(t.step_func(entryList => {
-      observedEntries = observedEntries.concat(entryList.getEntries().filter(
-        entry => entry.name === 'pointerdown'));
-      if (observedEntries.length < 2)
-        return;
-
-      assert_not_equals(timeBeforeFirstClick, undefined);
-      assert_not_equals(timeAfterFirstClick, undefined);
-      assert_not_equals(timeAfterSecondClick, undefined);
-      // First click.
-      verifyClickEvent(observedEntries[0], 'button');
-      assert_between_exclusive(observedEntries[0].processingStart,
-          timeBeforeFirstClick,
-          timeAfterFirstClick,
-          "First click's processingStart");
-      assert_greater_than(timeAfterFirstClick, observedEntries[0].startTime,
-          "timeAfterFirstClick should be later than first click's start time.");
-
-      // Second click.
-      verifyClickEvent(observedEntries[1], 'button');
-      assert_between_exclusive(observedEntries[1].processingStart,
-          timeAfterFirstClick,
-          timeAfterSecondClick,
-          "Second click's processingStart");
-      assert_greater_than(timeAfterSecondClick, observedEntries[1].startTime,
+
+  function testExpectations(observedEntries) {
+    assert_not_equals(timeBeforeFirstClick, undefined);
+    assert_not_equals(timeAfterFirstClick, undefined);
+    assert_not_equals(timeAfterSecondClick, undefined);
+
+    // First click.
+    verifyClickEvent(observedEntries[0], 'button');
+    assert_between_exclusive(observedEntries[0].processingStart,
+        timeBeforeFirstClick,
+        timeAfterFirstClick,
+        "First click's processingStart");
+    assert_greater_than(timeAfterFirstClick, observedEntries[0].startTime,
+        "timeAfterFirstClick should be later than first click's start time.");
+
+    // Second click.
+    verifyClickEvent(observedEntries[1], 'button');
+    assert_between_exclusive(observedEntries[1].processingStart,
+        timeAfterFirstClick,
+        timeAfterSecondClick,
+        "Second click's processingStart");
+    assert_greater_than(timeAfterSecondClick, observedEntries[1].startTime,
           "timeAfterSecondClick should be later than second click's start time.");
-      t.done();
-    })).observe({type: 'event'});
+  }
+
+  promise_test(async function(t) {
+    assert_implements(window.PerformanceEventTiming, 'Event Timing is not supported.');
+
+    const observerPromise = new Promise(resolve => {
+      const observedEntries = [];
+      new PerformanceObserver(entryList => {
+        observedEntries.push(...entryList.getEntriesByName("pointerdown"));
+        if (observedEntries.length < 2)
+          return;
+        resolve(observedEntries);
+      }).observe({type: 'event'});
+    })
+
     timeBeforeFirstClick = performance.now();
-    clickAndBlockMain('button').then( () => {
-      timeAfterFirstClick = performance.now();
-      clickAndBlockMain('button').then(() => {
-        timeAfterSecondClick = performance.now();
-      })
-    });
+    await clickAndBlockMain('button');
+    timeAfterFirstClick = performance.now();
+    await clickAndBlockMain('button');
+    timeAfterSecondClick = performance.now();
+
+    const observedEntries = await observerPromise;
+    testExpectations(observedEntries);
+
   }, "Event Timing: compare click timings.");
 </script>
 </html>

event-timing/crossiframe.html

@@ -46,11 +46,14 @@
 
   promise_test(async t => {
     assert_implements(window.PerformanceEventTiming, "Event Timing is not supported");
+
     // Wait for load event so we can interact with the iframe.
     await new Promise(resolve => {
       window.addEventListener('load', resolve);
     });
+
     clickTimeMin = performance.now();
+
     let observedPointerDown = false;
     const observerPromise = new Promise(resolve => {
       new PerformanceObserver(t.step_func(entries => {
@@ -61,14 +64,16 @@
 
         assert_false(observedPointerDown,
             "Observer of main frames should only capture main-frame event-timing entries");
-        validateEntries(pointerDowns);
         observedPointerDown = true;
-        resolve();
+        resolve(pointerDowns);
       })).observe({type: 'event'});
     });
-    clickAndBlockMain('button').then(() => {
-      clickDone = performance.now();
-    });
+
+    await clickAndBlockMain('button');
+    clickDone = performance.now();
+    const pointerDowns = await observerPromise;
+    validateEntries(pointerDowns);
+
     const childFrameEntriesPromise = new Promise(resolve => {
       window.addEventListener("message", (event) => {
         // testdriver-complete is a webdriver internal event
@@ -80,13 +85,15 @@
         }
       }, false);
     });
+
     // Tap on the iframe, with an offset of 10 to target the div inside it.
     const actions = new test_driver.Actions()
         .pointerMove(10, 10, { origin: document.getElementById("iframe") })
         .pointerDown()
         .pointerUp();
     actions.send();
-    return Promise.all([observerPromise, childFrameEntriesPromise]);
+
+    await childFrameEntriesPromise;
   }, "Event Timing: entries should only be observable by its own frame.");
 
 </script>

event-timing/first-input-interactionid-tap.html

@@ -45,6 +45,8 @@
 
     assert_greater_than(firstInputInteractionId, 0, 'The first input entry should have a non-trivial interactionId');
     assert_equals(firstInputInteractionId, eventTimingPointerDownInteractionId, 'The first input entry should have the same interactionId as the event timing pointerdown entry');
+    assert_equals(firstInputInteractionId.target, eventTimingPointerDownInteractionId.target, 'The first input entry should have the same target as the event timing pointerdown entry');
+    assert_not_equals(firstInputInteractionId.target, null, 'The first input entry should have a non-null target');
 
   }, "The interactionId of the first input entry should match the same pointerdown entry of event timing when tap.");
 </script>

event-timing/resources/event-timing-test-utils.js

@@ -1,25 +1,45 @@
-// Clicks on the element with the given ID. It adds an event handler to the element which
-// ensures that the events have a duration of at least |delay|. Calls |callback| during
-// event handler if |callback| is provided.
-async function clickOnElementAndDelay(id, delay, callback) {
-  const element = document.getElementById(id);
-  const pointerdownHandler = () => {
-    mainThreadBusy(delay);
-    if (callback) {
-      callback();
-    }
-    element.removeEventListener("pointerdown", pointerdownHandler);
-  };
+function mainThreadBusy(ms) {
+  const target = performance.now() + ms;
+  while (performance.now() < target);
+}
+
+async function wait() {
+  return new Promise(resolve => step_timeout(resolve, 0));
+}
+
+async function raf() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
 
-  element.addEventListener("pointerdown", pointerdownHandler);
-  await click(element);
+async function afterNextPaint() {
+  await raf();
+  await wait();
 }
 
-function mainThreadBusy(duration) {
-  const now = performance.now();
-  while (performance.now() < now + duration);
+async function blockNextEventListener(target, eventType, duration = 120) {
+  return new Promise(resolve => {
+    target.addEventListener(eventType, () => {
+      mainThreadBusy(duration);
+      resolve();
+    }, { once: true });
+  });
 }
 
+async function clickAndBlockMain(id, options = {}) {
+  options = {
+    eventType: "pointerdown",
+    duration: 120,
+    ...options
+  };
+  const element = document.getElementById(id);
+
+  await Promise.all([
+    blockNextEventListener(element, options.eventType, options.duration),
+    click(element),
+  ]);
+}
+
+
 // This method should receive an entry of type 'event'. |isFirst| is true only when we want
 // to check that the event also happens to correspond to the first event. In this case, the
 // timings of the 'first-input' entry should be equal to those of this entry. |minDuration|
@@ -58,27 +78,7 @@ function verifyClickEvent(entry, targetId, isFirst=false, minDuration=104, event
   verifyEvent(entry, event, targetId, isFirst, minDuration);
 }
 
-function wait() {
-  return new Promise((resolve, reject) => {
-    step_timeout(() => {
-      resolve();
-    }, 0);
-  });
-}
 
-function clickAndBlockMain(id) {
-  return new Promise((resolve, reject) => {
-    clickOnElementAndDelay(id, 120, resolve);
-  });
-}
-
-function waitForTick() {
-  return new Promise(resolve => {
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(resolve);
-    });
-  });
-}
   // Add a PerformanceObserver and observe with a durationThreshold of |dur|. This test will
   // attempt to check that the duration is appropriately checked by:
   // * Asserting that entries received have a duration which is the smallest multiple of 8
@@ -115,7 +115,7 @@ async function testDuration(t, id, numEntries, dur, slowDur) {
   const clicksPromise = new Promise(async resolve => {
     for (let index = 0; index < numEntries; index++) {
       // Add some click events that has at least slowDur for duration.
-      await clickOnElementAndDelay(id, slowDur);
+      await clickAndBlockMain(id, { duration: slowDur });
     }
     resolve();
   });
@@ -154,11 +154,11 @@ async function testDuration(t, id, numEntries, dur, slowDur) {
       // These clicks are expected to be ignored, unless the test has some extra delays.
       // In that case, the test will verify the event duration to ensure the event duration is
       // greater than the duration threshold
-      await clickOnElementAndDelay(id, processingDelay);
+      await clickAndBlockMain(id, { duration: processingDelay });
     }
     // Send click with event duration equals to or greater than |durThreshold|, so the
     // observer promise can be resolved
-    await clickOnElementAndDelay(id, durThreshold);
+    await clickAndBlockMain(id, { duration: durThreshold });
     return observerPromise;
   }
 
@@ -269,7 +269,7 @@ async function testEventType(t, eventType, looseCount=false) {
   // Trigger two 'fast' events of the type.
   await applyAction(eventType, target);
   await applyAction(eventType, target);
-  await waitForTick();
+  await afterNextPaint();
   await new Promise(t.step_func(resolve => {
     testCounts(t, resolve, looseCount, eventType, initialCount + 2);
   }));
@@ -313,7 +313,7 @@ async function testEventType(t, eventType, looseCount=false) {
   // Cause a slow event.
   await applyAction(eventType, target);
 
-  await waitForTick();
+  await afterNextPaint();
 
   await observerPromise;
 }

event-timing/shadow-dom-null-target.html

@@ -42,7 +42,7 @@
     Math.ceil(span1Rect.y + span1Rect.height / 2)
   ).send();
 
-  await waitForTick();
+  await afterNextPaint();
 
   const observerPromise = new Promise(resolve => {
     new PerformanceObserver(t.step_func(entryList => {
@@ -60,7 +60,7 @@
     Math.ceil(span2Rect.y + span2Rect.height / 2)
   ).send();
 
-  await waitForTick();
+  await afterNextPaint();
 
   await observerPromise;
 }, "Event Timing: Move pointer within shadow DOM should create event-timing entry with null target.");