Implement object-fit CSS property
[WebKit-https.git] / LayoutTests / media / video-object-fit.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>object-fit, video</title>
5     <style>
6       video {
7         width: 120px;
8         height: 120px;
9         border: 1px solid blue;
10         background-color: gray;
11         margin: 10px;
12       }
13     </style>
14     <script src=media-file.js></script>
15     <script>
16         if (window.testRunner)
17           testRunner.waitUntilDone();
18
19         function init()
20         {
21             setSrcByTagName("video", findMediaFile("video", "content/test"));
22
23             var totalCount = document.getElementsByTagName('video').length;
24             var count = totalCount;
25             document.addEventListener("canplaythrough", function () {
26                 if (!--count) {
27                     if (window.testRunner)
28                         setTimeout(function() { testRunner.notifyDone(); }, totalCount * 150);
29                 }
30             }, true);
31
32             if (window.testRunner) {
33                 setTimeout(function() {
34                     document.body.appendChild(document.createTextNode('FAIL'));
35                     if (window.testRunner)
36                         testRunner.notifyDone();
37                 }, 1500);
38             }
39         }
40     </script>
41
42   </head>
43   <body onload="init();">
44     <video style="object-fit: fill"></video>
45     <video style="object-fit: contain"></video>
46     <video style="object-fit: cover"></video>
47     <video style="object-fit: none"></video>
48     <video style="object-fit: scale-down"></video>
49   </body>
50 </html>