Test that setting/getting grid-template-{columns|rows} with repeat(auto-fill|auto-fit,) works as expected

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


Test auto-repeat syntax.
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 200px [foo bar] 200px [foo bar] 200px [foo bar] 200px"
PASS element.style.gridTemplateColumns is "repeat(auto-fill, [foo bar] 200px)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "200px [foo bar] 200px [foo bar] 200px [foo bar]"
PASS element.style.gridTemplateRows is "repeat(auto-fill, 20em [foo bar])"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 400px [foo bar] 400px"
PASS element.style.gridTemplateColumns is "repeat(auto-fill, [foo bar] minmax(300px, 1fr))"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 175px [bar foo] 175px [bar foo] 175px [bar]"
PASS element.style.gridTemplateRows is "repeat(auto-fill, [foo] minmax(175px, max-content) [bar])"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "100px 100px 100px 250px 250px"
PASS element.style.gridTemplateColumns is "repeat(auto-fill, minmax(50px, 100px)) repeat(2, 250px)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "450px 50px [bar] 50px [bar foo] 10px [foo] 10px"
PASS element.style.gridTemplateRows is "repeat(1, 450px) repeat(auto-fill, minmax(max-content, 5em) [bar]) repeat(2, [foo] 1em)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[start] 80px [foo bar] 200px [foo bar] 200px [foo bar] 200px [end]"
PASS element.style.gridTemplateColumns is "[start] 10% repeat(auto-fill, [foo bar] 200px) [end]"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "75px [prev] 200px [foo bar next] 150px [last end]"
PASS element.style.gridTemplateRows is "75px [prev] repeat(auto-fill, 20em [foo bar]) [next] 15em [last end]"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px [foo bar] 0px"
PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] 150px)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px [foo bar] 0px [foo bar]"
PASS element.style.gridTemplateRows is "repeat(auto-fit, 24em [foo bar])"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[start] 200px 100px [end start] 200px 100px [end]"
PASS element.style.gridTemplateColumns is "repeat(auto-fill, [start] 200px 100px [end])"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px [foo a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c a] 20px [b] 60px [c bar] 30px"
PASS element.style.gridTemplateRows is "100px [foo] repeat(auto-fill, [a] 2em [b] 10% [c]) [bar] 3em"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[foo bar] 0px [foo bar] 0px"
PASS element.style.gridTemplateColumns is "repeat(auto-fit, [foo bar] minmax(270px, 1fr))"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[foo] 0px [bar foo] 0px [bar foo] 0px [bar]"
PASS element.style.gridTemplateRows is "repeat(auto-fit, [foo] minmax(20em, max-content) [bar])"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 0px 20px 20px"
PASS element.style.gridTemplateColumns is "repeat(auto-fit, minmax(300px, min-content)) repeat(2, 20px)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "60px 0px [bar foo] 10px [foo] 10px"
PASS element.style.gridTemplateRows is "repeat(1, 10%) repeat(auto-fit, minmax(30em, max-content) [bar]) repeat(2, [foo] 1em)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c d] 20px [e]"
PASS element.style.gridTemplateColumns is "[a] repeat(auto-fit, [z] 100px [y]) [b] 30px [c d] 20px [e]"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y a b] 30px [c d] 20px [e]"
PASS element.style.gridTemplateRows is "repeat(auto-fit, [z] 100px [y]) [a b] 30px [c d] 20px [e]"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[a z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y b] 30px [c] 20px [e]"
PASS element.style.gridTemplateColumns is "[a] repeat(auto-fit, [z] 100px [y]) repeat(1, [b] 30px [c]) 20px [e]"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "[a b] 30px [c d] 20px [e z] 0px [y z] 0px [y z] 0px [y z] 0px [y z] 0px [y]"
PASS element.style.gridTemplateRows is "[a b] 30px [c d] 20px [e] repeat(auto-fit, [z] 100px [y])"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "[start] 0px 0px [end start] 0px 0px [end]"
PASS element.style.gridTemplateColumns is "repeat(auto-fit, [start] 200px 100px [end])"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px [foo a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c a] 0px [b] 0px [c bar] 30px"
PASS element.style.gridTemplateRows is "100px [foo] repeat(auto-fit, [a] 2em [b] 10% [c]) [bar] 3em"

Test invalid repeat syntax.
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS successfullyParsed is true

TEST COMPLETE