test_video_object_fit.html (1490B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1065766 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1065766</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1065766">Mozilla Bug 1065766</a> 14 <div id="content" style="display: none"> 15 <video id="myVideo"></video> 16 </div> 17 <pre id="test"> 18 <script type="application/javascript"> 19 "use strict"; 20 21 /** 22 * Test for Bug 1065766 23 * 24 * This test verifies that <video> has 'object-fit:contain' by default, set via 25 * a UA stylesheet. (This is different from the property's initial value, which 26 * is "fill".) 27 * 28 * Spec reference: 29 * https://html.spec.whatwg.org/multipage/rendering.html#video-object-fit 30 */ 31 32 function checkStyle(elem, expectedVal, message) { 33 is(window.getComputedStyle(elem).objectFit, expectedVal, message); 34 } 35 36 function main() { 37 const videoElem = document.getElementById("myVideo"); 38 39 checkStyle(videoElem, "contain", 40 "<video> should have 'object-fit:contain' by default"); 41 42 // Make sure we can override this behavior (i.e. that the UA stylesheet 43 // doesn't use "!important" to make this style mandatory): 44 videoElem.style.objectFit = "cover"; 45 checkStyle(videoElem, "cover", 46 "<video> should honor 'object-fit:cover' in inline style"); 47 } 48 49 main(); 50 </script> 51 </pre> 52 </body> 53 </html>