Test that setting and getting grid-column-end and grid-row-end works as expected

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


Test getting grid-column-end and grid-row-end set through CSS
PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column') is "auto / auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row') is "auto / auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridElement, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column') is "auto / 10"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-column-end') is "10"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row') is "auto / 15"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('grid-row-end') is "15"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column') is "auto / -10"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-column-end') is "-10"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row') is "auto / -15"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('grid-row-end') is "-15"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column') is "auto / span 2"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-column-end') is "span 2"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row') is "auto / span 9"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithBeforeSpan, '').getPropertyValue('grid-row-end') is "span 9"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column') is "auto / span 2"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-column-end') is "span 2"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row') is "auto / span 9"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithAfterSpan, '').getPropertyValue('grid-row-end') is "span 9"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column') is "auto / auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row') is "auto / auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithOnlySpan, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column') is "auto / auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row') is "auto / auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column') is "auto / first"
PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-column-end') is "first"
PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row') is "auto / last"
PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithCustomIdent, '').getPropertyValue('grid-row-end') is "last"
PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column') is "auto / 2 first"
PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-column-end') is "2 first"
PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row') is "auto / 3 last"
PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithNumberCustomIdent, '').getPropertyValue('grid-row-end') is "3 last"
PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column') is "auto / span 1 first"
PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-column-end') is "span 1 first"
PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row') is "auto / span 1 last"
PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithSpanCustomIdentElement, '').getPropertyValue('grid-row-end') is "span 1 last"
PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column') is "auto / span 2 first"
PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-column-end') is "span 2 first"
PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row') is "auto / span 3 last"
PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithSpanNumberCustomIdentElement, '').getPropertyValue('grid-row-end') is "span 3 last"
PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column') is "auto / firstArea"
PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-column-end') is "firstArea"
PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row') is "auto / thirdArea"
PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItemWithArea, '').getPropertyValue('grid-row-end') is "thirdArea"

Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'

Test getting and setting grid-column-end and grid-row-end through JS
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / 18"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "18"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 66"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "66"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / -55"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "-55"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / -40"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "-40"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / first"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "first"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / last"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "last"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 7"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 7"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 1 first"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 1 first"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / span 1 last"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 1 last"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / thirdArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "thirdArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / nonExistentArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "nonExistentArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "secondArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / nonExistentArea"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "nonExistentArea"

Test setting grid-start and grid-before to 'inherit' through JS
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 18"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "18"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 7"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "7"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "auto / span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "auto / 7"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "7"

Test setting grid-start and grid-before to 'initial' through JS
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "span 2"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / 5"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "5"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column') is "1 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "1"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row') is "span 3 / auto"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 3"
PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"

Test setting grid-column-end and grid-row-end back to 'auto' through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is '18'
PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / 18'
PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is '66'
PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / 66'
PASS getComputedStyle(element, '').getPropertyValue('grid-column-end') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-column') is 'auto / auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-row-end') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-row') is 'auto / auto'
PASS successfullyParsed is true

TEST COMPLETE