blob: f7414aa8b1af4305d8b615ddb30d55af87bdc102 [file] [log] [blame]
Test that setting and getting grid-columns and grid-rows works as expected
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Test getting |display| set through CSS
PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-columns') is '7px 11px'
PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows') is '17px 2px'
PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-columns') is '53% 99%'
PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-rows') is '27% 52%'
PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-columns') is 'auto auto'
PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-rows') is 'auto auto'
PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-columns') is '100px 120px'
PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-rows') is '150px 170px'
PASS getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-columns') is '15px auto 100px'
PASS getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-rows') is '120px 18px auto'
PASS getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-columns') is '50% 120px'
PASS getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-rows') is '35% 168px'
PASS getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-columns') is '-webkit-min-content -webkit-max-content'
PASS getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-rows') is '-webkit-max-content -webkit-min-content'
PASS getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-columns') is 'minmax(45px, 30%) 15px'
PASS getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-rows') is '120px minmax(35%, 10px)'
PASS getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-columns') is 'minmax(-webkit-min-content, 30%) 15px'
PASS getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-rows') is '120px minmax(35%, -webkit-max-content)'
PASS getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-columns') is '1fr 2fr'
PASS getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-rows') is '3fr 4fr'
PASS getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-columns') is 'minmax(-webkit-min-content, 45px) 2fr'
PASS getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-rows') is '3fr minmax(14px, -webkit-max-content)'
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
Test getting and setting display through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '18px 22px'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '66px 70px'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '55% 80%'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '40% 63%'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'auto auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'auto auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'auto 160px 22px'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '56% 100px auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '160px minmax(16px, 20px)'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(10%, 15%) auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '160px 2fr'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '14fr auto'
Test getting wrong values set from CSS
PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-rows') is 'none'
Test setting and getting wrong values from JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '50% 96px'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '5% 510px'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
Test setting grid-columns and grid-rows to 'inherit' through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '50px 1fr last'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '101% middle 45px'
Test setting grid-columns and grid-rows to 'initial' through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '150% middle 55px'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '1fr line 2fr line'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS successfullyParsed is true
TEST COMPLETE