<!doctype html>
<html>
<head>
<title>video element resizing during playback</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/media.html#concept-video-intrinsic-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script>
for (const format of ['mp4', 'webm']) {
  promise_test(async (t) => {
    const video = document.createElement('video');
    assert_implements_optional(video.canPlayType(`video/${format}`), `${format} supported`);

    // Load the video and wait for initial resize event.
    video.src = `/media/400x300-red-resize-200x150-green.${format}`;
    video.muted = true;
    video.preload = 'auto';
    document.body.appendChild(video);
    const eventWatcher = new EventWatcher(t, video, ['resize', 'playing', 'error', 'ended']);
    await eventWatcher.wait_for(['resize']);
    assert_equals(video.videoWidth, 400, 'width after first resize event');
    assert_equals(video.videoHeight, 300, 'height after first resize event');

    // Now play and wait for a second resize event.
    const playPromise = video.play();
    if (playPromise) {
      playPromise.catch(t.unreached_func("play rejected"));
    }
    await eventWatcher.wait_for(['playing', 'resize']);
    assert_equals(video.videoWidth, 200, 'width after second resize event');
    assert_equals(video.videoHeight, 150, 'height after second resize event');
  }, `${format} video`);
}
</script>
</body>
</html>
