OLD | NEW |
1 description('Test that setting and getting grid-definition-columns and grid-defi
nition-rows works as expected'); | 1 description('Test that setting and getting grid-template-columns and grid-templa
te-rows works as expected'); |
2 | 2 |
3 debug("Test getting grid-definition-columns and grid-definition-rows set through
CSS"); | 3 debug("Test getting grid-template-columns and grid-template-rows set through CSS
"); |
4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none"
, "none"); | 4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none"
, "none"); |
5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px
", "15px"); | 5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px
", "15px"); |
6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "40
0px", "150px"); | 6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "40
0px", "150px"); |
7 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"),
"0px", "0px"); | 7 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"),
"0px", "0px"); |
8 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWit
hChildren"), "7px", "11px"); | 8 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWit
hChildren"), "7px", "11px"); |
9 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px",
"0px"); | 9 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px",
"0px"); |
10 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElemen
t"), "0px", "0px"); | 10 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElemen
t"), "0px", "0px"); |
11 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenEleme
nt"), "7px", "11px"); | 11 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenEleme
nt"), "7px", "11px"); |
12 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px",
"150px"); | 12 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px",
"150px"); |
13 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageEle
ment"), "64px", "60px"); | 13 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageEle
ment"), "64px", "60px"); |
14 testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80p
x", "300px"); | 14 testGridDefinitionsValues(document.getElementById("gridWithMinMaxElement"), "80p
x", "300px"); |
15 testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"),
"0px", "0px"); | 15 testGridDefinitionsValues(document.getElementById("gridWithMinContentElement"),
"0px", "0px"); |
16 testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildre
nElement"), "17px", "11px"); | 16 testGridDefinitionsValues(document.getElementById("gridWithMinContentWithChildre
nElement"), "17px", "11px"); |
17 testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"),
"0px", "0px"); | 17 testGridDefinitionsValues(document.getElementById("gridWithMaxContentElement"),
"0px", "0px"); |
18 testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildre
nElement"), "17px", "11px"); | 18 testGridDefinitionsValues(document.getElementById("gridWithMaxContentWithChildre
nElement"), "17px", "11px"); |
19 testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "8
00px", "600px"); | 19 testGridDefinitionsValues(document.getElementById("gridWithFractionElement"), "8
00px", "600px"); |
20 testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px
", "75px"); | 20 testGridDefinitionsValues(document.getElementById("gridWithCalcElement"), "150px
", "75px"); |
21 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"),
"550px", "465px"); | 21 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexElement"),
"550px", "465px"); |
22 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxEleme
nt"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px"); | 22 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMaxEleme
nt"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px"); |
23 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinM
axElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px"); | 23 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinM
axElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px"); |
24 | 24 |
25 debug(""); | 25 debug(""); |
26 debug("Test getting wrong values for grid-definition-columns and grid-definition
-rows through CSS (they should resolve to the default: 'none')"); | 26 debug("Test getting wrong values for grid-template-columns and grid-template-row
s through CSS (they should resolve to the default: 'none')"); |
27 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme
nt"); | 27 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme
nt"); |
28 testGridDefinitionsValues(gridWithFitContentElement, "none", "none"); | 28 testGridDefinitionsValues(gridWithFitContentElement, "none", "none"); |
29 | 29 |
30 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE
lement"); | 30 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE
lement"); |
31 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none"); | 31 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none"); |
32 | 32 |
33 debug(""); | 33 debug(""); |
34 debug("Test the initial value"); | 34 debug("Test the initial value"); |
35 var element = document.createElement("div"); | 35 var element = document.createElement("div"); |
36 document.body.appendChild(element); | 36 document.body.appendChild(element); |
37 testGridDefinitionsValues(element, "none", "none"); | 37 testGridDefinitionsValues(element, "none", "none"); |
38 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column
s')", "'none'"); | 38 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns'
)", "'none'"); |
39 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')
", "'none'"); | 39 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')",
"'none'"); |
40 | 40 |
41 debug(""); | 41 debug(""); |
42 debug("Test getting and setting grid-definition-columns and grid-definition-rows
through JS"); | 42 debug("Test getting and setting grid-template-columns and grid-template-rows thr
ough JS"); |
43 testGridDefinitionsSetJSValues("18px", "66px"); | 43 testGridDefinitionsSetJSValues("18px", "66px"); |
44 testGridDefinitionsSetJSValues("55%", "40%", "440px", "240px"); | 44 testGridDefinitionsSetJSValues("55%", "40%", "440px", "240px"); |
45 testGridDefinitionsSetJSValues("auto", "auto", "0px", "0px"); | 45 testGridDefinitionsSetJSValues("auto", "auto", "0px", "0px"); |
46 testGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px"); | 46 testGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px"); |
47 testGridDefinitionsSetJSValues("min-content", "min-content", "0px", "0px"); | 47 testGridDefinitionsSetJSValues("min-content", "min-content", "0px", "0px"); |
48 testGridDefinitionsSetJSValues("max-content", "max-content", "0px", "0px"); | 48 testGridDefinitionsSetJSValues("max-content", "max-content", "0px", "0px"); |
49 | 49 |
50 debug(""); | 50 debug(""); |
51 debug("Test getting and setting grid-definition-columns and grid-definition-rows
to minmax() values through JS"); | 51 debug("Test getting and setting grid-template-columns and grid-template-rows to
minmax() values through JS"); |
52 testGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)", "440px"
, "240px"); | 52 testGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)", "440px"
, "240px"); |
53 testGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "220px"
, "80px"); | 53 testGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "220px"
, "80px"); |
54 testGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-con
tent)", "48px", "80px"); | 54 testGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-con
tent)", "48px", "80px"); |
55 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content,
5em)", "220px", "50px"); | 55 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content,
5em)", "220px", "50px"); |
56 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-c
ontent, min-content)", "0px", "0px"); | 56 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-c
ontent, min-content)", "0px", "0px"); |
57 // Unit comparison should be case-insensitive. | 57 // Unit comparison should be case-insensitive. |
58 testGridDefinitionsSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "1
54fr"); | 58 testGridDefinitionsSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "1
54fr"); |
59 // Float values are allowed. | 59 // Float values are allowed. |
60 testGridDefinitionsSetJSValues("3.1459fr", "2.718fr", "800px", "600px"); | 60 testGridDefinitionsSetJSValues("3.1459fr", "2.718fr", "800px", "600px"); |
61 // A leading '+' is allowed. | 61 // A leading '+' is allowed. |
62 testGridDefinitionsSetJSValues("+3fr", "+4fr", "800px", "600px", "3fr", "4fr"); | 62 testGridDefinitionsSetJSValues("+3fr", "+4fr", "800px", "600px", "3fr", "4fr"); |
63 | 63 |
64 debug(""); | 64 debug(""); |
65 debug("Test getting and setting grid-definition-columns and grid-definition-rows
to calc() values through JS"); | 65 debug("Test getting and setting grid-template-columns and grid-template-rows to
calc() values through JS"); |
66 testGridDefinitionsSetJSValues("calc(150px)", "calc(75px)", "150px", "75px"); | 66 testGridDefinitionsSetJSValues("calc(150px)", "calc(75px)", "150px", "75px"); |
67 testGridDefinitionsSetJSValues("calc(50% - 30px)", "calc(75px + 10%)", "370px",
"135px"); | 67 testGridDefinitionsSetJSValues("calc(50% - 30px)", "calc(75px + 10%)", "370px",
"135px"); |
68 testGridDefinitionsSetJSValues("minmax(25%, calc(30px))", "minmax(calc(75%), 40p
x)", "200px", "450px", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)"); | 68 testGridDefinitionsSetJSValues("minmax(25%, calc(30px))", "minmax(calc(75%), 40p
x)", "200px", "450px", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)"); |
69 testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%))", "minmax(calc(25%
- 50px), 200px)", "110px", "200px", "minmax(10%, calc(30px + 10%))", "minmax(ca
lc(25% - 50px), 200px)"); | 69 testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%))", "minmax(calc(25%
- 50px), 200px)", "110px", "200px", "minmax(10%, calc(30px + 10%))", "minmax(ca
lc(25% - 50px), 200px)"); |
70 | 70 |
71 debug(""); | 71 debug(""); |
72 debug("Test setting grid-definition-columns and grid-definition-rows to bad valu
es through JS"); | 72 debug("Test setting grid-template-columns and grid-template-rows to bad values t
hrough JS"); |
73 // No comma and only 1 argument provided. | 73 // No comma and only 1 argument provided. |
74 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") | 74 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") |
75 // Nested minmax and only 2 arguments are allowed. | 75 // Nested minmax and only 2 arguments are allowed. |
76 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); | 76 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); |
77 // No breadth value and no comma. | 77 // No breadth value and no comma. |
78 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); | 78 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); |
79 // Auto is not allowed inside minmax. | 79 // Auto is not allowed inside minmax. |
80 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)"); | 80 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)"); |
81 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); | 81 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); |
82 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); | 82 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); |
83 testGridDefinitionsSetBadJSValues("0fr", "1r"); | 83 testGridDefinitionsSetBadJSValues("0fr", "1r"); |
84 // A dimension doesn't allow spaces between the number and the unit. | 84 // A dimension doesn't allow spaces between the number and the unit. |
85 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr"); | 85 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr"); |
86 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); | 86 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); |
87 // Negative values are not allowed. | 87 // Negative values are not allowed. |
88 testGridDefinitionsSetBadJSValues("-1px", "-6em"); | 88 testGridDefinitionsSetBadJSValues("-1px", "-6em"); |
89 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); | 89 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); |
90 // Invalid expressions with calc | 90 // Invalid expressions with calc |
91 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)"); | 91 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)"); |
92 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%("); | 92 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%("); |
93 | 93 |
94 debug(""); | 94 debug(""); |
95 debug("Test setting grid-definition-columns and grid-definition-rows back to 'no
ne' through JS"); | 95 debug("Test setting grid-template-columns and grid-template-rows back to 'none'
through JS"); |
96 testGridDefinitionsSetJSValues("18px", "66px"); | 96 testGridDefinitionsSetJSValues("18px", "66px"); |
97 testGridDefinitionsSetJSValues("none", "none"); | 97 testGridDefinitionsSetJSValues("none", "none"); |
98 | 98 |
99 function testInherit() | 99 function testInherit() |
100 { | 100 { |
101 var parentElement = document.createElement("div"); | 101 var parentElement = document.createElement("div"); |
102 document.body.appendChild(parentElement); | 102 document.body.appendChild(parentElement); |
103 parentElement.style.gridDefinitionColumns = "50px (last)"; | 103 parentElement.style.gridTemplateColumns = "50px (last)"; |
104 parentElement.style.gridDefinitionRows = "(first) 101%"; | 104 parentElement.style.gridTemplateRows = "(first) 101%"; |
105 | 105 |
106 element = document.createElement("div"); | 106 element = document.createElement("div"); |
107 parentElement.appendChild(element); | 107 parentElement.appendChild(element); |
108 element.style.display = "grid"; | 108 element.style.display = "grid"; |
109 element.style.height = "100px"; | 109 element.style.height = "100px"; |
110 element.style.gridDefinitionColumns = "inherit"; | 110 element.style.gridTemplateColumns = "inherit"; |
111 element.style.gridDefinitionRows = "inherit"; | 111 element.style.gridTemplateRows = "inherit"; |
112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'50px (last)'"); | 112 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'50px (last)'"); |
113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'(first) 101px'"); | 113 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'(first) 101px'"); |
114 | 114 |
115 document.body.removeChild(parentElement); | 115 document.body.removeChild(parentElement); |
116 } | 116 } |
117 debug(""); | 117 debug(""); |
118 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit
' through JS"); | 118 debug("Test setting grid-template-columns and grid-template-rows to 'inherit' th
rough JS"); |
119 testInherit(); | 119 testInherit(); |
120 | 120 |
121 function testInitial() | 121 function testInitial() |
122 { | 122 { |
123 element = document.createElement("div"); | 123 element = document.createElement("div"); |
124 document.body.appendChild(element); | 124 document.body.appendChild(element); |
125 element.style.display = "grid"; | 125 element.style.display = "grid"; |
126 element.style.width = "300px"; | 126 element.style.width = "300px"; |
127 element.style.height = "150px"; | 127 element.style.height = "150px"; |
128 element.style.gridDefinitionColumns = "150% (last)"; | 128 element.style.gridTemplateColumns = "150% (last)"; |
129 element.style.gridDefinitionRows = "(first) 1fr"; | 129 element.style.gridTemplateRows = "(first) 1fr"; |
130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'450px (last)'"); | 130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'450px (last)'"); |
131 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'(first) 150px'"); | 131 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'(first) 150px'"); |
132 | 132 |
133 element.style.display = "grid"; | 133 element.style.display = "grid"; |
134 element.style.gridDefinitionColumns = "initial"; | 134 element.style.gridTemplateColumns = "initial"; |
135 element.style.gridDefinitionRows = "initial"; | 135 element.style.gridTemplateRows = "initial"; |
136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'none'"); | 136 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); |
137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'none'"); | 137 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); |
138 | 138 |
139 document.body.removeChild(element); | 139 document.body.removeChild(element); |
140 } | 140 } |
141 debug(""); | 141 debug(""); |
142 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial
' through JS"); | 142 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th
rough JS"); |
143 testInitial(); | 143 testInitial(); |
OLD | NEW |