| Test that computed style for grid-template-columns and grid-template-rows works as expected with content alignment and gaps. |
| |
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". |
| |
| |
| PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridContentStart, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridContentCenter, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridContentEnd, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridContentSpaceBetween, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridContentSpaceAround, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridContentSpaceEvenly, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridContentStretch, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridGapsContentStart, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridGapsContentCenter, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridGapsContentEnd, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridGapsContentSpaceBetween, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridGapsContentSpaceAround, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridGapsContentSpaceEvenly, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-columns') is "300px 200px 100px" |
| PASS window.getComputedStyle(gridGapsContentStretch, '').getPropertyValue('grid-template-rows') is "150px 100px 50px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-columns') is "0px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitEmpty, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-columns') is "75px 0px 0px" |
| PASS window.getComputedStyle(gridAutoFitFirstColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-columns') is "0px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitSecondColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-columns') is "0px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitThirdColumnChild, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-columns') is "75px 75px 0px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-columns') is "0px 75px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoConsecutiveChildrenTwo, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-columns') is "75px 0px 75px" |
| PASS window.getComputedStyle(gridAutoFitTwoAlternatingChildren, '').getPropertyValue('grid-template-rows') is "25px" |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |
