This test checks that grid-area is properly parsed and stored internally.

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


Test getting grid-area set through CSS
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "thirdArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "thirdArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "thirdArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "thirdArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "firstArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "firstArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "10"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-5"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 8"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "9"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "firstArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "nonexistent"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "1 foobar"

Test getting and setting grid-area set through JS
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "10"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 3"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"

Test setting some positions to invalid values through JS
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"