OLD | NEW |
(Empty) | |
| 1 This test checks that the 'grid-template' shorthand is properly parsed and the l
onghand properties correctly assigned. |
| 2 |
| 3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
". |
| 4 |
| 5 |
| 6 Test getting grid-template-areas set through CSS. |
| 7 PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('grid-te
mplate-columns') is "none" |
| 8 PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('grid-te
mplate-rows') is "none" |
| 9 PASS window.getComputedStyle(gridTemplateWithNone, '').getPropertyValue('grid-te
mplate-areas') is "none" |
| 10 PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('grid-
template-columns') is "10px" |
| 11 PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('grid-
template-rows') is "15px" |
| 12 PASS window.getComputedStyle(gridTemplateSimpleForm, '').getPropertyValue('grid-
template-areas') is "none" |
| 13 PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPrope
rtyValue('grid-template-columns') is "none" |
| 14 PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPrope
rtyValue('grid-template-rows') is "15px" |
| 15 PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneColumns, '').getPrope
rtyValue('grid-template-areas') is "none" |
| 16 PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getProperty
Value('grid-template-columns') is "10px" |
| 17 PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getProperty
Value('grid-template-rows') is "none" |
| 18 PASS window.getComputedStyle(gridTemplateSimpleFormWithNoneRows, '').getProperty
Value('grid-template-areas') is "none" |
| 19 PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValu
e('grid-template-columns') is "none" |
| 20 PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValu
e('grid-template-rows') is "none" |
| 21 PASS window.getComputedStyle(gridTemplateSimpleFormWithNone, '').getPropertyValu
e('grid-template-areas') is "none" |
| 22 PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('grid
-template-columns') is "10px" |
| 23 PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('grid
-template-rows') is "15px" |
| 24 PASS window.getComputedStyle(gridTemplateComplexForm, '').getPropertyValue('grid
-template-areas') is "\"a\"" |
| 25 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getProper
tyValue('grid-template-columns') is "10px" |
| 26 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getProper
tyValue('grid-template-rows') is "(head) 15px (tail)" |
| 27 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNames, '').getProper
tyValue('grid-template-areas') is "\"a\"" |
| 28 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns
, '').getPropertyValue('grid-template-columns') is "10px" |
| 29 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns
, '').getPropertyValue('grid-template-rows') is "(head) 15px (tail)" |
| 30 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleColumns
, '').getPropertyValue('grid-template-areas') is "\"a b\"" |
| 31 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '
').getPropertyValue('grid-template-columns') is "10px" |
| 32 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '
').getPropertyValue('grid-template-rows') is "(head1) 15px (tail1 head2) 20px (t
ail2)" |
| 33 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRows, '
').getPropertyValue('grid-template-areas') is "\"a\" \"b\"" |
| 34 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAnd
Columns, '').getPropertyValue('grid-template-columns') is "(first) 10px (nav nav
2) 15px (nav nav2) 15px" |
| 35 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAnd
Columns, '').getPropertyValue('grid-template-rows') is "100px (nav nav2) 25px (n
av nav2) 25px (last)" |
| 36 PASS window.getComputedStyle(gridTemplateComplexFormWithLineNamesMultipleRowsAnd
Columns, '').getPropertyValue('grid-template-areas') is "\"a b c\" \"d e f\" \"g
h i\"" |
| 37 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyVal
ue('grid-template-columns') is "10px" |
| 38 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyVal
ue('grid-template-rows') is "0px" |
| 39 PASS window.getComputedStyle(gridTemplateComplexFormWithAuto, '').getPropertyVal
ue('grid-template-areas') is "\"a\"" |
| 40 PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyVa
lue('grid-template-columns') is "none" |
| 41 PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyVa
lue('grid-template-rows') is "0px" |
| 42 PASS window.getComputedStyle(gridTemplateComplexFormOnlyAreas, '').getPropertyVa
lue('grid-template-areas') is "\"a\"" |
| 43 |
| 44 Test getting wrong values for grid-template shorthand through CSS (they should r
esolve to the default: 'none') |
| 45 PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('gr
id-template-columns') is "none" |
| 46 PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('gr
id-template-rows') is "none" |
| 47 PASS window.getComputedStyle(gridTemplateMultipleSlash, '').getPropertyValue('gr
id-template-areas') is "none" |
| 48 PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyV
alue('grid-template-columns') is "none" |
| 49 PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyV
alue('grid-template-rows') is "none" |
| 50 PASS window.getComputedStyle(gridTemplateSimpleFormJustColumns, '').getPropertyV
alue('grid-template-areas') is "none" |
| 51 PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue(
'grid-template-columns') is "none" |
| 52 PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue(
'grid-template-rows') is "none" |
| 53 PASS window.getComputedStyle(gridTemplateSimpleFormNoRows, '').getPropertyValue(
'grid-template-areas') is "none" |
| 54 PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyVal
ue('grid-template-columns') is "none" |
| 55 PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyVal
ue('grid-template-rows') is "none" |
| 56 PASS window.getComputedStyle(gridTemplateSimpleFormNoColumns, '').getPropertyVal
ue('grid-template-areas') is "none" |
| 57 PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getProperty
Value('grid-template-columns') is "none" |
| 58 PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getProperty
Value('grid-template-rows') is "none" |
| 59 PASS window.getComputedStyle(gridTemplateSimpleFormNoColumnSize, '').getProperty
Value('grid-template-areas') is "none" |
| 60 PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getProper
tyValue('grid-template-columns') is "none" |
| 61 PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getProper
tyValue('grid-template-rows') is "none" |
| 62 PASS window.getComputedStyle(gridTemplateSimpleFormWithFitContent, '').getProper
tyValue('grid-template-areas') is "none" |
| 63 PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPrope
rtyValue('grid-template-columns') is "none" |
| 64 PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPrope
rtyValue('grid-template-rows') is "none" |
| 65 PASS window.getComputedStyle(gridTemplateSimpleFormWithWrongRepeat, '').getPrope
rtyValue('grid-template-areas') is "none" |
| 66 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPr
opertyValue('grid-template-columns') is "none" |
| 67 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPr
opertyValue('grid-template-rows') is "none" |
| 68 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone1, '').getPr
opertyValue('grid-template-areas') is "none" |
| 69 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPr
opertyValue('grid-template-columns') is "none" |
| 70 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPr
opertyValue('grid-template-rows') is "none" |
| 71 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone2, '').getPr
opertyValue('grid-template-areas') is "none" |
| 72 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPr
opertyValue('grid-template-columns') is "none" |
| 73 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPr
opertyValue('grid-template-rows') is "none" |
| 74 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone3, '').getPr
opertyValue('grid-template-areas') is "none" |
| 75 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPr
opertyValue('grid-template-columns') is "none" |
| 76 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPr
opertyValue('grid-template-rows') is "none" |
| 77 PASS window.getComputedStyle(gridTemplateSimpleFormWithMisplacedNone4, '').getPr
opertyValue('grid-template-areas') is "none" |
| 78 PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyV
alue('grid-template-columns') is "none" |
| 79 PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyV
alue('grid-template-rows') is "none" |
| 80 PASS window.getComputedStyle(gridTemplateComplexFormWithRepeat, '').getPropertyV
alue('grid-template-areas') is "none" |
| 81 PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getProp
ertyValue('grid-template-columns') is "none" |
| 82 PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getProp
ertyValue('grid-template-rows') is "none" |
| 83 PASS window.getComputedStyle(gridTemplateComplexFormWithWrongRepeat, '').getProp
ertyValue('grid-template-areas') is "none" |
| 84 PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPro
pertyValue('grid-template-columns') is "none" |
| 85 PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPro
pertyValue('grid-template-rows') is "none" |
| 86 PASS window.getComputedStyle(griTemplateComplexFormdWithFitAvailable, '').getPro
pertyValue('grid-template-areas') is "none" |
| 87 PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropert
yValue('grid-template-columns') is "none" |
| 88 PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropert
yValue('grid-template-rows') is "none" |
| 89 PASS window.getComputedStyle(gridTemplateComplexFormNoColumnSize, '').getPropert
yValue('grid-template-areas') is "none" |
| 90 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getP
ropertyValue('grid-template-columns') is "none" |
| 91 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getP
ropertyValue('grid-template-rows') is "none" |
| 92 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize1, '').getP
ropertyValue('grid-template-areas') is "none" |
| 93 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getP
ropertyValue('grid-template-columns') is "none" |
| 94 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getP
ropertyValue('grid-template-rows') is "none" |
| 95 PASS window.getComputedStyle(gridTemplateComplexFormMisplacedRowsSize2, '').getP
ropertyValue('grid-template-areas') is "none" |
| 96 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getP
ropertyValue('grid-template-columns') is "none" |
| 97 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getP
ropertyValue('grid-template-rows') is "none" |
| 98 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing1, '').getP
ropertyValue('grid-template-areas') is "none" |
| 99 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getP
ropertyValue('grid-template-columns') is "none" |
| 100 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getP
ropertyValue('grid-template-rows') is "none" |
| 101 PASS window.getComputedStyle(gridTemplateComplexFormColumnsNotParsing2, '').getP
ropertyValue('grid-template-areas') is "none" |
| 102 PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getProp
ertyValue('grid-template-columns') is "none" |
| 103 PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getProp
ertyValue('grid-template-rows') is "none" |
| 104 PASS window.getComputedStyle(gridTemplateComplexFormWithNoneColumns, '').getProp
ertyValue('grid-template-areas') is "none" |
| 105 |
| 106 Test the initial value |
| 107 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
| 108 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
| 109 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
| 110 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
'none' |
| 111 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'no
ne' |
| 112 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is 'n
one' |
| 113 |
| 114 Test setting grid-template-columns and grid-template-rows back to 'none' through
JS |
| 115 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"10px" |
| 116 PASS element.style.gridTemplateColumns is "10px" |
| 117 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "(l
ine) 20px" |
| 118 PASS element.style.gridTemplateRows is "(line) 20px" |
| 119 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\
"a\"" |
| 120 PASS element.style.gridTemplateAreas is "\"a\"" |
| 121 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" |
| 122 PASS element.style.gridTemplateColumns is "none" |
| 123 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "no
ne" |
| 124 PASS element.style.gridTemplateRows is "none" |
| 125 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" |
| 126 PASS element.style.gridTemplateAreas is "none" |
| 127 |
| 128 Test getting and setting grid-template shorthand through JS |
| 129 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"18px" |
| 130 PASS element.style.gridTemplateColumns is "18px" |
| 131 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66
px" |
| 132 PASS element.style.gridTemplateRows is "66px" |
| 133 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "n
one" |
| 134 PASS element.style.gridTemplateAreas is "none" |
| 135 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"10px" |
| 136 PASS element.style.gridTemplateColumns is "10px" |
| 137 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "(h
ead) 15px (tail)" |
| 138 PASS element.style.gridTemplateRows is "(head) 15px (tail)" |
| 139 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\
"a\"" |
| 140 PASS element.style.gridTemplateAreas is "\"a\"" |
| 141 PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is
"none" |
| 142 PASS element.style.gridTemplateColumns is "none" |
| 143 PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0p
x" |
| 144 PASS element.style.gridTemplateRows is "auto" |
| 145 PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\
"a\"" |
| 146 PASS element.style.gridTemplateAreas is "\"a\"" |
| 147 |
| 148 Test setting grid-template shorthand to bad values through JS |
| 149 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
| 150 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
| 151 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
| 152 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
| 153 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
| 154 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
| 155 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
| 156 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
| 157 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
| 158 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
| 159 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
| 160 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
| 161 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
| 162 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
| 163 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
| 164 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-column
s') is "none" |
| 165 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows')
is "none" |
| 166 PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas'
) is "none" |
| 167 PASS successfullyParsed is true |
| 168 |
| 169 TEST COMPLETE |
| 170 |
OLD | NEW |