1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
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(gridWithFixedElement, '').getPropertyValue('grid-template-columns') is "7px 11px"
PASS window.getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-template-rows') is "17px 2px"
PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-columns') is "424px 792px"
PASS window.getComputedStyle(gridWithPercentElement, '').getPropertyValue('grid-template-rows') is "162px 312px"
PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-columns') is "7px 0px"
PASS window.getComputedStyle(gridWithPercentWithoutSize, '').getPropertyValue('grid-template-rows') is "11px 0px"
PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-columns') is "0px 17px"
PASS window.getComputedStyle(gridWithAutoElement, '').getPropertyValue('grid-template-rows') is "0px 3px"
PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-columns') is "100px 120px"
PASS window.getComputedStyle(gridWithEMElement, '').getPropertyValue('grid-template-rows') is "150px 170px"
PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-columns') is "15px 0px 100px"
PASS window.getComputedStyle(gridWithThreeItems, '').getPropertyValue('grid-template-rows') is "120px 18px 0px"
PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-columns') is "400px 120px"
PASS window.getComputedStyle(gridWithPercentAndViewportPercent, '').getPropertyValue('grid-template-rows') is "210px 168px"
PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(gridWithFitContentAndFitAvailable, '').getPropertyValue('grid-template-rows') is "none"
PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-columns') is "0px 0px"
PASS window.getComputedStyle(gridWithMinMaxContent, '').getPropertyValue('grid-template-rows') is "0px 0px"
PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-columns') is "7px 17px"
PASS window.getComputedStyle(gridWithMinMaxContentWithChildrenElement, '').getPropertyValue('grid-template-rows') is "11px 3px"
PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-columns') is "240px 15px"
PASS window.getComputedStyle(gridWithMinMaxAndFixed, '').getPropertyValue('grid-template-rows') is "120px 210px"
PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-columns') is "240px 15px"
PASS window.getComputedStyle(gridWithMinMaxAndMinMaxContent, '').getPropertyValue('grid-template-rows') is "120px 210px"
PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-columns') is "320px 480px"
PASS window.getComputedStyle(gridWithFractionFraction, '').getPropertyValue('grid-template-rows') is "225px 375px"
PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-columns') is "45px 755px"
PASS window.getComputedStyle(gridWithFractionMinMax, '').getPropertyValue('grid-template-rows') is "586px 14px"
PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-columns') is "200px 100px"
PASS window.getComputedStyle(gridWithCalcCalc, '').getPropertyValue('grid-template-rows') is "150px 75px"
PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-columns') is "400px 80px"
PASS window.getComputedStyle(gridWithCalcAndFixed, '').getPropertyValue('grid-template-rows') is "88px 150px"
PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-columns') is "190px 80px"
PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('grid-template-rows') is "150px 53px"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-columns') is "400px 120px"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('grid-template-rows') is "150px 175px"
PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-columns') is "0px 30px"
PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('grid-template-rows') is "132px 60px"
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
Test getting and setting grid-template-rows and grid-template-columns through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px 22px"
PASS element.style.gridTemplateColumns is "18px 22px"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "66px 70px"
PASS element.style.gridTemplateRows is "66px 70px"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "440px 640px"
PASS element.style.gridTemplateColumns is "55% 80%"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "240px 378px"
PASS element.style.gridTemplateRows is "40% 63%"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 0px"
PASS element.style.gridTemplateColumns is "auto auto"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 0px"
PASS element.style.gridTemplateRows is "auto auto"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 160px 22px"
PASS element.style.gridTemplateColumns is "auto 16em 22px"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "336px 100px 0px"
PASS element.style.gridTemplateRows is "56% 10em auto"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 20px"
PASS element.style.gridTemplateColumns is "16em minmax(16px, 20px)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 0px"
PASS element.style.gridTemplateRows is "minmax(10%, 15%) auto"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "160px 640px"
PASS element.style.gridTemplateColumns is "16em 2fr"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "600px 0px"
PASS element.style.gridTemplateRows is "14fr auto"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "400px 96px"
PASS element.style.gridTemplateColumns is "50% 12vw"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "30px 510px"
PASS element.style.gridTemplateRows is "5% 85vh"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "25px 20px"
PASS element.style.gridTemplateColumns is "calc(25px) calc(2em)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "0px 60px"
PASS element.style.gridTemplateRows is "auto calc(10%)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "345px 92px"
PASS element.style.gridTemplateColumns is "calc(25px + 40%) minmax(min-content, calc(10% + 12px))"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "100px 0px"
PASS element.style.gridTemplateRows is "minmax(calc(75% - 350px), max-content) auto"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "0px 16px"
PASS element.style.gridTemplateColumns is "auto minmax(16px, auto)"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "90px 80px"
PASS element.style.gridTemplateRows is "minmax(auto, 15%) 10vw"
Test getting wrong values set from CSS
PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-columns') is 'none'
PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-template-rows') is 'none'
PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-columns') is 'none'
PASS getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-template-rows') is 'none'
Test setting and getting wrong values from 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"
Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 750px [last]"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [middle] 45px"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "50px 0px [last]"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "20px [middle] 45px"
Test setting grid-template-columns and grid-template-rows to 'initial' through JS
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "1200px [middle] 55px"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "200px [line] 400px [line]"
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is 'none'
PASS getComputedStyle(element, '').getPropertyValue('grid-template-rows') is 'none'
PASS successfullyParsed is true
TEST COMPLETE
|
