Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(18)

Unified Diff: LayoutTests/media/video-object-fit-expected.html

Issue 22482004: Add support for the object-fit CSS property. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Oops, sorry! Forgot to update UseCounter.cpp Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698