| OLD | NEW |
| 1 Test that setting and getting grid-columns and grid-rows works as expected | 1 Test that setting and getting grid-columns and grid-rows works as expected |
| 2 | 2 |
| 3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
". | 3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
". |
| 4 | 4 |
| 5 | 5 |
| 6 Test getting grid-columns and grid-rows set through CSS | 6 Test getting grid-columns and grid-rows set through CSS |
| 7 PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-columns')
is 'none' | 7 PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-columns')
is 'none' |
| 8 PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-rows') is
'none' | 8 PASS getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-rows') is
'none' |
| 9 PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-columns')
is '10px' | 9 PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-columns')
is '10px' |
| 10 PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows') is
'15px' | 10 PASS getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows') is
'15px' |
| 11 PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-columns
') is '53%' | 11 PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-columns
') is '53%' |
| 12 PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-rows')
is '27%' | 12 PASS getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-rows')
is '27%' |
| 13 PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-columns')
is 'auto' | 13 PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-columns')
is 'auto' |
| 14 PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-rows') is
'auto' | 14 PASS getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-rows') is
'auto' |
| 15 PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-columns') is
'100px' | 15 PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-columns') is
'100px' |
| 16 PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-rows') is '1
50px' | 16 PASS getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-rows') is '1
50px' |
| 17 PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('g
rid-columns') is '64px' | 17 PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('g
rid-columns') is '64px' |
| 18 PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('g
rid-rows') is '60px' | 18 PASS getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyValue('g
rid-rows') is '60px' |
| 19 PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-columns') is 'm
inmax(10%, 15px)' | 19 PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-columns') is 'm
inmax(10%, 15px)' |
| 20 PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-rows') is 'minm
ax(20px, 50%)' | 20 PASS getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-rows') is 'minm
ax(20px, 50%)' |
| 21 PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-columns') i
s '-webkit-min-content' | 21 PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-columns') i
s 'min-content' |
| 22 PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows') is '
-webkit-min-content' | 22 PASS getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows') is '
min-content' |
| 23 PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-columns') i
s '-webkit-max-content' | 23 PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-columns') i
s 'max-content' |
| 24 PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows') is '
-webkit-max-content' | 24 PASS getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows') is '
max-content' |
| 25 PASS getComputedStyle(gridWithFraction, '').getPropertyValue('grid-columns') is
'1fr' | 25 PASS getComputedStyle(gridWithFraction, '').getPropertyValue('grid-columns') is
'1fr' |
| 26 PASS getComputedStyle(gridWithFraction, '').getPropertyValue('grid-rows') is '2f
r' | 26 PASS getComputedStyle(gridWithFraction, '').getPropertyValue('grid-rows') is '2f
r' |
| 27 | 27 |
| 28 Test getting wrong values for grid-columns and grid-rows through CSS (they shoul
d resolve to the default: 'none') | 28 Test getting wrong values for grid-columns and grid-rows through CSS (they shoul
d resolve to the default: 'none') |
| 29 PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-colu
mns') is 'none' | 29 PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-colu
mns') is 'none' |
| 30 PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-rows
') is 'none' | 30 PASS getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid-rows
') is 'none' |
| 31 PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-co
lumns') is 'none' | 31 PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-co
lumns') is 'none' |
| 32 PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-ro
ws') is 'none' | 32 PASS getComputedStyle(gridWithFitAvailableElement, '').getPropertyValue('grid-ro
ws') is 'none' |
| 33 | 33 |
| 34 Test the initial value | 34 Test the initial value |
| 35 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none' | 35 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none' |
| 36 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none' | 36 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none' |
| 37 | 37 |
| 38 Test getting and setting grid-columns and grid-rows through JS | 38 Test getting and setting grid-columns and grid-rows through JS |
| 39 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '18px' | 39 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '18px' |
| 40 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '66px' | 40 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '66px' |
| 41 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '55%' | 41 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '55%' |
| 42 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '40%' | 42 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '40%' |
| 43 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'auto' | 43 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'auto' |
| 44 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'auto' | 44 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'auto' |
| 45 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '80px' | 45 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '80px' |
| 46 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '150px' | 46 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '150px' |
| 47 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '-webkit-
min-content' | 47 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'min-cont
ent' |
| 48 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '-webkit-min
-content' | 48 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'min-content
' |
| 49 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '-webkit-
max-content' | 49 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'max-cont
ent' |
| 50 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '-webkit-max
-content' | 50 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'max-content
' |
| 51 | 51 |
| 52 Test getting and setting grid-columns and grid-rows to minmax() values through J
S | 52 Test getting and setting grid-columns and grid-rows to minmax() values through J
S |
| 53 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(5
5%, 45px)' | 53 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(5
5%, 45px)' |
| 54 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(30px
, 40%)' | 54 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(30px
, 40%)' |
| 55 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(2
20px, 48px)' | 55 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(2
20px, 48px)' |
| 56 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(80px
, 50px)' | 56 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(80px
, 50px)' |
| 57 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(-
webkit-min-content, 48px)' | 57 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(m
in-content, 48px)' |
| 58 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(80px
, -webkit-min-content)' | 58 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(80px
, min-content)' |
| 59 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(2
20px, -webkit-max-content)' | 59 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(2
20px, max-content)' |
| 60 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(-web
kit-max-content, 50px)' | 60 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(max-
content, 50px)' |
| 61 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(2
20px, -webkit-max-content)' | 61 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(2
20px, max-content)' |
| 62 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(-web
kit-max-content, 50px)' | 62 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(max-
content, 50px)' |
| 63 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(-
webkit-min-content, -webkit-max-content)' | 63 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'minmax(m
in-content, max-content)' |
| 64 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(-web
kit-max-content, -webkit-min-content)' | 64 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'minmax(max-
content, min-content)' |
| 65 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3600fr' | 65 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3600fr' |
| 66 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '154fr' | 66 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '154fr' |
| 67 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3.1459fr
' | 67 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3.1459fr
' |
| 68 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '2.718fr' | 68 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '2.718fr' |
| 69 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3fr' | 69 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '3fr' |
| 70 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '4fr' | 70 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is '4fr' |
| 71 | 71 |
| 72 Test setting grid-columns and grid-rows to bad values through JS | 72 Test setting grid-columns and grid-rows to bad values through JS |
| 73 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none' | 73 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none' |
| 74 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none' | 74 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none' |
| (...skipping 26 matching lines...) Expand all Loading... |
| 101 | 101 |
| 102 Test setting grid-columns and grid-rows to 'initial' through JS | 102 Test setting grid-columns and grid-rows to 'initial' through JS |
| 103 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '150% las
t' | 103 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is '150% las
t' |
| 104 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'first 1fr' | 104 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'first 1fr' |
| 105 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none' | 105 PASS getComputedStyle(element, '').getPropertyValue('grid-columns') is 'none' |
| 106 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none' | 106 PASS getComputedStyle(element, '').getPropertyValue('grid-rows') is 'none' |
| 107 PASS successfullyParsed is true | 107 PASS successfullyParsed is true |
| 108 | 108 |
| 109 TEST COMPLETE | 109 TEST COMPLETE |
| 110 | 110 |
| OLD | NEW |