| This test checks that the 'grid' shorthand is properly parsed and the longhand properties correctly assigned. |
| |
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". |
| |
| |
| Test getting the longhand values when shorthand is set through CSS. |
| PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridWithNone, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-columns') is "15px" |
| PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-rows') is "10px" |
| PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridWithTemplate, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-columns') is "15px" |
| PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-rows') is "10px" |
| PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridInherit, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridNoInherit, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-flow') is "column" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-columns') is "10px" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRows, '').getPropertyValue('grid-auto-rows') is "10px" |
| PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridWithAutoFlowNone, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-flow') is "column dense" |
| PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-columns') is "10px" |
| PASS window.getComputedStyle(gridWithAutoFlowColumnDense, '').getPropertyValue('grid-auto-rows') is "10px" |
| PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-flow') is "row dense" |
| PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-columns') is "10px" |
| PASS window.getComputedStyle(gridWithAutoFlowDenseRow, '').getPropertyValue('grid-auto-rows') is "10px" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-flow') is "column" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-columns') is "20px" |
| PASS window.getComputedStyle(gridWithAutoFlowAndRowsAndColumns, '').getPropertyValue('grid-auto-rows') is "10px" |
| |
| Test getting wrong values for 'grid' shorthand through CSS (they should resolve to the default: 'none') |
| PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridWithExplicitAndImplicit, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridWithMisplacedNone1, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridWithMisplacedNone2, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(gridWithMisplacedDense, '').getPropertyValue('grid-auto-rows') is "auto" |
| |
| Test getting and setting 'grid' shorthand through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px" |
| PASS element.style.gridTemplateColumns is "10px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px" |
| PASS element.style.gridTemplateRows is "20px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none" |
| PASS element.style.gridTemplateAreas is "none" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS element.style.gridAutoFlow is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS element.style.gridAutoColumns is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS element.style.gridAutoRows is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "10px" |
| PASS element.style.gridTemplateColumns is "10px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[line] 20px" |
| PASS element.style.gridTemplateRows is "[line] 20px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "\"a\"" |
| PASS element.style.gridTemplateAreas is "\"a\"" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS element.style.gridAutoFlow is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS element.style.gridAutoColumns is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS element.style.gridAutoRows is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none" |
| PASS element.style.gridTemplateColumns is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| PASS element.style.gridTemplateRows is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none" |
| PASS element.style.gridTemplateAreas is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row dense" |
| PASS element.style.gridAutoFlow is "row dense" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px" |
| PASS element.style.gridAutoColumns is "20px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px" |
| PASS element.style.gridAutoRows is "20px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none" |
| PASS element.style.gridTemplateColumns is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| PASS element.style.gridTemplateRows is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none" |
| PASS element.style.gridTemplateAreas is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column" |
| PASS element.style.gridAutoFlow is "column" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "10px" |
| PASS element.style.gridAutoColumns is "10px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "20px" |
| PASS element.style.gridAutoRows is "20px" |
| |
| Test the initial value |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is 'none' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is 'row' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto' |
| |
| Test setting grid-template-columns and grid-template-rows back to 'none' through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none" |
| PASS element.style.gridTemplateColumns is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| PASS element.style.gridTemplateRows is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none" |
| PASS element.style.gridTemplateAreas is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "column" |
| PASS element.style.gridAutoFlow is "column" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "20px" |
| PASS element.style.gridAutoColumns is "20px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "10px" |
| PASS element.style.gridAutoRows is "10px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none" |
| PASS element.style.gridTemplateColumns is "none" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| PASS element.style.gridTemplateRows is "none" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-areas') is "none" |
| PASS element.style.gridTemplateAreas is "none" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-flow') is "row" |
| PASS element.style.gridAutoFlow is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS element.style.gridAutoColumns is "initial" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS element.style.gridAutoRows is "initial" |
| |
| Test the inherit value on reset-only subproperties (grid-*-gap) |
| PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is "0px" |
| PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "0px" |
| PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-column-gap') is "20px" |
| PASS getComputedStyle(anotherElement, '').getPropertyValue('grid-row-gap') is "100px" |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |
