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 <style> | 5 <style> |
6 .grid { | 6 .grid { |
7 grid-template-areas: "firstArea secondArea" | 7 grid-template-areas: "firstArea secondArea" |
8 "thirdArea thirdArea"; | 8 "thirdArea thirdArea"; |
9 | 9 |
10 grid-template-columns: [first nav] 10px 10px; | 10 grid-template-columns: [first nav] 10px 10px; |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
69 } | 69 } |
70 .gridItemWithSpanNumberCustomIdent { | 70 .gridItemWithSpanNumberCustomIdent { |
71 grid-column: 1 /span 3 first; | 71 grid-column: 1 /span 3 first; |
72 grid-row: -1 / last 2 span ; | 72 grid-row: -1 / last 2 span ; |
73 } | 73 } |
74 .gridItemWithSingleNamedGridArea { | 74 .gridItemWithSingleNamedGridArea { |
75 grid-column: thirdArea; | 75 grid-column: thirdArea; |
76 grid-row: firstArea; | 76 grid-row: firstArea; |
77 } | 77 } |
78 .gridItemWithNamedGridAreaAndSpan { | 78 .gridItemWithNamedGridAreaAndSpan { |
79 grid-column: thirdArea / span; | 79 grid-column: thirdArea / span 1; |
80 grid-row: firstArea / span 2; | 80 grid-row: firstArea / span 2; |
81 } | 81 } |
82 </style> | 82 </style> |
83 <script src="resources/grid-item-column-row-parsing-utils.js"></script> | 83 <script src="resources/grid-item-column-row-parsing-utils.js"></script> |
84 <script src="../../resources/js-test.js"></script> | 84 <script src="../../resources/js-test.js"></script> |
85 </head> | 85 </head> |
86 <body> | 86 <body> |
87 <div class="grid"> | 87 <div class="grid"> |
88 <!-- The first has no properties set on it. --> | 88 <!-- The first has no properties set on it. --> |
89 <div id="gridItemWithNoCSSRule"></div> | 89 <div id="gridItemWithNoCSSRule"></div> |
(...skipping 19 matching lines...) Expand all Loading... |
109 description('Test that setting and getting grid-column and grid-row works as
expected'); | 109 description('Test that setting and getting grid-column and grid-row works as
expected'); |
110 | 110 |
111 debug("Test getting grid-column and grid-row set through CSS"); | 111 debug("Test getting grid-column and grid-row set through CSS"); |
112 testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto
"); | 112 testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto
"); |
113 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au
to"); | 113 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / au
to"); |
114 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 /
auto"); | 114 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 /
auto"); |
115 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au
to"); | 115 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / au
to"); |
116 testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5"); | 116 testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5"); |
117 testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 /
-10", "-8 / 5"); | 117 testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 /
-10", "-8 / 5"); |
118 testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 /
span 5"); | 118 testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 /
span 5"); |
119 testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "span 1 / span 1", "
span 1 / span 1"); | 119 testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "auto / auto", "auto
/ auto"); |
120 testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto /
auto"); | 120 testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto /
auto"); |
121 testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", "
4 / 5"); | 121 testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", "
4 / 5"); |
122 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto"
); | 122 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto"
); |
123 testColumnRowCSSParsing("gridItemWithCustomIdent", "first / first", "last /
last"); | 123 testColumnRowCSSParsing("gridItemWithCustomIdent", "first / first", "last /
last"); |
124 testColumnRowCSSParsing("gridItemWithNonExistingCustomIdent", "nav / nav", "
foo / foo"); | 124 testColumnRowCSSParsing("gridItemWithNonExistingCustomIdent", "nav / nav", "
foo / foo"); |
125 testColumnRowCSSParsing("gridItemWithSpanCustomIdent", "1 / span 1 first", "
-1 / span 1 last"); | 125 testColumnRowCSSParsing("gridItemWithSpanCustomIdent", "1 / span 1 first", "
-1 / span 1 last"); |
126 testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdent", "1 / span 3 fir
st", "-1 / span 2 last"); | 126 testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdent", "1 / span 3 fir
st", "-1 / span 2 last"); |
127 testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea / thir
dArea", "firstArea / firstArea"); | 127 testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea / thir
dArea", "firstArea / firstArea"); |
128 testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / spa
n 1", "firstArea / span 2"); | 128 testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / spa
n 1", "firstArea / span 2"); |
129 | 129 |
(...skipping 11 matching lines...) Expand all Loading... |
141 debug(""); | 141 debug(""); |
142 debug("Test getting and setting grid-column and grid-row through JS"); | 142 debug("Test getting and setting grid-column and grid-row through JS"); |
143 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); | 143 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); |
144 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); | 144 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); |
145 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); | 145 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); |
146 testColumnRowJSParsing("10 / 55", "1 / 10"); | 146 testColumnRowJSParsing("10 / 55", "1 / 10"); |
147 testColumnRowJSParsing("span 5 / 5", "4 / span 4"); | 147 testColumnRowJSParsing("span 5 / 5", "4 / span 4"); |
148 testColumnRowJSParsing("-5 / 5", "4 / -4"); | 148 testColumnRowJSParsing("-5 / 5", "4 / -4"); |
149 testColumnRowJSParsing("4 / auto", "5 / auto"); | 149 testColumnRowJSParsing("4 / auto", "5 / auto"); |
150 testColumnRowJSParsing("auto / 5", "auto / 8"); | 150 testColumnRowJSParsing("auto / 5", "auto / 8"); |
151 testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1"); | 151 testColumnRowJSParsing("span / 3", "5 / span", "auto / auto", "auto / auto")
; |
| 152 testColumnRowJSParsing("span 1 / 3", "5 / span 1", "span 1 / 3", "5 / span 1
"); |
152 testColumnRowJSParsing("first span / 3", "5 / last span", "span 1 first / 3"
, "5 / span 1 last"); | 153 testColumnRowJSParsing("first span / 3", "5 / last span", "span 1 first / 3"
, "5 / span 1 last"); |
153 testColumnRowJSParsing("first / last", "nav / last span", "first / last", "n
av / span 1 last"); | 154 testColumnRowJSParsing("first / last", "nav / last span", "first / last", "n
av / span 1 last"); |
154 testColumnRowJSParsing("3 first / 2 last", "5 nav / last 7 span", "3 first /
2 last", "5 nav / span 7 last"); | 155 testColumnRowJSParsing("3 first / 2 last", "5 nav / last 7 span", "3 first /
2 last", "5 nav / span 7 last"); |
155 testColumnRowJSParsing("3 first span / -3 last", "last 2 span / -1 nav", "sp
an 3 first / -3 last", "span 2 last / -1 nav"); | 156 testColumnRowJSParsing("3 first span / -3 last", "last 2 span / -1 nav", "sp
an 3 first / -3 last", "span 2 last / -1 nav"); |
156 testColumnRowJSParsing("5 / none", "8 / foobar"); | 157 testColumnRowJSParsing("5 / none", "8 / foobar"); |
157 testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar"); | 158 testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar"); |
158 testColumnRowJSParsing("span first 3 / none", "last span / foobar", "span 3
first / none", "span 1 last / foobar"); | 159 testColumnRowJSParsing("span first 3 / none", "last span / foobar", "span 3
first / none", "span 1 last / foobar"); |
159 testColumnRowJSParsing("5 span / span 2", "span first / last span", "span 5
/ span 2", "span 1 first / span 1 last"); | 160 testColumnRowJSParsing("5 span / span 2", "span first / last span", "span 5
/ span 2", "span 1 first / span 1 last"); |
160 testColumnRowJSParsing("span 5 first / span last 2", "3 first span / last 7
span", "span 5 first / span 2 last", "span 3 first / span 7 last"); | 161 testColumnRowJSParsing("span 5 first / span last 2", "3 first span / last 7
span", "span 5 first / span 2 last", "span 3 first / span 7 last"); |
161 | 162 |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
194 testColumnRowInvalidJSParsing("4 5", "5 8"); | 195 testColumnRowInvalidJSParsing("4 5", "5 8"); |
195 testColumnRowInvalidJSParsing("4 /", "5 /"); | 196 testColumnRowInvalidJSParsing("4 /", "5 /"); |
196 testColumnRowInvalidJSParsing("5 5", "8 auto"); | 197 testColumnRowInvalidJSParsing("5 5", "8 auto"); |
197 testColumnRowInvalidJSParsing("5 / /", "8 / /"); | 198 testColumnRowInvalidJSParsing("5 / /", "8 / /"); |
198 | 199 |
199 // 0 is invalid. | 200 // 0 is invalid. |
200 testColumnRowInvalidJSParsing("0 / 5", "0 / 6"); | 201 testColumnRowInvalidJSParsing("0 / 5", "0 / 6"); |
201 testColumnRowInvalidJSParsing("6 / 0", "8 / 0"); | 202 testColumnRowInvalidJSParsing("6 / 0", "8 / 0"); |
202 testColumnRowInvalidJSParsing("0", "0"); | 203 testColumnRowInvalidJSParsing("0", "0"); |
203 | 204 |
| 205 // 'span' alone is invalid |
| 206 testColumnRowInvalidJSParsing("span", "span"); |
| 207 testColumnRowInvalidJSParsing("span / span", "span / span"); |
| 208 |
204 // 'span' and 'auto' are not valid <custom-ident> | 209 // 'span' and 'auto' are not valid <custom-ident> |
205 testColumnRowInvalidJSParsing("span span / span span", "span span / span spa
n"); | 210 testColumnRowInvalidJSParsing("span span / span span", "span span / span spa
n"); |
206 testColumnRowInvalidJSParsing("span auto / span auto", "span auto / span aut
o"); | 211 testColumnRowInvalidJSParsing("span auto / span auto", "span auto / span aut
o"); |
207 | 212 |
208 // CSS wide keywords are not valid <custom-ident> | 213 // CSS wide keywords are not valid <custom-ident> |
209 testColumnRowInvalidJSParsing("span default / span default", "span default /
span default"); | 214 testColumnRowInvalidJSParsing("span default / span default", "span default /
span default"); |
210 testColumnRowInvalidJSParsing("span inherit / span inherit", "span inherit /
span inherit"); | 215 testColumnRowInvalidJSParsing("span inherit / span inherit", "span inherit /
span inherit"); |
211 testColumnRowInvalidJSParsing("span initial / span initial", "span initial /
span initial"); | 216 testColumnRowInvalidJSParsing("span initial / span initial", "span initial /
span initial"); |
212 | 217 |
213 // More than 1 <integer> and / or <string>. | 218 // More than 1 <integer> and / or <string>. |
(...skipping 18 matching lines...) Expand all Loading... |
232 testColumnRowInvalidJSParsing("0 / span 0", "0 / 0 span"); | 237 testColumnRowInvalidJSParsing("0 / span 0", "0 / 0 span"); |
233 testColumnRowInvalidJSParsing("span -3 'first' / 3 last", "last -2 span / 1
nav"); | 238 testColumnRowInvalidJSParsing("span -3 'first' / 3 last", "last -2 span / 1
nav"); |
234 | 239 |
235 // We don't allow span to be between the <integer> and the <string>. | 240 // We don't allow span to be between the <integer> and the <string>. |
236 testColumnRowInvalidJSParsing("first span 1 / last", "2 span first / last"); | 241 testColumnRowInvalidJSParsing("first span 1 / last", "2 span first / last"); |
237 testColumnRowInvalidJSParsing("3 first / 2 span last", "5 nav / last span 7"
); | 242 testColumnRowInvalidJSParsing("3 first / 2 span last", "5 nav / last span 7"
); |
238 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3"); | 243 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3"); |
239 </script> | 244 </script> |
240 </body> | 245 </body> |
241 </html> | 246 </html> |
OLD | NEW |