3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Reference: stretching video items with auto-margins and/or orthogonal writing-mode
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
10 <style type=
"text/css">
11 * { vertical-align: top
; }
14 border: 3px solid grey
;
16 padding: 10px 4px 3px 6px;
23 background: lightgrey
;
28 .m { margin: 7px 3px 1px 5px; }
29 .p { padding: 3px 1px 5px 7px; }
30 .hma10 { margin: 7px 3px 1px 0; }
31 .hmaa { margin: 7px 0 1px 0; }
32 .vma10 { margin: 0 7px 3px 1px; }
33 .vmaa { margin: 0 7px 0 1px; }
35 .js { justify-self: start
; }
36 .je { justify-self: end
; }
37 .jc { justify-self: center
; }
38 .as { align-self: start
; }
39 .ae { align-self: end
; }
40 .ac { align-self: center
; }
42 .vr { writing-mode: vertical-rl
; }
47 <div class=
"grid"><video class=
"m" src=
"support/colors-16x8.webm"></div>
48 <div class=
"grid"><video class=
"hma10 je" src=
"support/colors-16x8.webm"></div>
49 <div class=
"grid"><video class=
"hmaa jc" src=
"support/colors-16x8.webm"></div>
50 <div class=
"grid"><video class=
"vr hma10 je" src=
"support/colors-16x8.webm"></div>
51 <div class=
"grid"><video class=
"vr hmaa jc" src=
"support/colors-16x8.webm"></div>
52 <div class=
"grid"><video class=
"vr" src=
"support/colors-16x8.webm"></div>
54 <div class=
"grid"><video class=
"vma10 ae" src=
"support/colors-16x8.webm"></div>
55 <div class=
"grid"><video class=
"vmaa ac" src=
"support/colors-16x8.webm"></div>
56 <div class=
"grid"><video class=
"vr vma10 ae" src=
"support/colors-16x8.webm"></div>
57 <div class=
"grid"><video class=
"vr vmaa ac" src=
"support/colors-16x8.webm"></div>
58 <div class=
"grid"><video class=
"vr p vma10 ae" src=
"support/colors-16x8.webm"></div>
59 <div class=
"grid"><video class=
"vr p vmaa ac" src=
"support/colors-16x8.webm"></div>
61 <div class=
"grid"><video class=
"mxw m" src=
"support/colors-16x8.webm"></div>
62 <div class=
"grid"><video class=
"mxw hma10 je" src=
"support/colors-16x8.webm"></div>
63 <div class=
"grid"><video class=
"mxw hmaa jc" src=
"support/colors-16x8.webm"></div>
64 <div class=
"grid"><video class=
"mxw vr hma10 je" src=
"support/colors-16x8.webm"></div>
65 <div class=
"grid"><video class=
"mxw vr hmaa jc" src=
"support/colors-16x8.webm"></div>
66 <div class=
"grid"><video class=
"mxw vr" src=
"support/colors-16x8.webm"></div>
68 <div class=
"grid"><video class=
"mxh m" src=
"support/colors-16x8.webm"></div>
69 <div class=
"grid"><video class=
"mxh hma10 je" src=
"support/colors-16x8.webm"></div>
70 <div class=
"grid"><video class=
"mxh hmaa jc" src=
"support/colors-16x8.webm"></div>
71 <div class=
"grid"><video class=
"mxh vr hma10 je" src=
"support/colors-16x8.webm"></div>
72 <div class=
"grid"><video class=
"mxh vr hmaa jc" src=
"support/colors-16x8.webm"></div>
73 <div class=
"grid"><video class=
"mxh vr" src=
"support/colors-16x8.webm"></div>
103 var items
= document
.querySelectorAll('video')
104 for (var i
= 0; i
< items
.length
; ++i
) {
106 item
.style
.width
= sizes
[i
][0];
107 item
.style
.height
= sizes
[i
][1];