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 |