OLD | NEW |
| 1 <!DOCTYPE html> |
1 <html> | 2 <html> |
2 <head> | 3 <head> |
3 <style> video { zoom: 150%; border: 3px solid red; } </style> | 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> |
4 <script src=media-file.js></script> | 14 <script src=media-file.js></script> |
5 <script> | 15 <script> |
6 if (window.internals) | 16 if (window.testRunner) |
7 window.internals.settings.setMockScrollbarsEnabled(true); | 17 testRunner.waitUntilDone(); |
8 | 18 |
9 function init() | 19 function init() |
10 { | 20 { |
11 setSrcByTagName("video", findMediaFile("video", "content/test")); | 21 setSrcByTagName("video", findMediaFile("video", "content/test")); |
12 | 22 |
13 var totalCount = document.getElementsByTagName('video').length; | 23 var totalCount = document.getElementsByTagName('video').length; |
14 var count = totalCount; | 24 var count = totalCount; |
15 document.addEventListener("canplaythrough", function () { | 25 document.addEventListener("canplaythrough", function () { |
16 if (!--count) { | 26 if (!--count) { |
17 if (window.testRunner) | 27 if (window.testRunner) |
18 setTimeout(function() { testRunner.notifyDone(); }, tota
lCount * 150); | 28 setTimeout(function() { testRunner.notifyDone(); }, tota
lCount * 150); |
19 } | 29 } |
20 }, true); | 30 }, true); |
21 | 31 |
22 if (window.testRunner) { | 32 if (window.testRunner) { |
23 testRunner.waitUntilDone(); | 33 setTimeout(function() { |
24 setTimeout(function() { | 34 document.body.appendChild(document.createTextNode('FAIL')); |
25 document.body.appendChild(document.createTextNode('FAIL')); | |
26 if (window.testRunner) | 35 if (window.testRunner) |
27 testRunner.notifyDone(); | 36 testRunner.notifyDone(); |
28 }, 1500); | 37 }, 1500); |
29 } | 38 } |
30 } | 39 } |
31 </script> | 40 </script> |
32 | 41 |
33 </head> | 42 </head> |
34 <body onload="init();"> | 43 <body onload="init();"> |
35 <p>150% zoom, with width and height attributes </p> | 44 <video style="object-fit: fill"></video> |
36 <video width=320 height=240></video><br> | 45 <video style="object-fit: contain"></video> |
37 <p>150% zoom, without width and height attributes </p> | 46 <video style="object-fit: cover"></video> |
38 <video></video><br> | 47 <video style="object-fit: none"></video> |
39 </body> | 48 <video style="object-fit: scale-down"></video> |
| 49 </body> |
40 </html> | 50 </html> |
OLD | NEW |