Index: LayoutTests/media/video-object-fit-expected.html |
diff --git a/LayoutTests/media/video-object-fit-expected.html b/LayoutTests/media/video-object-fit-expected.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..7b1f56132f377ae523f38cb35fd3d3cea6211d00 |
--- /dev/null |
+++ b/LayoutTests/media/video-object-fit-expected.html |
@@ -0,0 +1,65 @@ |
+<!DOCTYPE html> |
+<html> |
+ <head> |
+ <title>object-fit, video</title> |
+ <style> |
+ .group > div { |
+ display: inline-block; |
+ overflow: hidden; |
+ width: 120px; |
+ height: 120px; |
+ border: 1px solid blue; |
+ background-color: gray; |
+ margin: 10px; |
+ } |
+ |
+ .group > * > * { display: block; } |
+ .group > *:nth-child(1) > * { width:100%; height:100%; } |
+ .group > *:nth-child(2) > * { width:100%; margin-top:15px; } |
+ .group > *:nth-child(3) > * { height:100%; margin-left:-20px; } |
+ .group > *:nth-child(4) > * { margin-left:-100px; margin-top:-60px; } |
+ .group > *:nth-child(5) > * { width:100%; margin-top:15px; } |
+ </style> |
+ <script src=media-file.js></script> |
+ <script> |
+ if (window.testRunner) |
+ testRunner.waitUntilDone(); |
+ |
+ function init() |
+ { |
+ setSrcByTagName("video", findMediaFile("video", "content/test")); |
+ |
+ var totalCount = document.getElementsByTagName('video').length; |
+ var count = totalCount; |
+ document.addEventListener("canplaythrough", function () { |
+ if (!--count) { |
+ if (window.testRunner) |
+ setTimeout(function() { testRunner.notifyDone(); }, totalCount * 150); |
+ } |
+ }, true); |
+ |
+ if (window.testRunner) { |
+ setTimeout(function() { |
+ document.body.appendChild(document.createTextNode('FAIL')); |
+ if (window.testRunner) |
+ testRunner.notifyDone(); |
+ }, 1500); |
+ } |
+ } |
+ </script> |
+ |
+ </head> |
+ <body onload="init();"> |
+ <div class="group"> |
+ <!-- Note about the first video here: There's no way to unlock a video from its |
+ aspect ratio without using object-fit:fill, so we have to use it here as well |
+ as in the test file. In order to actually being able to detect failures, use a |
+ different background color. --> |
+ <div style="background:salmon;"><video style="object-fit:fill;"></video></div> |
+ <div><video></video></div> |
+ <div><video></video></div> |
+ <div><video></video></div> |
+ <div><video></video></div> |
+ </div> |
+ </body> |
+</html> |