| CONSOLE WARNING: Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See https://www.chromestatus.com/feature/6708326821789696 for more details. |
| Test that setting and getting grid-template-columns and grid-template-rows works as expected |
| |
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". |
| |
| |
| Test getting grid-template-columns and grid-template-rows set through CSS |
| PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "[first] 10px" |
| PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "[first] 15px" |
| PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px [last]" |
| PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "150px [last]" |
| PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px [last]" |
| PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px [last]" |
| PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "38.5px [last]" |
| PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "5.5px [last]" |
| PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "[first] 0px" |
| PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px [last]" |
| PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-columns') is "[first] 77px" |
| PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-rows') is "22px [last]" |
| PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-columns') is "[first] 80px" |
| PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-rows') is "300px [last]" |
| PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('grid-template-columns') is "[first nav] 10px [last]" |
| PASS window.getComputedStyle(gridWithFixedMultiple, '').getPropertyValue('grid-template-rows') is "[first nav] 15px [last]" |
| PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('grid-template-columns') is "[first nav] 80px [nav] 120px [last]" |
| PASS window.getComputedStyle(gridWithPercentageSameStringMultipleTimes, '').getPropertyValue('grid-template-rows') is "[first nav2] 150px [nav2] 450px [last]" |
| PASS window.getComputedStyle(gridWithRepeatElement, '').getPropertyValue('grid-template-columns') is "[first] 10px [nav nav2] 400px [nav nav2] 400px" |
| PASS window.getComputedStyle(gridWithRepeatElement, '').getPropertyValue('grid-template-rows') is "100px [nav nav2] 150px [nav nav2] 150px [last]" |
| PASS window.getComputedStyle(gridWithEmptyBrackets, '').getPropertyValue('grid-template-columns') is "10px" |
| PASS window.getComputedStyle(gridWithEmptyBrackets, '').getPropertyValue('grid-template-rows') is "20px 50px" |
| |
| Test getting and setting grid-template-columns and grid-template-rows through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 18px" |
| PASS element.style.gridTemplateColumns is "[first] 18px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px [last]" |
| PASS element.style.gridTemplateRows is "66px [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 440px" |
| PASS element.style.gridTemplateColumns is "[first] 55%" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px [last]" |
| PASS element.style.gridTemplateRows is "40% [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px" |
| PASS element.style.gridTemplateColumns is "[first] auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]" |
| PASS element.style.gridTemplateRows is "auto [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px" |
| PASS element.style.gridTemplateColumns is "[first] min-content" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]" |
| PASS element.style.gridTemplateRows is "min-content [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px" |
| PASS element.style.gridTemplateColumns is "[first] max-content" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]" |
| PASS element.style.gridTemplateRows is "max-content [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 440px" |
| PASS element.style.gridTemplateColumns is "[first] minmax(55%, 45px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px [last]" |
| PASS element.style.gridTemplateRows is "minmax(30px, 40%) [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 220px" |
| PASS element.style.gridTemplateColumns is "[first] minmax(22em, max-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "50px [last]" |
| PASS element.style.gridTemplateRows is "minmax(max-content, 5em) [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 220px" |
| PASS element.style.gridTemplateColumns is "[first] minmax(22em, min-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "50px [last]" |
| PASS element.style.gridTemplateRows is "minmax(min-content, 5em) [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px" |
| PASS element.style.gridTemplateColumns is "[first] minmax(min-content, max-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [last]" |
| PASS element.style.gridTemplateRows is "minmax(max-content, min-content) [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first nav] 0px [last]" |
| PASS element.style.gridTemplateColumns is "[first nav] minmax(min-content, max-content) [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[first nav] 0px [last]" |
| PASS element.style.gridTemplateRows is "[first nav] minmax(max-content, min-content) [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first nav] 0px [nav] 0px [last]" |
| PASS element.style.gridTemplateColumns is "[first nav] minmax(min-content, max-content) [nav] auto [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[first nav2] 0px [nav2] 15px [last]" |
| PASS element.style.gridTemplateRows is "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo] 0px [bar]" |
| PASS element.style.gridTemplateColumns is "[foo bar] auto [foo] auto [bar]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo bar] 0px [foo] 0px [bar]" |
| PASS element.style.gridTemplateRows is "[foo bar] auto [foo] auto [bar]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[first] 0px [foo bar] 20px [foo bar] 20px" |
| PASS element.style.gridTemplateColumns is "[first] auto [foo bar] 20px [foo bar] 20px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "220px [foo] 300px [baz]" |
| PASS element.style.gridTemplateRows is "220px [foo] 50% [baz]" |
| |
| Test getting invalid grid-template-columns and grid-template-rows set through CSS |
| PASS window.getComputedStyle(gridWithoutBrackets, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithoutBrackets, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithInvalidNestedBrackets, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithInvalidNestedBrackets, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithUnbalancedBrackets, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithUnbalancedBrackets, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedBrackets, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithMisplacedBrackets, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithContiguousBrackets, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithContiguousBrackets, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithInvalidCustomIdents, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithInvalidCustomIdents, '').getPropertyValue('grid-template-rows') is "none" |
| |
| Test getting and setting invalid grid-template-columns and grid-template-rows through JS |
| 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-columns') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| 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-columns') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| 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-columns') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |
