| 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 |