OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
6 <style> | 6 <style> |
7 body { | 7 body { |
8 margin: 0; | 8 margin: 0; |
9 } | 9 } |
10 | 10 |
(...skipping 20 matching lines...) Expand all Loading... |
31 } | 31 } |
32 | 32 |
33 .alignItemsCenter { | 33 .alignItemsCenter { |
34 align-items: center; | 34 align-items: center; |
35 } | 35 } |
36 | 36 |
37 .alignItemsCenterSafe { | 37 .alignItemsCenterSafe { |
38 align-items: center safe; | 38 align-items: center safe; |
39 } | 39 } |
40 | 40 |
41 .alignItemsCenterTrue { | 41 .alignItemsCenterUnsafe { |
42 align-items: center true; | 42 align-items: center unsafe; |
43 } | 43 } |
44 | 44 |
45 .alignItemsEnd { | 45 .alignItemsEnd { |
46 align-items: end; | 46 align-items: end; |
47 } | 47 } |
48 | 48 |
49 .alignItemsEndSafe { | 49 .alignItemsEndSafe { |
50 align-items: end safe; | 50 align-items: end safe; |
51 } | 51 } |
52 | 52 |
53 .alignItemsEndTrue { | 53 .alignItemsEndUnsafe { |
54 align-items: end true; | 54 align-items: end unsafe; |
55 } | 55 } |
56 | 56 |
57 .alignSelfCenter { | 57 .alignSelfCenter { |
58 align-self: center; | 58 align-self: center; |
59 } | 59 } |
60 | 60 |
61 .alignSelfCenterSafe { | 61 .alignSelfCenterSafe { |
62 align-self: center safe; | 62 align-self: center safe; |
63 } | 63 } |
64 | 64 |
65 .alignSelfCenterTrue { | 65 .alignSelfCenterUnsafe { |
66 align-self: center true; | 66 align-self: center unsafe; |
67 } | 67 } |
68 | 68 |
69 .alignSelfEnd { | 69 .alignSelfEnd { |
70 align-self: end; | 70 align-self: end; |
71 } | 71 } |
72 | 72 |
73 .alignSelfEndSafe { | 73 .alignSelfEndSafe { |
74 align-self: end safe; | 74 align-self: end safe; |
75 } | 75 } |
76 | 76 |
77 .alignSelfEndTrue { | 77 .alignSelfEndUnsafe { |
78 align-self: end true; | 78 align-self: end unsafe; |
79 } | 79 } |
80 | 80 |
81 .justifyItemsCenter { | 81 .justifyItemsCenter { |
82 justify-items: center; | 82 justify-items: center; |
83 } | 83 } |
84 | 84 |
85 .justifyItemsCenterSafe { | 85 .justifyItemsCenterSafe { |
86 justify-items: center safe; | 86 justify-items: center safe; |
87 } | 87 } |
88 | 88 |
89 .justifyItemsCenterTrue { | 89 .justifyItemsCenterUnsafe { |
90 justify-items: center true; | 90 justify-items: center unsafe; |
91 } | 91 } |
92 | 92 |
93 .justifyItemsEnd { | 93 .justifyItemsEnd { |
94 justify-items: end; | 94 justify-items: end; |
95 } | 95 } |
96 | 96 |
97 .justifyItemsEndSafe { | 97 .justifyItemsEndSafe { |
98 justify-items: end safe; | 98 justify-items: end safe; |
99 } | 99 } |
100 | 100 |
101 .justifyItemsEndTrue { | 101 .justifyItemsEndUnsafe { |
102 justify-items: end true; | 102 justify-items: end unsafe; |
103 } | 103 } |
104 | 104 |
105 .justifySelfCenter { | 105 .justifySelfCenter { |
106 justify-self: center; | 106 justify-self: center; |
107 } | 107 } |
108 | 108 |
109 .justifySelfCenterSafe { | 109 .justifySelfCenterSafe { |
110 justify-self: center safe; | 110 justify-self: center safe; |
111 } | 111 } |
112 | 112 |
113 .justifySelfCenterTrue { | 113 .justifySelfCenterUnsafe { |
114 justify-self: center true; | 114 justify-self: center unsafe; |
115 } | 115 } |
116 | 116 |
117 .justifySelfEnd { | 117 .justifySelfEnd { |
118 justify-self: end; | 118 justify-self: end; |
119 } | 119 } |
120 | 120 |
121 .thirdRowFirstColumn { | 121 .thirdRowFirstColumn { |
122 background-color: green; | 122 background-color: green; |
123 grid-column: 1; | 123 grid-column: 1; |
124 grid-row: 3; | 124 grid-row: 3; |
125 } | 125 } |
126 </style> | 126 </style> |
127 </head> | 127 </head> |
128 <body onload="checkLayout('.grid')"> | 128 <body onload="checkLayout('.grid')"> |
129 | 129 |
130 <p>This test checks that the 'overflow' keyword is applied correctly for 'align'
and 'justify' properties.</p> | 130 <p>This test checks that the 'overflow' keyword is applied correctly for 'align'
and 'justify' properties.</p> |
131 | 131 |
132 <div style="position: relative"> | 132 <div style="position: relative"> |
133 <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="3
00" data-expected-height="360"> | 133 <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="3
00" data-expected-height="360"> |
134 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15"
data-offset-y="40" data-expected-width="180" data-expected-height="40"></div> | 134 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15"
data-offset-y="40" data-expected-width="180" data-expected-height="40"></div> |
135 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> | 135 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
136 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 136 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
137 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> | 137 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
138 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="135
" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> | 138 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="135
" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> |
139 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 139 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
140 </div> | 140 </div> |
141 </div> | 141 </div> |
142 | 142 |
143 <div style="position: relative"> | 143 <div style="position: relative"> |
144 <div class="grid alignItemsCenterTrue justifyItemsCenterTrue" data-expected-
width="300" data-expected-height="360"> | 144 <div class="grid alignItemsCenterUnsafe justifyItemsCenterUnsafe" data-expec
ted-width="300" data-expected-height="360"> |
145 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" d
ata-offset-y="-15" data-expected-width="50" data-expected-height="150"></div> | 145 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" d
ata-offset-y="-15" data-expected-width="50" data-expected-height="150"></div> |
146 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> | 146 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
147 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 147 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
148 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> | 148 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
149 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200
" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div> | 149 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200
" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div> |
150 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 150 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
151 </div> | 151 </div> |
152 </div> | 152 </div> |
153 | 153 |
154 <div style="position: relative"> | 154 <div style="position: relative"> |
(...skipping 23 matching lines...) Expand all Loading... |
178 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30"
data-offset-y="80" data-expected-width="180" data-expected-height="40"></div> | 178 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30"
data-offset-y="80" data-expected-width="180" data-expected-height="40"></div> |
179 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" d
ata-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-hei
ght="40"></div> | 179 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" d
ata-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-hei
ght="40"></div> |
180 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 180 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
181 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> | 181 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> |
182 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="120
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> | 182 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="120
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> |
183 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 183 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
184 </div> | 184 </div> |
185 </div> | 185 </div> |
186 | 186 |
187 <div style="position: relative"> | 187 <div style="position: relative"> |
188 <div class="grid alignItemsEndTrue justifyItemsEndTrue" data-expected-width=
"300" data-expected-height="360"> | 188 <div class="grid alignItemsEndUnsafe justifyItemsEndUnsafe" data-expected-wi
dth="300" data-expected-height="360"> |
189 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div> | 189 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div> |
190 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> | 190 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> |
191 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 191 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
192 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" dat
a-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-heigh
t="40"></div> | 192 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" dat
a-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-heigh
t="40"></div> |
193 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div> | 193 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div> |
194 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 194 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
195 </div> | 195 </div> |
196 </div> | 196 </div> |
197 | 197 |
198 <div style="position: relative"> | 198 <div style="position: relative"> |
199 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> | 199 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> |
200 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="80" data-expected-width="180" data-expected-height="40"></div> | 200 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="80" data-expected-width="180" data-expected-height="40"></div> |
201 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterTru
e" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected
-height="40"></div> | 201 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterUns
afe" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expect
ed-height="40"></div> |
202 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 202 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
203 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> | 203 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> |
204 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> | 204 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> |
205 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 205 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
206 </div> | 206 </div> |
207 </div> | 207 </div> |
208 | 208 |
209 <div style="position: relative"> | 209 <div style="position: relative"> |
210 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> | 210 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> |
211 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="50" data-expected-height="150"></div> | 211 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="50" data-expected-height="150"></div> |
212 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> | 212 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> |
213 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 213 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
214 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterTrue"
data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-h
eight="40"></div> | 214 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterUnsaf
e" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected
-height="40"></div> |
215 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> | 215 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> |
216 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 216 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
217 </div> | 217 </div> |
218 </div> | 218 </div> |
219 | 219 |
220 </body> | 220 </body> |
221 </html> | 221 </html> |
OLD | NEW |