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 "162px"
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 "11px"
PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px"
PASS window.getComputedStyle(gridWithAutoElement, '').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 "11px"
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 "11px"
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 "11px"
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 "11px"
PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-columns') is "7px"
PASS window.getComputedStyle(gridWithFitContentFunctionElement, '').getPropertyValue('grid-template-rows') is "11px"

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"

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"

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"

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] 20px'

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