165 lines
13 KiB
Plaintext
165 lines
13 KiB
Plaintext
Test that setting and getting grid-template-columns and grid-template-rows works as expected
|
|
|
|
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
|
|
|
|
|
|
Test getting grid-template-columns and grid-template-rows set through CSS
|
|
PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "10px"
|
|
PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "15px"
|
|
PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "53%"
|
|
PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "27%"
|
|
PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "auto"
|
|
PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "auto"
|
|
PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px"
|
|
PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px"
|
|
PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-columns') is "64px"
|
|
PASS window.getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('grid-template-rows') is "60px"
|
|
PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-columns') is "minmax(10%, 15px)"
|
|
PASS window.getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-template-rows') is "minmax(20px, 50%)"
|
|
PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-template-columns') is "min-content"
|
|
PASS window.getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-template-rows') is "min-content"
|
|
PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-template-columns') is "max-content"
|
|
PASS window.getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-template-rows') is "max-content"
|
|
PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('grid-template-columns') is "1fr"
|
|
PASS window.getComputedStyle(gridWithFraction, '').getPropertyValue('grid-template-rows') is "2fr"
|
|
PASS window.getComputedStyle(gridWithCalc, '').getPropertyValue('grid-template-columns') is "150px"
|
|
PASS window.getComputedStyle(gridWithCalc, '').getPropertyValue('grid-template-rows') is "75px"
|
|
PASS window.getComputedStyle(gridWithCalcComplex, '').getPropertyValue('grid-template-columns') is "calc(50% + 150px)"
|
|
PASS window.getComputedStyle(gridWithCalcComplex, '').getPropertyValue('grid-template-rows') is "calc(65% + 75px)"
|
|
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(10%, 15px)"
|
|
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "minmax(20px, 50%)"
|
|
PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(10%, calc(50% + 15px))"
|
|
PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('grid-template-rows') is "minmax(calc(10% + 20px), 50%)"
|
|
PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "minmax(auto, 20px)"
|
|
PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "minmax(min-content, auto)"
|
|
|
|
Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')
|
|
PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-template-rows') is "none"
|
|
|
|
Test the initial value
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
|
|
|
|
Test getting and setting grid-template-columns and grid-template-rows through JS
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
|
|
PASS element.style.gridTemplateColumns is "18px"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px"
|
|
PASS element.style.gridTemplateRows is "66px"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "55%"
|
|
PASS element.style.gridTemplateColumns is "55%"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "40%"
|
|
PASS element.style.gridTemplateRows is "40%"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "auto"
|
|
PASS element.style.gridTemplateColumns is "auto"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "auto"
|
|
PASS element.style.gridTemplateRows is "auto"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "80px"
|
|
PASS element.style.gridTemplateColumns is "10vw"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "150px"
|
|
PASS element.style.gridTemplateRows is "25vh"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "min-content"
|
|
PASS element.style.gridTemplateColumns is "min-content"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "min-content"
|
|
PASS element.style.gridTemplateRows is "min-content"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "max-content"
|
|
PASS element.style.gridTemplateColumns is "max-content"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "max-content"
|
|
PASS element.style.gridTemplateRows is "max-content"
|
|
|
|
Test getting and setting grid-template-columns and grid-template-rows to minmax() values through JS
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(55%, 45px)"
|
|
PASS element.style.gridTemplateColumns is "minmax(55%, 45px)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(30px, 40%)"
|
|
PASS element.style.gridTemplateRows is "minmax(30px, 40%)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(220px, 48px)"
|
|
PASS element.style.gridTemplateColumns is "minmax(22em, 8vh)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(80px, 50px)"
|
|
PASS element.style.gridTemplateRows is "minmax(10vw, 5em)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(min-content, 48px)"
|
|
PASS element.style.gridTemplateColumns is "minmax(min-content, 8vh)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(80px, min-content)"
|
|
PASS element.style.gridTemplateRows is "minmax(10vw, min-content)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(220px, max-content)"
|
|
PASS element.style.gridTemplateColumns is "minmax(22em, max-content)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(max-content, 50px)"
|
|
PASS element.style.gridTemplateRows is "minmax(max-content, 5em)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(min-content, max-content)"
|
|
PASS element.style.gridTemplateColumns is "minmax(min-content, max-content)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(max-content, min-content)"
|
|
PASS element.style.gridTemplateRows is "minmax(max-content, min-content)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "3600fr"
|
|
PASS element.style.gridTemplateColumns is "3600fr"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "154fr"
|
|
PASS element.style.gridTemplateRows is "154fr"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "3.1459fr"
|
|
PASS element.style.gridTemplateColumns is "3.1459fr"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "2.718fr"
|
|
PASS element.style.gridTemplateRows is "2.718fr"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "3fr"
|
|
PASS element.style.gridTemplateColumns is "3fr"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "4fr"
|
|
PASS element.style.gridTemplateRows is "4fr"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "minmax(auto, 48px)"
|
|
PASS element.style.gridTemplateColumns is "minmax(auto, 8vh)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "minmax(80px, auto)"
|
|
PASS element.style.gridTemplateRows is "minmax(10vw, auto)"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px"
|
|
PASS element.style.gridTemplateColumns is "0fr"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px"
|
|
PASS element.style.gridTemplateRows is "0fr"
|
|
|
|
Test setting grid-template-columns and grid-template-rows to bad values through JS
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
|
|
Test setting grid-template-columns and grid-template-rows back to 'none' through JS
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
|
|
PASS element.style.gridTemplateColumns is "18px"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px"
|
|
PASS element.style.gridTemplateRows is "66px"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
|
|
PASS element.style.gridTemplateColumns is "none"
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
|
|
PASS element.style.gridTemplateRows is "none"
|
|
|
|
Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '50px [last]'
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 101%'
|
|
|
|
Test setting grid-template-columns and grid-template-rows to 'initial' through JS
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is '150% [last]'
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is '[first] 1fr'
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
|
|
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
|
|
PASS successfullyParsed is true
|
|
|
|
TEST COMPLETE
|
|
|