Resize event should be fired at PictureInPictureWindow?

[cadubentzen]

Reading the spec, I noticed in section 4.4:

When the size of the Picture-in-Picture window associated with pictureInPictureElement changes, the user agent MUST queue a task to fire an event with the name resize at pictureInPictureElement.

However, from my understanding, the resize event is fired at the PictureInPictureWindow instance, and not pictureInPictureElement?

[beaufortfrancois]

The resize event is fired on a PictureInPictureWindow at pictureInPictureElement. The at means pictureInPictureElement is the target. See https://dom.spec.whatwg.org/#concept-event-fire

In https://w3c.github.io/picture-in-picture/#eventdef-pictureinpicturewindow-resize, it says

resize Fired on a PictureInPictureWindow when it changes size.

[beaufortfrancois]

let pipWindow;

videoElement.addEventListener('enterpictureinpicture', function(event) {
  pipWindow = event.pictureInPictureWindow;
  console.log(`> Window size is ${pipWindow.width}x${pipWindow.height}`);
  pipWindow.addEventListener('resize', onPipWindowResize);
});

videoElement.addEventListener('leavepictureinpicture', function(event) {
  pipWindow.removeEventListener('resize', onPipWindowResize);
});

function onPipWindowResize(event) {
  console.log(`> Window size changed to ${pipWindow.width}x${pipWindow.height}`);
  // TODO: Change video quality based on Picture-in-Picture window size.
}

[cadubentzen]

I think I got a bit lost in the semantics.

Thank you for the clarification, in special for the citation of the DOM specification 😄