| Test that setting and getting grid-auto-columns and grid-auto-rows works as expected |
| |
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". |
| |
| |
| Test getting grid-auto-columns and grid-auto-rows set through CSS |
| PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-rows') is "30px" |
| PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-auto-columns') is "50px" |
| PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-rows') is "minmax(10%, 15px)" |
| PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-auto-columns') is "minmax(30%, 100px)" |
| PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-rows') is "min-content" |
| PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-auto-columns') is "max-content" |
| PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('grid-auto-rows') is "minmax(auto, 48px)" |
| PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('grid-auto-columns') is "minmax(80px, auto)" |
| PASS window.getComputedStyle(gridAutoFitContent, '').getPropertyValue('grid-auto-rows') is "fit-content(50%)" |
| PASS window.getComputedStyle(gridAutoFitContent, '').getPropertyValue('grid-auto-columns') is "fit-content(30px)" |
| |
| Test that getting grid-template-columns and grid-template-rows set through CSS only lists explicit tracks, but not implicit ones |
| PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px" |
| PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "50px" |
| PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-rows') is "30px" |
| PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-auto-columns') is "40px" |
| PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-columns') is "20px" |
| PASS window.getComputedStyle(gridAutoFixedFixedWithFixedFixedWithChildren, '').getPropertyValue('grid-template-rows') is "15px" |
| PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridAutoMultipleTracks, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridAutoMultipleTracksNegativeIndexes, '').getPropertyValue('grid-template-rows') is "none" |
| |
| Test that grid-template-* definitions are not affected by grid-auto-* definitions |
| PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridAutoFixedFixed, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('grid-template-rows') is "none" |
| PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-template-columns') is "none" |
| PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('grid-template-rows') is "none" |
| |
| Test the initial value |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto' |
| |
| Test getting and setting grid-auto-columns and grid-auto-rows through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "180px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "660px" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "minmax(min-content, 48px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "minmax(80px, min-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "minmax(min-content, max-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "minmax(max-content, min-content)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "minmax(min-content, 10px) 48px 5%" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto 30px minmax(10%, 60%)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "fit-content(10px) fit-content(30%)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "fit-content(5%) fit-content(40px)" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "2fr" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "1fr" |
| |
| Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is "auto" |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is "auto" |
| |
| Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '50px' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is '101%' |
| |
| Test setting grid-auto-columns and grid-auto-rows to 'initial' through JS |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is '150%' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is '1fr' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-columns') is 'auto' |
| PASS getComputedStyle(element, '').getPropertyValue('grid-auto-rows') is 'auto' |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |
