3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: margin-left:auto + align-self
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1176793">
10 <link rel=
"help" href=
"https://drafts.csswg.org/css-grid/#auto-margins">
11 <link rel=
"match" href=
"grid-item-margin-left-auto-004-ref.html">
12 <style type=
"text/css">
14 color:black
; background-color:white
; font-size:16px; padding:0; margin:0;
16 separator
{ clear:both
; display:block
; height:6px; }
23 /* border-block-start: 2px solid blue; */
24 border-block-start: 2px solid black
;
25 grid-template: 1px 32px 3px / 3px 20px 2px;
30 grid-area: 2 / 2; /* the center 32 x 20 pixel area */
35 border-block-start: 2px solid blue
;
36 border-inline-start: 2px solid lime
;
37 margin: 1px 1px 2px 2px;
44 top:0;left:0;bottom:0;right:0;
45 background: lightgrey
;
47 abs1
{ grid-area: 1 / 1 / 2 / 4; }
48 abs2
{ grid-area: 1 / 1 / 4 / 2; }
49 abs3
{ grid-area: 1 / 3 / 4 / 4; }
50 abs4
{ grid-area: 3 / 1 / 4 / 4; }
52 .hl { writing-mode: horizontal-tb
; direction:ltr
; }
53 .hr { writing-mode: horizontal-tb
; direction:rtl
; }
54 .vl { writing-mode: vertical-lr
; }
55 .vr { writing-mode: vertical-rl
; }
56 .vlr { writing-mode: vertical-lr
; direction:rtl
; }
57 .vrl { writing-mode: vertical-rl
; direction:ltr
; }
59 .hl { -webkit-writing-mode: horizontal-tb
; direction:ltr
; }
60 .hr { -webkit-writing-mode: horizontal-tb
; direction:rtl
; }
61 .vl { -webkit-writing-mode: vertical-lr
; }
62 .vr { -webkit-writing-mode: vertical-rl
; }
63 .vlr { -webkit-writing-mode: vertical-lr
; direction:rtl
; }
64 .vrl { -webkit-writing-mode: vertical-rl
; direction:ltr
; }
66 .astart { align-self:start
; }
67 .aend { align-self:end
; }
68 .aflexstart { align-self:flex-start
; }
69 .aflexend { align-self:flex-end
; }
70 .aselfstart { align-self:self-start
; }
71 .aselfend { align-self:self-end
; }
72 .acenter { align-self:center
; }
73 .aleft { align-self:left
; }
74 .aright { align-self:right
; }
75 .astretch1 { align-self:stretch
; }
76 .astretch2 { align-self:stretch
; width:13px; height:auto
; }
77 .astretch3 { align-self:stretch
; height:auto
; }
78 .astretch4 { align-self:stretch
; width:auto
; }
79 .astretch5 { align-self:stretch
; width:auto
; max-width:13px; }
80 .astretch6 { align-self:stretch
; height:auto
; max-height:9px; }
81 .astretch7 { align-self:stretch
; width:auto
; height:auto
; max-width:13px; max-height:9px; }
82 .aauto { align-self:auto
; }
89 var gridwm
= [ "vr", "vlr", "vrl" ]; // *-003.html tests hl/hr/vl
90 var wm
= [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
91 var test
= [ "start", "end", "flexstart", "flexend", "center", "left", "right",
92 "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
93 "stretch6", "stretch7", "auto" ];
94 for (var i
= 0; i
< gridwm
.length
; ++i
) {
95 for (var j
= 0; j
< wm
.length
; ++j
) {
96 for (var k
= 0; k
< test
.length
; ++k
) {
97 var div
= document
.createElement("div");
98 div
.className
= "grid " + gridwm
[i
];
99 var span
= document
.createElement("span");
100 span
.className
= wm
[j
] + " a" + test
[k
];
101 div
.appendChild(span
);
102 div
.appendChild(document
.createElement("abs1"));
103 div
.appendChild(document
.createElement("abs2"));
104 div
.appendChild(document
.createElement("abs3"));
105 div
.appendChild(document
.createElement("abs4"));
107 document
.body
.appendChild(div
)
109 document
.body
.appendChild(document
.createElement("separator"));