| CONSOLE WARNING: line 1: 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(gridWithNoneElement, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "10px" |
| PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "15px" |
| PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px" |
| PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "150px" |
| PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-columns') is "3.5px" |
| PASS window.getComputedStyle(gridWithPercentWithoutSizeWithChildren, '').getPropertyValue('grid-template-rows') is "4px" |
| PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS window.getComputedStyle(gridWithAutoWithoutSizeElement, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS window.getComputedStyle(gridWithAutoWithoutSizeElement, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px" |
| PASS window.getComputedStyle(gridWithAutoWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px" |
| PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px" |
| PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px" |
| PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-columns') is "64px" |
| PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-rows') is "60px" |
| PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('grid-template-columns') is "80px" |
| PASS window.getComputedStyle(gridWithMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px" |
| PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS window.getComputedStyle(gridWithMinContentElement, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "17px" |
| PASS window.getComputedStyle(gridWithMinContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px" |
| PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS window.getComputedStyle(gridWithMaxContentElement, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "17px" |
| PASS window.getComputedStyle(gridWithMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px" |
| PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-template-columns') is "800px" |
| PASS window.getComputedStyle(gridWithFractionElement, '').getPropertyValue('grid-template-rows') is "600px" |
| PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('grid-template-columns') is "150px" |
| PASS window.getComputedStyle(gridWithCalcElement, '').getPropertyValue('grid-template-rows') is "75px" |
| PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('grid-template-columns') is "550px" |
| PASS window.getComputedStyle(gridWithCalcComplexElement, '').getPropertyValue('grid-template-rows') is "465px" |
| PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "80px" |
| PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px" |
| PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "415px" |
| PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "300px" |
| PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-columns') is "20px" |
| PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('grid-template-rows') is "16px" |
| PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-columns') is "7px" |
| PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-rows') is "16px" |
| |
| Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none') |
| PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-rows') is "none" |
| |
| 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 getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none' |
| |
| Test getting and setting grid-template-columns and grid-template-rows through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px" |
| PASS element.style.gridTemplateColumns is "18px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px" |
| PASS element.style.gridTemplateRows is "66px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px" |
| PASS element.style.gridTemplateColumns is "55%" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px" |
| PASS element.style.gridTemplateRows is "40%" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS element.style.gridTemplateRows is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "80px" |
| PASS element.style.gridTemplateColumns is "10vw" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "150px" |
| PASS element.style.gridTemplateRows is "25vh" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "min-content" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS element.style.gridTemplateRows is "min-content" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "max-content" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS element.style.gridTemplateRows is "max-content" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "fit-content(100px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS element.style.gridTemplateRows is "fit-content(25%)" |
| |
| Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px" |
| PASS element.style.gridTemplateColumns is "minmax(55%, 45px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px" |
| PASS element.style.gridTemplateRows is "minmax(30px, 40%)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "220px" |
| PASS element.style.gridTemplateColumns is "minmax(22em, 8vh)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "80px" |
| PASS element.style.gridTemplateRows is "minmax(10vw, 5em)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "48px" |
| PASS element.style.gridTemplateColumns is "minmax(min-content, 8vh)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "80px" |
| PASS element.style.gridTemplateRows is "minmax(10vw, min-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "220px" |
| PASS element.style.gridTemplateColumns is "minmax(22em, max-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "50px" |
| PASS element.style.gridTemplateRows is "minmax(max-content, 5em)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "minmax(min-content, max-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS element.style.gridTemplateRows is "minmax(max-content, min-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "minmax(auto, max-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "80px" |
| PASS element.style.gridTemplateRows is "minmax(10vw, auto)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "800px" |
| PASS element.style.gridTemplateColumns is "3600fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px" |
| PASS element.style.gridTemplateRows is "154fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "800px" |
| PASS element.style.gridTemplateColumns is "3.1459fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px" |
| PASS element.style.gridTemplateRows is "2.718fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "800px" |
| PASS element.style.gridTemplateColumns is "3fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px" |
| PASS element.style.gridTemplateRows is "4fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "0fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS element.style.gridTemplateRows is "0fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px" |
| PASS element.style.gridTemplateColumns is "minmax(auto, 0fr)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px" |
| PASS element.style.gridTemplateRows is "minmax(auto, 0fr)" |
| |
| Test getting and setting grid-template-columns and grid-template-rows to calc() values through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "150px" |
| PASS element.style.gridTemplateColumns is "calc(150px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "75px" |
| PASS element.style.gridTemplateRows is "calc(75px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "370px" |
| PASS element.style.gridTemplateColumns is "calc(50% - 30px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "135px" |
| PASS element.style.gridTemplateRows is "calc(75px + 10%)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "200px" |
| PASS element.style.gridTemplateColumns is "minmax(25%, calc(30px))" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "450px" |
| PASS element.style.gridTemplateRows is "minmax(calc(75%), 40px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "110px" |
| PASS element.style.gridTemplateColumns is "minmax(10%, calc(30px + 10%))" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "200px" |
| PASS element.style.gridTemplateRows is "minmax(calc(25% - 50px), 200px)" |
| |
| Test setting grid-template-columns and grid-template-rows to bad values 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 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 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 window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none" |
| |
| Test setting grid-template-columns and grid-template-rows back to 'none' through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px" |
| PASS element.style.gridTemplateColumns is "18px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px" |
| PASS element.style.gridTemplateRows is "66px" |
| 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" |
| |
| Test setting grid-template-columns and grid-template-rows to 'inherit' through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '50px [last]' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 101px' |
| |
| Test setting grid-template-columns and grid-template-rows to 'initial' through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '450px [last]' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 150px' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none' |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |
