3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Test: Testing automatic placement of grid items with 'order'
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
10 <link rel=
"help" href=
"http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
11 <link rel=
"help" href=
"http://dev.w3.org/csswg/css-flexbox-1/#order-property">
12 <link rel=
"match" href=
"grid-order-placement-auto-001-ref.html">
13 <style type=
"text/css">
16 border: 1px solid green
;
17 grid-template-columns: 20px 20px 20px 20px;
18 grid-template-rows: 20px 20px 20px;
20 grid-auto-columns: 20px;
32 grid-column: 2 / span
1;
36 grid-column: 2 / span
3;
39 .test1 .c, .test2 .c {
41 grid-column: auto
/ span
3;
47 grid-column: 2 / span
3;
52 grid-column: 2 / span
1;
68 grid-column: 2 / span
3;
73 grid-row: auto
/ span
2;
74 grid-column: auto
/ span
3;
79 grid-row: auto
/ span
2;
80 grid-column: auto
/ span
3;
86 grid-column: auto
/ span
3;
92 grid-column: auto
/ span X
;
98 grid-column: auto
/ span
1;
105 <div class=
"grid test1">
106 <span class=
"a">a
</span>
107 <span class=
"b">b
</span>
108 <span class=
"c">c
</span>
109 <span class=
"d">d
</span>
110 <span class=
"d">D
</span>
111 <span class=
"e">e
</span>
114 <div class=
"grid test2">
115 <span class=
"a">a
</span>
116 <span class=
"b">b
</span>
117 <span class=
"c">c
</span>
118 <span class=
"d">d
</span>
119 <span class=
"d">D
</span>
120 <span class=
"e">e
</span>
123 <div class=
"grid test3">
124 <span class=
"a">a
</span>
125 <span class=
"b">b
</span>
126 <span class=
"c">c
</span>
127 <span class=
"d">d
</span>
128 <span class=
"d">D
</span>
129 <span class=
"e">e
</span>
132 <div class=
"grid test4">
133 <span class=
"c">c
</span>
134 <span class=
"d">d
</span>
135 <span class=
"d">D
</span>
136 <span class=
"e">e
</span>
139 <div class=
"grid test5">
140 <span class=
"c">c
</span>
141 <span class=
"d">d
</span>
142 <span class=
"d">D
</span>
143 <span class=
"e">e
</span>
146 <div class=
"grid test1">
147 <span class=
"a">a
</span>
148 <span class=
"b">b
</span>
149 <span class=
"c">c
</span>
150 <span class=
"test6">d
</span>
151 <span class=
"test6">D
</span>
152 <span class=
"e">e
</span>