OLD | NEW |
1 This test checks that the 'grid' shorthand is properly parsed and the longhand p
roperties correctly assigned. | 1 This test checks that the 'grid' shorthand is properly parsed and the longhand p
roperties correctly assigned. |
2 | 2 |
3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
". | 3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
". |
4 | 4 |
5 | 5 |
6 Test getting the longhand values when shorthand is set through CSS. | 6 Test getting the longhand values when shorthand is set through CSS. |
7 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-c
olumns') is "none" | 7 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-c
olumns') is "none" |
8 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-r
ows') is "none" | 8 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-r
ows') is "none" |
9 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-a
reas') is "none" | 9 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-a
reas') is "none" |
10 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow'
) is "row" | 10 PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow'
) is "row" |
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
92 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-
auto-rows') is "auto" | 92 PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-
auto-rows') is "auto" |
93 | 93 |
94 Test getting and setting 'grid' shorthand through JS | 94 Test getting and setting 'grid' shorthand through JS |
95 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"10px" | 95 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"10px" |
96 PASS element.style.gridTemplateColumns is "10px" | 96 PASS element.style.gridTemplateColumns is "10px" |
97 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20
px" | 97 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20
px" |
98 PASS element.style.gridTemplateRows is "20px" | 98 PASS element.style.gridTemplateRows is "20px" |
99 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" | 99 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" |
100 PASS element.style.gridTemplateAreas is "none" | 100 PASS element.style.gridTemplateAreas is "none" |
101 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" | 101 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" |
102 PASS element.style.gridAutoFlow is "initial" | 102 PASS element.style.gridAutoFlow is "row" |
103 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "aut
o" | 103 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "aut
o" |
104 PASS element.style.gridAutoColumns is "initial" | 104 PASS element.style.gridAutoColumns is "auto" |
105 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" | 105 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
106 PASS element.style.gridAutoRows is "initial" | 106 PASS element.style.gridAutoRows is "auto" |
107 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"10px" | 107 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"10px" |
108 PASS element.style.gridTemplateColumns is "10px" | 108 PASS element.style.gridTemplateColumns is "10px" |
109 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[l
ine] 20px" | 109 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[l
ine] 20px" |
110 PASS element.style.gridTemplateRows is "[line] 20px" | 110 PASS element.style.gridTemplateRows is "[line] 20px" |
111 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\
"a\"" | 111 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\
"a\"" |
112 PASS element.style.gridTemplateAreas is "\"a\"" | 112 PASS element.style.gridTemplateAreas is "\"a\"" |
113 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" | 113 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" |
114 PASS element.style.gridAutoFlow is "initial" | 114 PASS element.style.gridAutoFlow is "row" |
115 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "aut
o" | 115 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "aut
o" |
116 PASS element.style.gridAutoColumns is "initial" | 116 PASS element.style.gridAutoColumns is "auto" |
117 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" | 117 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
118 PASS element.style.gridAutoRows is "initial" | 118 PASS element.style.gridAutoRows is "auto" |
119 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" | 119 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" |
120 PASS element.style.gridTemplateColumns is "initial" | 120 PASS element.style.gridTemplateColumns is "none" |
121 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" | 121 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" |
122 PASS element.style.gridTemplateRows is "initial" | 122 PASS element.style.gridTemplateRows is "none" |
123 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" | 123 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" |
124 PASS element.style.gridTemplateAreas is "initial" | 124 PASS element.style.gridTemplateAreas is "none" |
125 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row de
nse" | 125 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row de
nse" |
126 PASS element.style.gridAutoFlow is "row dense" | 126 PASS element.style.gridAutoFlow is "row dense" |
127 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20p
x" | 127 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20p
x" |
128 PASS element.style.gridAutoColumns is "20px" | 128 PASS element.style.gridAutoColumns is "20px" |
129 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px" | 129 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px" |
130 PASS element.style.gridAutoRows is "20px" | 130 PASS element.style.gridAutoRows is "20px" |
131 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" | 131 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" |
132 PASS element.style.gridTemplateColumns is "initial" | 132 PASS element.style.gridTemplateColumns is "none" |
133 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" | 133 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" |
134 PASS element.style.gridTemplateRows is "initial" | 134 PASS element.style.gridTemplateRows is "none" |
135 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" | 135 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" |
136 PASS element.style.gridTemplateAreas is "initial" | 136 PASS element.style.gridTemplateAreas is "none" |
137 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column
" | 137 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column
" |
138 PASS element.style.gridAutoFlow is "column" | 138 PASS element.style.gridAutoFlow is "column" |
139 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10p
x" | 139 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10p
x" |
140 PASS element.style.gridAutoColumns is "10px" | 140 PASS element.style.gridAutoColumns is "10px" |
141 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px" | 141 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px" |
142 PASS element.style.gridAutoRows is "20px" | 142 PASS element.style.gridAutoRows is "20px" |
143 | 143 |
144 Test the initial value | 144 Test the initial value |
145 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" | 145 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
146 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" | 146 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
147 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" | 147 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
148 PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is
"row" | 148 PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is
"row" |
149 PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-columns')
is "auto" | 149 PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-columns')
is "auto" |
150 PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is
"auto" | 150 PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is
"auto" |
151 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
'none' | 151 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
'none' |
152 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'no
ne' | 152 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'no
ne' |
153 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is 'n
one' | 153 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is 'n
one' |
154 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row' | 154 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row' |
155 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'aut
o' | 155 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'aut
o' |
156 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto' | 156 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto' |
157 | 157 |
158 Test setting grid-template-columns and grid-template-rows back to 'none' through
JS | 158 Test setting grid-template-columns and grid-template-rows back to 'none' through
JS |
159 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" | 159 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" |
160 PASS element.style.gridTemplateColumns is "initial" | 160 PASS element.style.gridTemplateColumns is "none" |
161 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" | 161 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" |
162 PASS element.style.gridTemplateRows is "initial" | 162 PASS element.style.gridTemplateRows is "none" |
163 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" | 163 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" |
164 PASS element.style.gridTemplateAreas is "initial" | 164 PASS element.style.gridTemplateAreas is "none" |
165 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column
" | 165 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column
" |
166 PASS element.style.gridAutoFlow is "column" | 166 PASS element.style.gridAutoFlow is "column" |
167 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20p
x" | 167 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20p
x" |
168 PASS element.style.gridAutoColumns is "20px" | 168 PASS element.style.gridAutoColumns is "20px" |
169 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "10px" | 169 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "10px" |
170 PASS element.style.gridAutoRows is "10px" | 170 PASS element.style.gridAutoRows is "10px" |
171 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" | 171 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" |
172 PASS element.style.gridTemplateColumns is "none" | 172 PASS element.style.gridTemplateColumns is "none" |
173 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" | 173 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" |
174 PASS element.style.gridTemplateRows is "none" | 174 PASS element.style.gridTemplateRows is "none" |
175 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" | 175 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" |
176 PASS element.style.gridTemplateAreas is "none" | 176 PASS element.style.gridTemplateAreas is "none" |
177 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" | 177 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" |
178 PASS element.style.gridAutoFlow is "initial" | 178 PASS element.style.gridAutoFlow is "row" |
179 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "aut
o" | 179 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "aut
o" |
180 PASS element.style.gridAutoColumns is "initial" | 180 PASS element.style.gridAutoColumns is "auto" |
181 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" | 181 PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
182 PASS element.style.gridAutoRows is "initial" | 182 PASS element.style.gridAutoRows is "auto" |
183 | 183 |
184 Test the inherit value on reset-only subproperties (grid-*-gap) | 184 Test the inherit value on reset-only subproperties (grid-*-gap) |
185 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is
"0px" | 185 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is
"0px" |
186 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "0
px" | 186 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "0
px" |
187 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is
"20px" | 187 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is
"20px" |
188 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "1
00px" | 188 PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "1
00px" |
189 PASS successfullyParsed is true | 189 PASS successfullyParsed is true |
190 | 190 |
191 TEST COMPLETE | 191 TEST COMPLETE |
192 | 192 |
OLD | NEW |