blob: 1e72f33edcf99fa9020e9f25c53912c705193513 [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 grid-columns and grid-rows set through CSS
PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-columns') is '10px'
PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows') is '15px'
PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-columns') is '53%'
PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-rows') is '27%'
PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-columns') is 'auto'
PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-rows') is 'auto'
PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-columns') is '100px'
PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-rows') is '150px'
PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-columns') is '64px'
PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-rows') is '60px'
PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-columns') is 'minmax(10%, 15px)'
PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-rows') is 'minmax(20px, 50%)'
PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-columns') is '-webkit-min-content'
PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows') is '-webkit-min-content'
PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-columns') is '-webkit-max-content'
PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows') is '-webkit-max-content'
PASS getComputedStyle(gridWithFraction, '').getPropertyValue('grid-columns') is '1fr'
PASS getComputedStyle(gridWithFraction, '').getPropertyValue('grid-rows') is '2fr'
Test getting wrong values for grid-columns and grid-rows through CSS (they should resolve to the default: 'none')
PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-rows') is 'none'
PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-rows') is 'none'
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
Test getting and setting grid-columns and grid-rows through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '18px'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '66px'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '55%'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '40%'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '80px'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '150px'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '-webkit-min-content'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '-webkit-min-content'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '-webkit-max-content'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '-webkit-max-content'
Test getting and setting grid-columns and grid-rows to minmax() values through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(55%, 45px)'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(30px, 40%)'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(220px, 48px)'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(80px, 50px)'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(-webkit-min-content, 48px)'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(80px, -webkit-min-content)'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(220px, -webkit-max-content)'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(-webkit-max-content, 50px)'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(220px, -webkit-max-content)'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(-webkit-max-content, 50px)'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(-webkit-min-content, -webkit-max-content)'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(-webkit-max-content, -webkit-min-content)'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3600fr'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '154fr'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3.1459fr'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '2.718fr'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3fr'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '4fr'
Test setting grid-columns and grid-rows to bad values through 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 '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'
Test setting grid-columns and grid-rows back to 'none' through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '18px'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '66px'
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 last'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'first 101%'
Test setting grid-columns and grid-rows to 'initial' through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '150% last'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'first 1fr'
PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none'
PASS successfullyParsed is true
TEST COMPLETE