| 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 "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 |
| |
