3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
9 <title>CSS Test: 'object-fit: cover' on video element, with a WebM video and with various 'object-position' values
</title>
10 <link rel=
"author" title=
"Daniel Holbert" href=
"mailto:dholbert@mozilla.com">
11 <link rel=
"help" href=
"http://www.w3.org/TR/css3-images/#sizing">
12 <link rel=
"help" href=
"http://www.w3.org/TR/css3-images/#the-object-fit">
13 <link rel=
"help" href=
"http://www.w3.org/TR/css3-images/#the-object-position">
14 <link rel=
"match" href=
"object-fit-cover-webm-002-ref.html">
15 <style type=
"text/css">
17 border: 1px dashed gray
;
20 image-rendering: -moz-crisp-edges
;
39 .tr { object-position: top right
}
40 .bl { object-position: bottom left
}
41 .tl { object-position: top
25% left
25% }
42 .br { object-position: bottom
1px right
2px }
44 .tc { object-position: top
3px left
50% }
45 .cr { object-position: top
50% right
25% }
50 <video src=
"colors-8x16.webm" class=
"bigWide tr"></video>
51 <video src=
"colors-8x16.webm" class=
"bigWide bl"></video>
52 <video src=
"colors-8x16.webm" class=
"bigWide tl"></video>
53 <video src=
"colors-8x16.webm" class=
"bigWide br"></video>
54 <video src=
"colors-8x16.webm" class=
"bigWide tc"></video>
55 <video src=
"colors-8x16.webm" class=
"bigWide cr"></video>
56 <video src=
"colors-8x16.webm" class=
"bigWide"></video>
59 <video src=
"colors-8x16.webm" class=
"bigTall tr"></video>
60 <video src=
"colors-8x16.webm" class=
"bigTall bl"></video>
61 <video src=
"colors-8x16.webm" class=
"bigTall tl"></video>
62 <video src=
"colors-8x16.webm" class=
"bigTall br"></video>
63 <video src=
"colors-8x16.webm" class=
"bigTall tc"></video>
64 <video src=
"colors-8x16.webm" class=
"bigTall cr"></video>
65 <video src=
"colors-8x16.webm" class=
"bigTall"></video>
68 <video src=
"colors-8x16.webm" class=
"small tr"></video>
69 <video src=
"colors-8x16.webm" class=
"small bl"></video>
70 <video src=
"colors-8x16.webm" class=
"small tl"></video>
71 <video src=
"colors-8x16.webm" class=
"small br"></video>
72 <video src=
"colors-8x16.webm" class=
"small tc"></video>
73 <video src=
"colors-8x16.webm" class=
"small cr"></video>
74 <video src=
"colors-8x16.webm" class=
"small"></video>