OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | |
3 <head> | |
4 <link href="resources/grid.css" rel="stylesheet"> | 2 <link href="resources/grid.css" rel="stylesheet"> |
5 <link href="resources/grid-alignment.css" rel="stylesheet"> | 3 <link href="resources/grid-alignment.css" rel="stylesheet"> |
6 <script src="../../resources/check-layout.js"></script> | |
7 <style> | 4 <style> |
8 body { | 5 |
9 margin: 0px; | 6 .grid { |
| 7 grid-template-columns: 200px 100px; |
| 8 grid-template-rows: 100px 50px; |
| 9 width: 500px; |
| 10 height: 350px; |
| 11 position: relative; |
| 12 font: 10px/1 Ahem; |
10 } | 13 } |
11 | 14 |
12 .grid { | 15 .gridGaps { |
13 position: relative; | 16 grid-gap: 10px 20px; |
14 } | 17 } |
15 .spanningTwo { | 18 |
16 grid-auto-columns: 20px; | |
17 grid-auto-rows: 40px; | |
18 grid-template-areas: "a a b" | |
19 "c d b"; | |
20 width: 300px; | |
21 height: 200px; | |
22 } | |
23 .spanningThree { | |
24 grid-auto-columns: 50px; | |
25 grid-auto-rows: 50px; | |
26 grid-template-areas: ". . . . . ." | |
27 ". b b b c ." | |
28 ". . . . c ." | |
29 ". . . . c ." | |
30 ". . . . . ."; | |
31 width: 550px; | |
32 height: 450px; | |
33 } | |
34 | |
35 .gridRowColumnGaps { | |
36 grid-row-gap: 20px; | |
37 grid-column-gap: 10px; | |
38 } | |
39 | |
40 .i1 { grid-row: 1; } | |
41 .i2 { grid-row: 2; } | |
42 .i3 { grid-row: 3; grid-column: 6; } | |
43 .i4 { grid-row: 4; grid-column: 6; } | |
44 .i5 { grid-row: 5; grid-column: 6; } | |
45 | |
46 .a { | |
47 grid-area: a; | |
48 background-color: blue; | |
49 } | |
50 .b { | |
51 grid-area: b; | |
52 background-color: lime; | |
53 } | |
54 .c { | |
55 grid-area: c; | |
56 background-color: purple; | |
57 } | |
58 .d { | |
59 grid-area: d; | |
60 background-color: orange; | |
61 } | |
62 .stretchedGrid { | |
63 grid-auto-columns: minmax(20px, auto); | |
64 grid-auto-rows: minmax(40px, auto); | |
65 } | |
66 | |
67 .cell { | |
68 width: 20px; | |
69 height: 40px; | |
70 } | |
71 .cell1 { | |
72 width: 20px; | |
73 height: 20px; | |
74 } | |
75 </style> | 19 </style> |
76 </head> | 20 <script src="../../resources/testharness.js"></script> |
| 21 <script src="../../resources/testharnessreport.js"></script> |
| 22 <script src="../../resources/check-layout-th.js"></script> |
77 <body onload="checkLayout('.grid')"> | 23 <body onload="checkLayout('.grid')"> |
78 | 24 <div id="log"></div> |
79 <p>This test checks that Content Distribution alignment works fine in combinatio
n with Self Alignmet and items span more than one track.</p> | 25 |
80 | 26 <p>This test checks that Content Distribution alignment works fine in combinatio
n with Self Alignmet and items in just one cell.</p> |
81 <div style="position: relative"> | 27 |
82 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</
p> | 28 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> |
83 <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300"
data-expected-height="200"> | 29 <div class="grid contentSpaceBetween itemsCenter"> |
84 <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="
0" data-expected-width="20" data-expected-height="40"></div> | 30 <!-- Dummy DIVs to help checking the result visually. --> |
85 <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="8
0" data-expected-width="20" data-expected-height="40"></div> | 31 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
86 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width
="20" data-expected-height="40"></div> | 32 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
87 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid
th="20" data-expected-height="40"></div> | 33 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
88 </div> | 34 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
89 </div> | 35 |
90 | 36 <div class="firstRowFirstColumn" |
91 <div style="position: relative"> | 37 data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expe
cted-height="10">X</div> |
92 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> | 38 <div class="firstRowSecondColumn" |
93 <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300"
data-expected-height="200"> | 39 data-offset-x="445" data-offset-y="45" data-expected-width="10" data-exp
ected-height="10">X</div> |
94 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> | 40 <div class="secondRowFirstColumn" |
95 <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160"
data-expected-width="20" data-expected-height="40"></div> | 41 data-offset-x="95" data-offset-y="320" data-expected-width="10" data-exp
ected-height="10">X</div> |
96 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width
="20" data-expected-height="40"></div> | 42 <div class="secondRowSecondColumn" |
97 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid
th="20" data-expected-height="40"></div> | 43 data-offset-x="445" data-offset-y="320" data-expected-width="10" data-ex
pected-height="10">X</div> |
98 </div> | 44 </div> |
99 </div> | 45 |
100 | 46 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> |
101 <div style="position: relative"> | 47 <div class="grid contentSpaceBetween itemsEnd"> |
102 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p
> | 48 <!-- Dummy DIVs to help checking the result visually. --> |
103 <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" d
ata-expected-height="200"> | 49 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
104 <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="
30" data-expected-width="20" data-expected-height="40"></div> | 50 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
105 <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="8
0" data-expected-width="20" data-expected-height="40"></div> | 51 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
106 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt
h="20" data-expected-height="40"></div> | 52 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
107 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid
th="20" data-expected-height="40"></div> | 53 |
108 </div> | 54 <div class="firstRowFirstColumn" |
109 </div> | 55 data-offset-x="190" data-offset-y="90" data-expected-width="10" data-exp
ected-height="10">X</div> |
110 | 56 <div class="firstRowSecondColumn" |
111 <div style="position: relative"> | 57 data-offset-x="490" data-offset-y="90" data-expected-width="10" data-exp
ected-height="10">X</div> |
112 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> | 58 <div class="secondRowFirstColumn" |
113 <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" d
ata-expected-height="200"> | 59 data-offset-x="190" data-offset-y="340" data-expected-width="10" data-ex
pected-height="10">X</div> |
114 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30
" data-expected-width="20" data-expected-height="40"></div> | 60 <div class="secondRowSecondColumn" |
115 <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130"
data-expected-width="20" data-expected-height="40"></div> | 61 data-offset-x="490" data-offset-y="340" data-expected-width="10" data-ex
pected-height="10">X</div> |
116 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt
h="20" data-expected-height="40"></div> | 62 </div> |
117 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid
th="20" data-expected-height="40"></div> | 63 |
118 </div> | 64 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p> |
119 </div> | 65 <div class="grid contentSpaceAround itemsCenter"> |
120 | 66 <!-- Dummy DIVs to help checking the result visually. --> |
121 <div style="position: relative"> | 67 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
122 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p
> | 68 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
123 <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" d
ata-expected-height="200"> | 69 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
124 <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y=
"40" data-expected-width="20" data-expected-height="40"></div> | 70 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
125 <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="8
0" data-expected-width="20" data-expected-height="40"></div> | 71 |
126 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt
h="20" data-expected-height="40"></div> | 72 <div class="firstRowFirstColumn" |
127 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid
th="20" data-expected-height="40"></div> | 73 data-offset-x="145" data-offset-y="95" data-expected-width="10" data-exp
ected-height="10">X</div> |
128 </div> | 74 <div class="firstRowSecondColumn" |
129 </div> | 75 data-offset-x="395" data-offset-y="95" data-expected-width="10" data-exp
ected-height="10">X</div> |
130 | 76 <div class="secondRowFirstColumn" |
131 <div style="position: relative"> | 77 data-offset-x="145" data-offset-y="270" data-expected-width="10" data-ex
pected-height="10">X</div> |
132 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> | 78 <div class="secondRowSecondColumn" |
133 <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" d
ata-expected-height="200"> | 79 data-offset-x="395" data-offset-y="270" data-expected-width="10" data-ex
pected-height="10">X</div> |
134 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> | 80 </div> |
135 <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120"
data-expected-width="20" data-expected-height="40"></div> | 81 |
136 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt
h="20" data-expected-height="40"></div> | 82 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> |
137 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid
th="20" data-expected-height="40"></div> | 83 <div class="grid contentSpaceAround itemsEnd"> |
138 </div> | 84 <!-- Dummy DIVs to help checking the result visually. --> |
139 </div> | 85 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
140 | 86 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
141 <div style="position: relative"> | 87 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
142 <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p> | 88 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
143 <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-wid
th="300" data-expected-height="200"> | 89 |
144 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90"
data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> | 90 <div class="firstRowFirstColumn" |
145 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240
" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> | 91 data-offset-x="240" data-offset-y="140" data-expected-width="10" data-ex
pected-height="10">X</div> |
146 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width
="100" data-expected-height="100"></div> | 92 <div class="firstRowSecondColumn" |
147 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid
th="100" data-expected-height="100"></div> | 93 data-offset-x="440" data-offset-y="140" data-expected-width="10" data-ex
pected-height="10">X</div> |
148 </div> | 94 <div class="secondRowFirstColumn" |
149 </div> | 95 data-offset-x="240" data-offset-y="290" data-expected-width="10" data-ex
pected-height="10">X</div> |
150 | 96 <div class="secondRowSecondColumn" |
151 <div style="position: relative"> | 97 data-offset-x="440" data-offset-y="290" data-expected-width="10" data-ex
pected-height="10">X</div> |
152 <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p> | 98 </div> |
153 <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-wid
th="300" data-expected-height="200"> | 99 |
154 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data
-offset-y="60" data-expected-width="20" data-expected-height="40"></div> | 100 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p> |
155 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data
-offset-y="160" data-expected-width="20" data-expected-height="40"></div> | 101 <div class="grid contentSpaceEvenly itemsCenter"> |
156 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width
="100" data-expected-height="100"></div> | 102 <!-- Dummy DIVs to help checking the result visually. --> |
157 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid
th="100" data-expected-height="100"></div> | 103 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
158 </div> | 104 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
159 </div> | 105 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
160 | 106 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
161 <div style="position: relative"> | 107 |
162 <p>direction: LTR | distribution: 'default' | self-alignment: center</p> | 108 <div class="firstRowFirstColumn" |
163 <div class="grid spanningThree"> | 109 data-offset-x="162" data-offset-y="112" data-expected-width="10" data-ex
pected-height="10">X</div> |
164 <div class="i1" style="background: blue"></div> | 110 <div class="firstRowSecondColumn" |
165 <div class="i1" style="background: red"></div> | 111 data-offset-x="378" data-offset-y="112" data-expected-width="10" data-ex
pected-height="10">X</div> |
166 <div class="i1" style="background: blue"></div> | 112 <div class="secondRowFirstColumn" |
167 <div class="i1" style="background: red"></div> | 113 data-offset-x="162" data-offset-y="253" data-expected-width="10" data-ex
pected-height="10">X</div> |
168 <div class="i1" style="background: blue"></div> | 114 <div class="secondRowSecondColumn" |
169 <div class="i1" style="background: red"></div> | 115 data-offset-x="378" data-offset-y="253" data-expected-width="10" data-ex
pected-height="10">X</div> |
170 <div class="i2" style="background: red"></div> | 116 </div> |
171 <div class="i2" style="background: blue"></div> | 117 |
172 <div class="b cell1 justifySelfCenter" data-offset-x="115" data-offset-y
="50" data-expected-width="20" data-expected-height="20"></div> | 118 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> |
173 <div class="c cell1 alignSelfCenter" data-offset-x="200" data-offset-y="
115" data-expected-width="20" data-expected-height="20"></div> | 119 <div class="grid contentSpaceEvenly itemsEnd"> |
174 <div class="i3" style="background: red"></div> | 120 <!-- Dummy DIVs to help checking the result visually. --> |
175 <div class="i4" style="background: blue"></div> | 121 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
176 <div class="i5" style="background: red"></div> | 122 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
177 </div> | 123 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
178 </div> | 124 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
179 | 125 |
180 <div style="position: relative"> | 126 <div class="firstRowFirstColumn" |
181 <p>direction: LTR | distribution: 'default' | self-alignment: end</p> | 127 data-offset-x="257" data-offset-y="157" data-expected-width="10" data-ex
pected-height="10">X</div> |
182 <div class="grid spanningThree"> | 128 <div class="firstRowSecondColumn" |
183 <div class="i1" style="background: blue"></div> | 129 data-offset-x="423" data-offset-y="157" data-expected-width="10" data-ex
pected-height="10">X</div> |
184 <div class="i1" style="background: red"></div> | 130 <div class="secondRowFirstColumn" |
185 <div class="i1" style="background: blue"></div> | 131 data-offset-x="257" data-offset-y="273" data-expected-width="10" data-ex
pected-height="10">X</div> |
186 <div class="i1" style="background: red"></div> | 132 <div class="secondRowSecondColumn" |
187 <div class="i1" style="background: blue"></div> | 133 data-offset-x="423" data-offset-y="273" data-expected-width="10" data-ex
pected-height="10">X</div> |
188 <div class="i1" style="background: red"></div> | 134 </div> |
189 <div class="i2" style="background: red"></div> | 135 |
190 <div class="i2" style="background: blue"></div> | 136 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-a
lignment: center</p> |
191 <div class="b cell1 justifySelfEnd" data-offset-x="180" data-offset-y="5
0" data-expected-width="20" data-expected-height="20"></div> | 137 <div class="grid gridGaps contentSpaceBetween itemsCenter"> |
192 <div class="c cell1 alignSelfEnd" data-offset-x="200" data-offset-y="180
" data-expected-width="20" data-expected-height="20"></div> | 138 <!-- Dummy DIVs to help checking the result visually. --> |
193 <div class="i3" style="background: red"></div> | 139 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
194 <div class="i4" style="background: blue"></div> | 140 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
195 <div class="i5" style="background: red"></div> | 141 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
196 </div> | 142 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
197 </div> | 143 |
198 | 144 <div class="firstRowFirstColumn" |
199 <div style="position: relative"> | 145 data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expe
cted-height="10">X</div> |
200 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</
p> | 146 <div class="firstRowSecondColumn" |
201 <div class="grid spanningThree contentSpaceBetween"> | 147 data-offset-x="445" data-offset-y="45" data-expected-width="10" data-exp
ected-height="10">X</div> |
202 <div class="i1" style="background: blue;"></div> | 148 <div class="secondRowFirstColumn" |
203 <div class="i1" style="background: red"></div> | 149 data-offset-x="95" data-offset-y="320" data-expected-width="10" data-exp
ected-height="10">X</div> |
204 <div class="i1" style="background: blue"></div> | 150 <div class="secondRowSecondColumn" |
205 <div class="i1" style="background: red"></div> | 151 data-offset-x="445" data-offset-y="320" data-expected-width="10" data-ex
pected-height="10">X</div> |
206 <div class="i1" style="background: blue"></div> | 152 </div> |
207 <div class="i1" style="background: red"></div> | 153 |
208 <div class="i2" style="background: red"></div> | 154 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-a
lignment: end</p> |
209 <div class="i2" style="background: blue"></div> | 155 <div class="grid gridGaps contentSpaceBetween itemsEnd"> |
210 <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y
="100" data-expected-width="20" data-expected-height="20"></div> | 156 <!-- Dummy DIVs to help checking the result visually. --> |
211 <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="
215" data-expected-width="20" data-expected-height="20"></div> | 157 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
212 <div class="i3" style="background: red"></div> | 158 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
213 <div class="i4" style="background: blue"></div> | 159 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
214 <div class="i5" style="background: red"></div> | 160 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
215 </div> | 161 |
216 </div> | 162 <div class="firstRowFirstColumn" |
217 | 163 data-offset-x="190" data-offset-y="90" data-expected-width="10" data-exp
ected-height="10">X</div> |
218 <div style="position: relative"> | 164 <div class="firstRowSecondColumn" |
219 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> | 165 data-offset-x="490" data-offset-y="90" data-expected-width="10" data-exp
ected-height="10">X</div> |
220 <div class="grid spanningThree contentSpaceBetween"> | 166 <div class="secondRowFirstColumn" |
221 <div class="i1" style="background: blue;"></div> | 167 data-offset-x="190" data-offset-y="340" data-expected-width="10" data-ex
pected-height="10">X</div> |
222 <div class="i1" style="background: red"></div> | 168 <div class="secondRowSecondColumn" |
223 <div class="i1" style="background: blue"></div> | 169 data-offset-x="490" data-offset-y="340" data-expected-width="10" data-ex
pected-height="10">X</div> |
224 <div class="i1" style="background: red"></div> | 170 </div> |
225 <div class="i1" style="background: blue"></div> | 171 |
226 <div class="i1" style="background: red"></div> | 172 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-al
ignment: center</p> |
227 <div class="i2" style="background: red"></div> | 173 <div class="grid gridGaps contentSpaceAround itemsCenter"> |
228 <div class="i2" style="background: blue"></div> | 174 <!-- Dummy DIVs to help checking the result visually. --> |
229 <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="1
00" data-expected-width="20" data-expected-height="20"></div> | 175 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
230 <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330
" data-expected-width="20" data-expected-height="20"></div> | 176 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
231 <div class="i3" style="background: red"></div> | 177 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
232 <div class="i4" style="background: blue"></div> | 178 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
233 <div class="i5" style="background: red"></div> | 179 |
234 </div> | 180 <div class="firstRowFirstColumn" |
235 </div> | 181 data-offset-x="140" data-offset-y="93" data-expected-width="10" data-exp
ected-height="10">X</div> |
236 | 182 <div class="firstRowSecondColumn" |
237 <div style="position: relative"> | 183 data-offset-x="400" data-offset-y="93" data-expected-width="10" data-exp
ected-height="10">X</div> |
238 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' |
self-alignment: center</p> | 184 <div class="secondRowFirstColumn" |
239 <div class="grid spanningThree gridRowColumnGaps"> | 185 data-offset-x="140" data-offset-y="273" data-expected-width="10" data-ex
pected-height="10">X</div> |
240 <div class="i1" style="background: blue"></div> | 186 <div class="secondRowSecondColumn" |
241 <div class="i1" style="background: red"></div> | 187 data-offset-x="400" data-offset-y="273" data-expected-width="10" data-ex
pected-height="10">X</div> |
242 <div class="i1" style="background: blue"></div> | 188 </div> |
243 <div class="i1" style="background: red"></div> | 189 |
244 <div class="i1" style="background: blue"></div> | 190 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-al
ignment: end</p> |
245 <div class="i1" style="background: red"></div> | 191 <div class="grid gridGaps contentSpaceAround itemsEnd"> |
246 <div class="i2" style="background: red"></div> | 192 <!-- Dummy DIVs to help checking the result visually. --> |
247 <div class="i2" style="background: blue"></div> | 193 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
248 <div class="b cell1 justifySelfCenter" data-offset-x="135" data-offset-y
="70" data-expected-width="20" data-expected-height="20"></div> | 194 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
249 <div class="c cell1 alignSelfCenter" data-offset-x="240" data-offset-y="
155" data-expected-width="20" data-expected-height="20"></div> | 195 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
250 <div class="i3" style="background: red"></div> | 196 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
251 <div class="i4" style="background: blue"></div> | 197 |
252 <div class="i5" style="background: red"></div> | 198 <div class="firstRowFirstColumn" |
253 </div> | 199 data-offset-x="235" data-offset-y="138" data-expected-width="10" data-ex
pected-height="10">X</div> |
254 </div> | 200 <div class="firstRowSecondColumn" |
255 | 201 data-offset-x="445" data-offset-y="138" data-expected-width="10" data-ex
pected-height="10">X</div> |
256 <div style="position: relative"> | 202 <div class="secondRowFirstColumn" |
257 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' |
self-alignment: end</p> | 203 data-offset-x="235" data-offset-y="293" data-expected-width="10" data-ex
pected-height="10">X</div> |
258 <div class="grid spanningThree gridRowColumnGaps"> | 204 <div class="secondRowSecondColumn" |
259 <div class="i1" style="background: blue"></div> | 205 data-offset-x="445" data-offset-y="293" data-expected-width="10" data-ex
pected-height="10">X</div> |
260 <div class="i1" style="background: red"></div> | 206 </div> |
261 <div class="i1" style="background: blue"></div> | 207 |
262 <div class="i1" style="background: red"></div> | 208 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al
ignment: center</p> |
263 <div class="i1" style="background: blue"></div> | 209 <div class="grid gridGaps contentSpaceEvenly itemsCenter"> |
264 <div class="i1" style="background: red"></div> | 210 <!-- Dummy DIVs to help checking the result visually. --> |
265 <div class="i2" style="background: red"></div> | 211 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
266 <div class="i2" style="background: blue"></div> | 212 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
267 <div class="b cell1 justifySelfEnd" data-offset-x="210" data-offset-y="7
0" data-expected-width="20" data-expected-height="20"></div> | 213 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
268 <div class="c cell1 alignSelfEnd" data-offset-x="240" data-offset-y="240
" data-expected-width="20" data-expected-height="20"></div> | 214 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
269 <div class="i3" style="background: red"></div> | 215 |
270 <div class="i4" style="background: blue"></div> | 216 <div class="firstRowFirstColumn" |
271 <div class="i5" style="background: red"></div> | 217 data-offset-x="155" data-offset-y="108" data-expected-width="10" data-ex
pected-height="10">X</div> |
272 </div> | 218 <div class="firstRowSecondColumn" |
273 </div> | 219 data-offset-x="385" data-offset-y="108" data-expected-width="10" data-ex
pected-height="10">X</div> |
274 | 220 <div class="secondRowFirstColumn" |
275 <!-- Same expected result than without gaps because space-between just use the r
emaining availalbe space. --> | 221 data-offset-x="155" data-offset-y="257" data-expected-width="10" data-ex
pected-height="10">X</div> |
276 <div style="position: relative"> | 222 <div class="secondRowSecondColumn" |
277 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-betwe
en' | self-alignment: center</p> | 223 data-offset-x="385" data-offset-y="257" data-expected-width="10" data-ex
pected-height="10">X</div> |
278 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps"> | 224 </div> |
279 <div class="i1" style="background: blue;"></div> | 225 |
280 <div class="i1" style="background: red"></div> | 226 <p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al
ignment: end</p> |
281 <div class="i1" style="background: blue"></div> | 227 <div class="grid gridGaps contentSpaceEvenly itemsEnd"> |
282 <div class="i1" style="background: red"></div> | 228 <!-- Dummy DIVs to help checking the result visually. --> |
283 <div class="i1" style="background: blue"></div> | 229 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
284 <div class="i1" style="background: red"></div> | 230 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
285 <div class="i2" style="background: red"></div> | 231 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
286 <div class="i2" style="background: blue"></div> | 232 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
287 <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y
="100" data-expected-width="20" data-expected-height="20"></div> | 233 |
288 <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="
215" data-expected-width="20" data-expected-height="20"></div> | 234 <div class="firstRowFirstColumn" |
289 <div class="i3" style="background: red"></div> | 235 data-offset-x="250" data-offset-y="153" data-expected-width="10" data-ex
pected-height="10">X</div> |
290 <div class="i4" style="background: blue"></div> | 236 <div class="firstRowSecondColumn" |
291 <div class="i5" style="background: red"></div> | 237 data-offset-x="430" data-offset-y="153" data-expected-width="10" data-ex
pected-height="10">X</div> |
292 </div> | 238 <div class="secondRowFirstColumn" |
293 </div> | 239 data-offset-x="250" data-offset-y="277" data-expected-width="10" data-ex
pected-height="10">X</div> |
294 | 240 <div class="secondRowSecondColumn" |
295 <!-- Same expected result than without gaps because space-between just use the r
emaining availalbe space. --> | 241 data-offset-x="430" data-offset-y="277" data-expected-width="10" data-ex
pected-height="10">X</div> |
296 <div style="position: relative"> | |
297 <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-betwe
en' | self-alignment: end</p> | |
298 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps"> | |
299 <div class="i1" style="background: blue;"></div> | |
300 <div class="i1" style="background: red"></div> | |
301 <div class="i1" style="background: blue"></div> | |
302 <div class="i1" style="background: red"></div> | |
303 <div class="i1" style="background: blue"></div> | |
304 <div class="i1" style="background: red"></div> | |
305 <div class="i2" style="background: red"></div> | |
306 <div class="i2" style="background: blue"></div> | |
307 <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="1
00" data-expected-width="20" data-expected-height="20"></div> | |
308 <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330
" data-expected-width="20" data-expected-height="20"></div> | |
309 <div class="i3" style="background: red"></div> | |
310 <div class="i4" style="background: blue"></div> | |
311 <div class="i5" style="background: red"></div> | |
312 </div> | |
313 </div> | 242 </div> |
314 | 243 |
315 <!-- RTL direction. --> | 244 <!-- RTL direction. --> |
316 <div style="position: relative"> | 245 |
317 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</
p> | 246 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> |
318 <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected
-width="300" data-expected-height="200"> | 247 <div class="grid directionRTL contentSpaceBetween itemsCenter"> |
319 <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y=
"0" data-expected-width="20" data-expected-height="40"></div> | 248 <!-- Dummy DIVs to help checking the result visually. --> |
320 <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80"
data-expected-width="20" data-expected-height="40"></div> | 249 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
321 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid
th="20" data-expected-height="40"></div> | 250 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
322 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid
th="20" data-expected-height="40"></div> | 251 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
323 </div> | 252 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
324 </div> | 253 |
325 | 254 <div class="firstRowFirstColumn" |
326 <div style="position: relative"> | 255 data-offset-x="395" data-offset-y="45" data-expected-width="10" data-exp
ected-height="10">X</div> |
327 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> | 256 <div class="firstRowSecondColumn" |
328 <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected
-width="300" data-expected-height="200"> | 257 data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expe
cted-height="10">X</div> |
329 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0"
data-expected-width="20" data-expected-height="40"></div> | 258 <div class="secondRowFirstColumn" |
330 <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" d
ata-expected-width="20" data-expected-height="40"></div> | 259 data-offset-x="395" data-offset-y="320" data-expected-width="10" data-ex
pected-height="10">X</div> |
331 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid
th="20" data-expected-height="40"></div> | 260 <div class="secondRowSecondColumn" |
332 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid
th="20" data-expected-height="40"></div> | 261 data-offset-x="45" data-offset-y="320" data-expected-width="10" data-exp
ected-height="10">X</div> |
333 </div> | 262 </div> |
334 </div> | 263 |
335 | 264 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> |
336 <div style="position: relative"> | 265 <div class="grid directionRTL contentSpaceBetween itemsEnd"> |
337 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p
> | 266 <!-- Dummy DIVs to help checking the result visually. --> |
338 <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-
width="300" data-expected-height="200"> | 267 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
339 <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y=
"30" data-expected-width="20" data-expected-height="40"></div> | 268 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
340 <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80
" data-expected-width="20" data-expected-height="40"></div> | 269 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
341 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid
th="20" data-expected-height="40"></div> | 270 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
342 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid
th="20" data-expected-height="40"></div> | 271 |
343 </div> | 272 <div class="firstRowFirstColumn" |
344 </div> | 273 data-offset-x="300" data-offset-y="90" data-expected-width="10" data-exp
ected-height="10">X</div> |
345 | 274 <div class="firstRowSecondColumn" |
346 <div style="position: relative"> | 275 data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expec
ted-height="10">X</div> |
347 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> | 276 <div class="secondRowFirstColumn" |
348 <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-
width="300" data-expected-height="200"> | 277 data-offset-x="300" data-offset-y="340" data-expected-width="10" data-ex
pected-height="10">X</div> |
349 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30
" data-expected-width="20" data-expected-height="40"></div> | 278 <div class="secondRowSecondColumn" |
350 <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130"
data-expected-width="20" data-expected-height="40"></div> | 279 data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expe
cted-height="10">X</div> |
351 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid
th="20" data-expected-height="40"></div> | 280 </div> |
352 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid
th="20" data-expected-height="40"></div> | 281 |
353 </div> | 282 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p> |
354 </div> | 283 <div class="grid directionRTL contentSpaceAround itemsCenter"> |
355 | 284 <!-- Dummy DIVs to help checking the result visually. --> |
356 <div style="position: relative"> | 285 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
357 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p
> | 286 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
358 <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-
width="300" data-expected-height="200"> | 287 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
359 <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y=
"40" data-expected-width="20" data-expected-height="40"></div> | 288 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
360 <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80
" data-expected-width="20" data-expected-height="40"></div> | 289 |
361 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid
th="20" data-expected-height="40"></div> | 290 <div class="firstRowFirstColumn" |
362 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid
th="20" data-expected-height="40"></div> | 291 data-offset-x="345" data-offset-y="95" data-expected-width="10" data-exp
ected-height="10">X</div> |
363 </div> | 292 <div class="firstRowSecondColumn" |
364 </div> | 293 data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expe
cted-height="10">X</div> |
365 | 294 <div class="secondRowFirstColumn" |
366 <div style="position: relative"> | 295 data-offset-x="345" data-offset-y="270" data-expected-width="10" data-ex
pected-height="10">X</div> |
367 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> | 296 <div class="secondRowSecondColumn" |
368 <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-
width="300" data-expected-height="200"> | 297 data-offset-x="95" data-offset-y="270" data-expected-width="10" data-exp
ected-height="10">X</div> |
369 <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40
" data-expected-width="20" data-expected-height="40"></div> | 298 </div> |
370 <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120"
data-expected-width="20" data-expected-height="40"></div> | 299 |
371 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid
th="20" data-expected-height="40"></div> | 300 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> |
372 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid
th="20" data-expected-height="40"></div> | 301 <div class="grid directionRTL contentSpaceAround itemsEnd"> |
373 </div> | 302 <!-- Dummy DIVs to help checking the result visually. --> |
374 </div> | 303 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
375 | 304 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
376 <div style="position: relative"> | 305 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
377 <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p> | 306 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
378 <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data
-expected-width="300" data-expected-height="200"> | 307 |
379 <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190
" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> | 308 <div class="firstRowFirstColumn" |
380 <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40"
data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> | 309 data-offset-x="250" data-offset-y="140" data-expected-width="10" data-ex
pected-height="10">X</div> |
381 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid
th="100" data-expected-height="100"></div> | 310 <div class="firstRowSecondColumn" |
382 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid
th="100" data-expected-height="100"></div> | 311 data-offset-x="50" data-offset-y="140" data-expected-width="10" data-exp
ected-height="10">X</div> |
383 </div> | 312 <div class="secondRowFirstColumn" |
384 </div> | 313 data-offset-x="250" data-offset-y="290" data-expected-width="10" data-ex
pected-height="10">X</div> |
385 | 314 <div class="secondRowSecondColumn" |
386 <div style="position: relative"> | 315 data-offset-x="50" data-offset-y="290" data-expected-width="10" data-exp
ected-height="10">X</div> |
387 <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p> | 316 </div> |
388 <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data
-expected-width="300" data-expected-height="200"> | 317 |
389 <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data
-offset-y="60" data-expected-width="20" data-expected-height="40"></div> | 318 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p> |
390 <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-o
ffset-y="160" data-expected-width="20" data-expected-height="40"></div> | 319 <div class="grid directionRTL contentSpaceEvenly itemsCenter"> |
391 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid
th="100" data-expected-height="100"></div> | 320 <!-- Dummy DIVs to help checking the result visually. --> |
392 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid
th="100" data-expected-height="100"></div> | 321 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
393 </div> | 322 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
394 </div> | 323 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
395 | 324 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
396 <div style="position: relative"> | 325 |
397 <p>direction: RTL | distribution: 'default' | self-alignment: center</p> | 326 <div class="firstRowFirstColumn" |
398 <div class="grid spanningThree directionRTL"> | 327 data-offset-x="328" data-offset-y="112" data-expected-width="10" data-ex
pected-height="10">X</div> |
399 <div class="i1" style="background: blue"></div> | 328 <div class="firstRowSecondColumn" |
400 <div class="i1" style="background: red"></div> | 329 data-offset-x="112" data-offset-y="112" data-expected-width="10" data-ex
pected-height="10">X</div> |
401 <div class="i1" style="background: blue"></div> | 330 <div class="secondRowFirstColumn" |
402 <div class="i1" style="background: red"></div> | 331 data-offset-x="328" data-offset-y="253" data-expected-width="10" data-ex
pected-height="10">X</div> |
403 <div class="i1" style="background: blue"></div> | 332 <div class="secondRowSecondColumn" |
404 <div class="i1" style="background: red"></div> | 333 data-offset-x="112" data-offset-y="253" data-expected-width="10" data-ex
pected-height="10">X</div> |
405 <div class="i2" style="background: red"></div> | 334 </div> |
406 <div class="i2" style="background: blue"></div> | 335 |
407 <div class="b cell1 justifySelfCenter" data-offset-x="415" data-offset-y
="50" data-expected-width="20" data-expected-height="20"></div> | 336 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> |
408 <div class="c cell1 alignSelfCenter" data-offset-x="330" data-offset-y="
115" data-expected-width="20" data-expected-height="20"></div> | 337 <div class="grid directionRTL contentSpaceEvenly itemsEnd"> |
409 <div class="i3" style="background: red"></div> | 338 <!-- Dummy DIVs to help checking the result visually. --> |
410 <div class="i4" style="background: blue"></div> | 339 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
411 <div class="i5" style="background: red"></div> | 340 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
412 </div> | 341 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
413 </div> | 342 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
414 | 343 |
415 <div style="position: relative"> | 344 <div class="firstRowFirstColumn" |
416 <p>direction: RTL | distribution: 'default' | self-alignment: end</p> | 345 data-offset-x="233" data-offset-y="157" data-expected-width="10" data-ex
pected-height="10">X</div> |
417 <div class="grid spanningThree directionRTL"> | 346 <div class="firstRowSecondColumn" |
418 <div class="i1" style="background: blue"></div> | 347 data-offset-x="67" data-offset-y="157" data-expected-width="10" data-exp
ected-height="10">X</div> |
419 <div class="i1" style="background: red"></div> | 348 <div class="secondRowFirstColumn" |
420 <div class="i1" style="background: blue"></div> | 349 data-offset-x="233" data-offset-y="273" data-expected-width="10" data-ex
pected-height="10">X</div> |
421 <div class="i1" style="background: red"></div> | 350 <div class="secondRowSecondColumn" |
422 <div class="i1" style="background: blue"></div> | 351 data-offset-x="67" data-offset-y="273" data-expected-width="10" data-exp
ected-height="10">X</div> |
423 <div class="i1" style="background: red"></div> | 352 </div> |
424 <div class="i2" style="background: red"></div> | 353 |
425 <div class="i2" style="background: blue"></div> | 354 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-a
lignment: center</p> |
426 <div class="b cell1 justifySelfEnd" data-offset-x="350" data-offset-y="5
0" data-expected-width="20" data-expected-height="20"></div> | 355 <div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter"> |
427 <div class="c cell1 alignSelfEnd" data-offset-x="330" data-offset-y="180
" data-expected-width="20" data-expected-height="20"></div> | 356 <!-- Dummy DIVs to help checking the result visually. --> |
428 <div class="i3" style="background: red"></div> | 357 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
429 <div class="i4" style="background: blue"></div> | 358 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
430 <div class="i5" style="background: red"></div> | 359 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
431 </div> | 360 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
432 </div> | 361 |
433 | 362 <div class="firstRowFirstColumn" |
434 <div style="position: relative"> | 363 data-offset-x="395" data-offset-y="45" data-expected-width="10" data-exp
ected-height="10">X</div> |
435 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</
p> | 364 <div class="firstRowSecondColumn" |
436 <div class="grid spanningThree contentSpaceBetween directionRTL"> | 365 data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expe
cted-height="10">X</div> |
437 <div class="i1" style="background: blue;"></div> | 366 <div class="secondRowFirstColumn" |
438 <div class="i1" style="background: red"></div> | 367 data-offset-x="395" data-offset-y="320" data-expected-width="10" data-ex
pected-height="10">X</div> |
439 <div class="i1" style="background: blue"></div> | 368 <div class="secondRowSecondColumn" |
440 <div class="i1" style="background: red"></div> | 369 data-offset-x="45" data-offset-y="320" data-expected-width="10" data-exp
ected-height="10">X</div> |
441 <div class="i1" style="background: blue"></div> | 370 </div> |
442 <div class="i1" style="background: red"></div> | 371 |
443 <div class="i2" style="background: red"></div> | 372 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-a
lignment: end</p> |
444 <div class="i2" style="background: blue"></div> | 373 <div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd"> |
445 <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y
="100" data-expected-width="20" data-expected-height="20"></div> | 374 <!-- Dummy DIVs to help checking the result visually. --> |
446 <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="
215" data-expected-width="20" data-expected-height="20"></div> | 375 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
447 <div class="i3" style="background: red"></div> | 376 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
448 <div class="i4" style="background: blue"></div> | 377 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
449 <div class="i5" style="background: red"></div> | 378 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
450 </div> | 379 |
451 </div> | 380 <div class="firstRowFirstColumn" |
452 | 381 data-offset-x="300" data-offset-y="90" data-expected-width="10" data-exp
ected-height="10">X</div> |
453 <div style="position: relative"> | 382 <div class="firstRowSecondColumn" |
454 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> | 383 data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expec
ted-height="10">X</div> |
455 <div class="grid spanningThree contentSpaceBetween directionRTL"> | 384 <div class="secondRowFirstColumn" |
456 <div class="i1" style="background: blue;"></div> | 385 data-offset-x="300" data-offset-y="340" data-expected-width="10" data-ex
pected-height="10">X</div> |
457 <div class="i1" style="background: red"></div> | 386 <div class="secondRowSecondColumn" |
458 <div class="i1" style="background: blue"></div> | 387 data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expe
cted-height="10">X</div> |
459 <div class="i1" style="background: red"></div> | 388 </div> |
460 <div class="i1" style="background: blue"></div> | 389 |
461 <div class="i1" style="background: red"></div> | 390 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-al
ignment: center</p> |
462 <div class="i2" style="background: red"></div> | 391 <div class="grid directionRTL gridGaps contentSpaceAround itemsCenter"> |
463 <div class="i2" style="background: blue"></div> | 392 <!-- Dummy DIVs to help checking the result visually. --> |
464 <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="1
00" data-expected-width="20" data-expected-height="20"></div> | 393 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
465 <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330
" data-expected-width="20" data-expected-height="20"></div> | 394 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
466 <div class="i3" style="background: red"></div> | 395 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
467 <div class="i4" style="background: blue"></div> | 396 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
468 <div class="i5" style="background: red"></div> | 397 |
469 </div> | 398 <div class="firstRowFirstColumn" |
470 </div> | 399 data-offset-x="350" data-offset-y="93" data-expected-width="10" data-exp
ected-height="10">X</div> |
471 | 400 <div class="firstRowSecondColumn" |
472 <div style="position: relative"> | 401 data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expe
cted-height="10">X</div> |
473 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' |
self-alignment: center</p> | 402 <div class="secondRowFirstColumn" |
474 <div class="grid spanningThree gridRowColumnGaps directionRTL"> | 403 data-offset-x="350" data-offset-y="273" data-expected-width="10" data-ex
pected-height="10">X</div> |
475 <div class="i1" style="background: blue"></div> | 404 <div class="secondRowSecondColumn" |
476 <div class="i1" style="background: red"></div> | 405 data-offset-x="90" data-offset-y="273" data-expected-width="10" data-exp
ected-height="10">X</div> |
477 <div class="i1" style="background: blue"></div> | 406 </div> |
478 <div class="i1" style="background: red"></div> | 407 |
479 <div class="i1" style="background: blue"></div> | 408 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-al
ignment: end</p> |
480 <div class="i1" style="background: red"></div> | 409 <div class="grid directionRTL gridGaps contentSpaceAround itemsEnd"> |
481 <div class="i2" style="background: red"></div> | 410 <!-- Dummy DIVs to help checking the result visually. --> |
482 <div class="i2" style="background: blue"></div> | 411 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
483 <div class="b cell1 justifySelfCenter" data-offset-x="395" data-offset-y
="70" data-expected-width="20" data-expected-height="20"></div> | 412 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
484 <div class="c cell1 alignSelfCenter" data-offset-x="290" data-offset-y="
155" data-expected-width="20" data-expected-height="20"></div> | 413 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
485 <div class="i3" style="background: red"></div> | 414 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
486 <div class="i4" style="background: blue"></div> | 415 |
487 <div class="i5" style="background: red"></div> | 416 <div class="firstRowFirstColumn" |
488 </div> | 417 data-offset-x="255" data-offset-y="138" data-expected-width="10" data-ex
pected-height="10">X</div> |
489 </div> | 418 <div class="firstRowSecondColumn" |
490 | 419 data-offset-x="45" data-offset-y="138" data-expected-width="10" data-exp
ected-height="10">X</div> |
491 <div style="position: relative"> | 420 <div class="secondRowFirstColumn" |
492 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' |
self-alignment: end</p> | 421 data-offset-x="255" data-offset-y="293" data-expected-width="10" data-ex
pected-height="10">X</div> |
493 <div class="grid spanningThree gridRowColumnGaps directionRTL"> | 422 <div class="secondRowSecondColumn" |
494 <div class="i1" style="background: blue"></div> | 423 data-offset-x="45" data-offset-y="293" data-expected-width="10" data-exp
ected-height="10">X</div> |
495 <div class="i1" style="background: red"></div> | 424 </div> |
496 <div class="i1" style="background: blue"></div> | 425 |
497 <div class="i1" style="background: red"></div> | 426 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al
ignment: center</p> |
498 <div class="i1" style="background: blue"></div> | 427 <div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter"> |
499 <div class="i1" style="background: red"></div> | 428 <!-- Dummy DIVs to help checking the result visually. --> |
500 <div class="i2" style="background: red"></div> | 429 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
501 <div class="i2" style="background: blue"></div> | 430 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
502 <div class="b cell1 justifySelfEnd" data-offset-x="320" data-offset-y="7
0" data-expected-width="20" data-expected-height="20"></div> | 431 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
503 <div class="c cell1 alignSelfEnd" data-offset-x="290" data-offset-y="240
" data-expected-width="20" data-expected-height="20"></div> | 432 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
504 <div class="i3" style="background: red"></div> | 433 |
505 <div class="i4" style="background: blue"></div> | 434 <div class="firstRowFirstColumn" |
506 <div class="i5" style="background: red"></div> | 435 data-offset-x="335" data-offset-y="108" data-expected-width="10" data-ex
pected-height="10">X</div> |
507 </div> | 436 <div class="firstRowSecondColumn" |
508 </div> | 437 data-offset-x="105" data-offset-y="108" data-expected-width="10" data-ex
pected-height="10">X</div> |
509 | 438 <div class="secondRowFirstColumn" |
510 <div style="position: relative"> | 439 data-offset-x="335" data-offset-y="257" data-expected-width="10" data-ex
pected-height="10">X</div> |
511 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-betwe
en' | self-alignment: center</p> | 440 <div class="secondRowSecondColumn" |
512 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directi
onRTL"> | 441 data-offset-x="105" data-offset-y="257" data-expected-width="10" data-ex
pected-height="10">X</div> |
513 <div class="i1" style="background: blue;"></div> | 442 </div> |
514 <div class="i1" style="background: red"></div> | 443 |
515 <div class="i1" style="background: blue"></div> | 444 <p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-al
ignment: end</p> |
516 <div class="i1" style="background: red"></div> | 445 <div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd"> |
517 <div class="i1" style="background: blue"></div> | 446 <!-- Dummy DIVs to help checking the result visually. --> |
518 <div class="i1" style="background: red"></div> | 447 <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
519 <div class="i2" style="background: red"></div> | 448 <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div> |
520 <div class="i2" style="background: blue"></div> | 449 <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div> |
521 <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y
="100" data-expected-width="20" data-expected-height="20"></div> | 450 <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div
> |
522 <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="
215" data-expected-width="20" data-expected-height="20"></div> | 451 |
523 <div class="i3" style="background: red"></div> | 452 <div class="firstRowFirstColumn" |
524 <div class="i4" style="background: blue"></div> | 453 data-offset-x="240" data-offset-y="153" data-expected-width="10" data-ex
pected-height="10">X</div> |
525 <div class="i5" style="background: red"></div> | 454 <div class="firstRowSecondColumn" |
526 </div> | 455 data-offset-x="60" data-offset-y="153" data-expected-width="10" data-exp
ected-height="10">X</div> |
527 </div> | 456 <div class="secondRowFirstColumn" |
528 | 457 data-offset-x="240" data-offset-y="277" data-expected-width="10" data-ex
pected-height="10">X</div> |
529 <div style="position: relative"> | 458 <div class="secondRowSecondColumn" |
530 <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-betwe
en' | self-alignment: end</p> | 459 data-offset-x="60" data-offset-y="277" data-expected-width="10" data-exp
ected-height="10">X</div> |
531 <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directi
onRTL"> | |
532 <div class="i1" style="background: blue;"></div> | |
533 <div class="i1" style="background: red"></div> | |
534 <div class="i1" style="background: blue"></div> | |
535 <div class="i1" style="background: red"></div> | |
536 <div class="i1" style="background: blue"></div> | |
537 <div class="i1" style="background: red"></div> | |
538 <div class="i2" style="background: red"></div> | |
539 <div class="i2" style="background: blue"></div> | |
540 <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="1
00" data-expected-width="20" data-expected-height="20"></div> | |
541 <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330
" data-expected-width="20" data-expected-height="20"></div> | |
542 <div class="i3" style="background: red"></div> | |
543 <div class="i4" style="background: blue"></div> | |
544 <div class="i5" style="background: red"></div> | |
545 </div> | |
546 </div> | 460 </div> |
547 | 461 |
548 </body> | 462 </body> |
549 </html> | |
OLD | NEW |