resize-during-playback.html (1574B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>video element resizing during playback</title> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/media.html#concept-video-intrinsic-width"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 <div id="log"></div> 11 <script> 12 for (const format of ['mp4', 'webm']) { 13 promise_test(async (t) => { 14 const video = document.createElement('video'); 15 assert_implements_optional(video.canPlayType(`video/${format}`), `${format} supported`); 16 17 const eventWatcher = new EventWatcher(t, video, ['resize', 'playing', 'error', 'ended']); 18 19 // Load the video and wait for initial resize event. 20 video.muted = true; 21 video.preload = 'auto'; 22 video.onerror = t.unreached_func("error during playback"); 23 video.src = `/media/400x300-red-resize-200x150-green.${format}`; 24 document.body.appendChild(video); 25 26 await eventWatcher.wait_for(['resize']); 27 assert_equals(video.videoWidth, 400, 'width after first resize event'); 28 assert_equals(video.videoHeight, 300, 'height after first resize event'); 29 30 // Now play and wait for a second resize event. 31 const playPromise = video.play(); 32 if (playPromise) { 33 playPromise.catch(t.unreached_func("play rejected")); 34 } 35 await eventWatcher.wait_for(['playing', 'resize']); 36 assert_equals(video.videoWidth, 200, 'width after second resize event'); 37 assert_equals(video.videoHeight, 150, 'height after second resize event'); 38 }, `${format} video`); 39 } 40 </script> 41 </body> 42 </html>