1 files changed, 42 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-video-element/resize-during-playback.html b/testing/web-platform/tests/html/semantics/embedded-content/the-video-element/resize-during-playback.html
new file mode 100644
index 0000000000..e1f35768bc
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/embedded-content/the-video-element/resize-during-playback.html
@@ -0,0 +1,42 @@
+<!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`);
+
+    const eventWatcher = new EventWatcher(t, video, ['resize', 'playing', 'error', 'ended']);
+
+    // Load the video and wait for initial resize event.
+    video.muted = true;
+    video.preload = 'auto';
+    video.onerror = t.unreached_func("error during playback");
+    video.src = `/media/400x300-red-resize-200x150-green.${format}`;
+    document.body.appendChild(video);
+
+    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>