| 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 "7px 11px" |
| PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "17px 2px" |
| PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "400px 800px" |
| PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "150px 450px" |
| PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "3.5px 7px" |
| PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "4px 12px" |
| PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px 17px" |
| PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px 3px" |
| PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px 120px" |
| PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px 170px" |
| PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-columns') is "15px 0px 100px" |
| PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-rows') is "120px 18px 0px" |
| PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-columns') is "400px 120px" |
| PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-rows') is "210px 168px" |
| PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-columns') is "0px 0px" |
| PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-rows') is "0px 0px" |
| PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px 17px" |
| PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "16px 3px" |
| PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-columns') is "240px 15px" |
| PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-rows') is "120px 210px" |
| PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-columns') is "240px 15px" |
| PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-rows') is "120px 210px" |
| PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-columns') is "320px 480px" |
| PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-rows') is "225px 375px" |
| PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-columns') is "45px 755px" |
| PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-rows') is "586px 14px" |
| PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-columns') is "200px 100px" |
| PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-rows') is "150px 75px" |
| PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-columns') is "400px 80px" |
| PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-rows') is "88px 150px" |
| PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-columns') is "190px 80px" |
| PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-rows') is "150px 53px" |
| PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "400px 120px" |
| PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "150px 175px" |
| PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "0px 30px" |
| PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "132px 60px" |
| |
| |
| Test the initial value |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none' |
| |
| |
| Test getting and setting grid-template-rows and grid-template-columns through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px 22px" |
| PASS element.style.gridTemplateColumns is "18px 22px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px 70px" |
| PASS element.style.gridTemplateRows is "66px 70px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px 640px" |
| PASS element.style.gridTemplateColumns is "55% 80%" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px 378px" |
| PASS element.style.gridTemplateRows is "40% 63%" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 0px" |
| PASS element.style.gridTemplateColumns is "auto auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 0px" |
| PASS element.style.gridTemplateRows is "auto auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 160px 22px" |
| PASS element.style.gridTemplateColumns is "auto 16em 22px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "336px 100px 0px" |
| PASS element.style.gridTemplateRows is "56% 10em auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 20px" |
| PASS element.style.gridTemplateColumns is "16em minmax(16px, 20px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 0px" |
| PASS element.style.gridTemplateRows is "minmax(10%, 15%) auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 640px" |
| PASS element.style.gridTemplateColumns is "16em 2fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px 0px" |
| PASS element.style.gridTemplateRows is "14fr auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "400px 96px" |
| PASS element.style.gridTemplateColumns is "50% 12vw" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "30px 510px" |
| PASS element.style.gridTemplateRows is "5% 85vh" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "25px 20px" |
| PASS element.style.gridTemplateColumns is "calc(25px) calc(2em)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 60px" |
| PASS element.style.gridTemplateRows is "auto calc(10%)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "345px 92px" |
| PASS element.style.gridTemplateColumns is "calc(25px + 40%) minmax(min-content, calc(10% + 12px))" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px 0px" |
| PASS element.style.gridTemplateRows is "minmax(calc(75% - 350px), max-content) auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 16px" |
| PASS element.style.gridTemplateColumns is "auto minmax(16px, auto)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 80px" |
| PASS element.style.gridTemplateRows is "minmax(auto, 15%) 10vw" |
| |
| |
| Test getting wrong values set from CSS |
| PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns') is 'none' |
| PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows') is 'none' |
| PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns') is 'none' |
| PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows') is 'none' |
| |
| |
| Test setting and getting wrong values from 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" |
| |
| |
| Test setting grid-template-columns and grid-template-rows to 'inherit' through JS |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 750px [last]" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [middle] 45px" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 0px [last]" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [middle] 45px" |
| |
| |
| Test setting grid-template-columns and grid-template-rows to 'initial' through JS |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "1200px [middle] 55px" |
| PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "200px [line] 400px [line]" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none' |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |
