3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Reference: stretching fieldset 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">
13 border: 3px solid grey
;
15 padding: 10px 4px 3px 6px;
22 background: lightgrey
;
24 legend
{ border: 1px dashed blue
;}
25 x
{ display:block
; width:16px; height:16px; }
26 t
{ display:block
; width:20px; height:20px; }
27 i
{ display:block
; background:grey
; }
29 .m { margin: 7px 3px 1px 5px; }
30 .p { padding: 3px 1px 5px 7px; }
31 .hma10 { margin: 7px 3px 1px 0; }
32 .hmaa { margin: 7px 0 1px 0; }
33 .vma10 { margin: 0 7px 3px 1px; }
34 .vmaa { margin: 0 7px 0 1px; }
36 .js { justify-self: start
; }
37 .je { justify-self: end
; }
38 .jc { justify-self: center
; }
39 .as { align-self: start
; }
40 .ae { align-self: end
; }
41 .ac { align-self: center
; }
43 .vr { writing-mode: vertical-rl
; }
48 <div class=
"grid"><fieldset class=
"m" style=
"width:90px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
49 <div class=
"grid"><fieldset class=
"hma10 je" style=
"width:22px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
50 <div class=
"grid"><fieldset class=
"hmaa jc" style=
"width:22px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
51 <div class=
"grid"><fieldset class=
"vr hma10 je" style=
"width:37px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
52 <div class=
"grid"><fieldset class=
"vr hmaa jc" style=
"width:37px; height:50px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
53 <div class=
"grid"><fieldset class=
"vr" style=
"height:58px; width:98px"><legend><x></x></legend><i><t></t></i></fieldset></div>
55 <div class=
"grid"><fieldset class=
"vma10 ae" style=
"width:90px; height:37px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
56 <div class=
"grid"><fieldset class=
"vmaa ac" style=
"width:90px; height:37px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
57 <div class=
"grid"><fieldset class=
"vr vma10 ae" style=
"width:90px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
58 <div class=
"grid"><fieldset class=
"vr vmaa ac" style=
"width:90px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
59 <div class=
"grid"><fieldset class=
"vr p vma10 ae" style=
"width:82px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>
60 <div class=
"grid"><fieldset class=
"vr p vmaa ac" style=
"width:82px; height:22px;"><legend><x></x></legend><i><t></t></i></fieldset></div>