video-intrinsic-width-height.html (2427B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>video element intrinsic width/height</title> 5 <link rel="author" title="Sammy Gill" href="sammy.gill@apple.com" /> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7524" /> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements" /> 8 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio" /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 </head> 12 <body style="width: 500px"> 13 <div id="log"></div> 14 <video title="no width/height attributes" 15 data-expected-width="300" data-expected-height="150"></video> 16 <video title="only width attribute" 17 data-expected-width="100" data-expected-height="150" 18 width="100"></video> 19 <video title="only height attribute" 20 data-expected-width="300" data-expected-height="100" 21 height="100"></video> 22 <video title="both width/height attributes" 23 data-expected-width="100" data-expected-height="100" 24 width="100" height="100"></video> 25 <!-- A width:height ratio other than 2:1 and overriding the specified style must be used to 26 verify that width/height does not influence intrinsic ratio --> 27 <video title="both width/height attributes and style" 28 data-expected-width="300" data-expected-height="150" 29 width="100" height="100" style="width: auto; height: auto; aspect-ratio: auto"></video> 30 <!-- Same, but now keeping the `aspect-ratio` presentational hint --> 31 <video title="both width/height attributes and style keeping aspect-ratio" 32 data-expected-width="500" data-expected-height="500" 33 width="100" height="100" style="width: auto; height: auto"></video> 34 <script> 35 Array.prototype.forEach.call(document.querySelectorAll('video'), function(video) 36 { 37 test(function() 38 { 39 assert_equals(video.clientWidth, parseInt(video.dataset.expectedWidth), "width"); 40 assert_equals(video.clientHeight, parseInt(video.dataset.expectedHeight), "height"); 41 }, video.title); 42 }); 43 </script> 44 </body> 45 </html>