blob: 1b057bbeac322e4bcdaa2ab7d1ff664b06402846 [file] [log] [blame]
<!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>