Implement object-fit CSS property
[WebKit-https.git] / LayoutTests / media / video-object-fit-change.html
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>changing object-fit values on video elements</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/media-file.js"></script>
15     <script>
16         if (window.testRunner)
17           testRunner.waitUntilDone();
18
19         function init()
20         {
21             setSrcByTagName("video", findMediaFile("video", "../../media/content/test"));
22
23             var totalCount = document.getElementsByTagName('video').length;
24             var count = totalCount;
25             document.addEventListener("canplaythrough", function () {
26                 if (!--count)
27                     setTimeout(function() { changeStyle(); }, 500);
28             }, true);
29
30             if (window.testRunner) {
31                 setTimeout(function() {
32                     document.body.appendChild(document.createTextNode('FAIL'));
33                     if (window.testRunner)
34                         testRunner.notifyDone();
35                 }, 1500);
36             }
37         }
38
39         function changeStyle()
40         {
41             video1.style.objectFit = 'contain';
42             video2.style.objectFit = 'cover';
43             video3.style.objectFit = 'fill';
44             video4.style.objectFit = 'scale-down';
45
46             if (window.testRunner) {
47                 setTimeout(function() { testRunner.notifyDone(); }, 500);
48             }
49         }
50     </script>
51
52   </head>
53   <body onload="init();">
54     <video id="video1" style="object-fit:fill;"></video>
55     <video id="video2" style="object-fit:contain;"></video>
56     <video id="video3" style="object-fit:cover;"></video>
57     <video id="video4" style="object-fit:none;"></video>
58   </body>
59 </html>