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"), "53
%", "27%"); | 6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53
%", "27%"); |
7 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto"
, "auto"); | 7 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto"
, "auto"); |
8 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px",
"150px"); | 8 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px",
"150px"); |
9 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageEle
ment"), "64px", "60px"); | 9 testGridDefinitionsValues(document.getElementById("gridWithViewPortPercentageEle
ment"), "64px", "60px"); |
10 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "minmax(10%
, 15px)", "minmax(20px, 50%)"); | 10 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "minmax(10%
, 15px)", "minmax(20px, 50%)"); |
11 testGridDefinitionsValues(document.getElementById("gridWithMinContent"), "min-co
ntent", "min-content"); | 11 testGridDefinitionsValues(document.getElementById("gridWithMinContent"), "min-co
ntent", "min-content"); |
12 testGridDefinitionsValues(document.getElementById("gridWithMaxContent"), "max-co
ntent", "max-content"); | 12 testGridDefinitionsValues(document.getElementById("gridWithMaxContent"), "max-co
ntent", "max-content"); |
13 testGridDefinitionsValues(document.getElementById("gridWithFraction"), "1fr", "2
fr"); | 13 testGridDefinitionsValues(document.getElementById("gridWithFraction"), "1fr", "2
fr"); |
14 testGridDefinitionsValues(document.getElementById("gridWithCalc"), "150px", "75p
x"); | 14 testGridDefinitionsValues(document.getElementById("gridWithCalc"), "150px", "75p
x"); |
15 testGridDefinitionsValues(document.getElementById("gridWithCalcComplex"), "calc(
50% + 150px)", "calc(65% + 75px)"); | 15 testGridDefinitionsValues(document.getElementById("gridWithCalcComplex"), "calc(
50% + 150px)", "calc(65% + 75px)"); |
16 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "
minmax(10%, 15px)", "minmax(20px, 50%)"); | 16 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "
minmax(10%, 15px)", "minmax(20px, 50%)"); |
17 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinM
ax"), "minmax(10%, calc(50% + 15px))", "minmax(calc(20px + 10%), 50%)"); | 17 testGridDefinitionsValues(document.getElementById("gridWithCalcComplexInsideMinM
ax"), "minmax(10%, calc(50% + 15px))", "minmax(calc(20px + 10%), 50%)"); |
18 | 18 |
19 debug(""); | 19 debug(""); |
20 debug("Test getting wrong values for grid-definition-columns and grid-definition
-rows through CSS (they should resolve to the default: 'none')"); | 20 debug("Test getting wrong values for grid-template-columns and grid-template-row
s through CSS (they should resolve to the default: 'none')"); |
21 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme
nt"); | 21 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme
nt"); |
22 testGridDefinitionsValues(gridWithFitContentElement, "none", "none"); | 22 testGridDefinitionsValues(gridWithFitContentElement, "none", "none"); |
23 | 23 |
24 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE
lement"); | 24 var gridWithFitAvailableElement = document.getElementById("gridWithFitAvailableE
lement"); |
25 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none"); | 25 testGridDefinitionsValues(gridWithFitAvailableElement, "none", "none"); |
26 | 26 |
27 debug(""); | 27 debug(""); |
28 debug("Test the initial value"); | 28 debug("Test the initial value"); |
29 var element = document.createElement("div"); | 29 var element = document.createElement("div"); |
30 document.body.appendChild(element); | 30 document.body.appendChild(element); |
31 testGridDefinitionsValues(element, "none", "none"); | 31 testGridDefinitionsValues(element, "none", "none"); |
32 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column
s')", "'none'"); | 32 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns'
)", "'none'"); |
33 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')
", "'none'"); | 33 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')",
"'none'"); |
34 | 34 |
35 debug(""); | 35 debug(""); |
36 debug("Test getting and setting grid-definition-columns and grid-definition-rows
through JS"); | 36 debug("Test getting and setting grid-template-columns and grid-template-rows thr
ough JS"); |
37 testNonGridDefinitionsSetJSValues("18px", "66px"); | 37 testNonGridDefinitionsSetJSValues("18px", "66px"); |
38 testNonGridDefinitionsSetJSValues("55%", "40%"); | 38 testNonGridDefinitionsSetJSValues("55%", "40%"); |
39 testNonGridDefinitionsSetJSValues("auto", "auto"); | 39 testNonGridDefinitionsSetJSValues("auto", "auto"); |
40 testNonGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px"); | 40 testNonGridDefinitionsSetJSValues("10vw", "25vh", "80px", "150px"); |
41 testNonGridDefinitionsSetJSValues("min-content", "min-content"); | 41 testNonGridDefinitionsSetJSValues("min-content", "min-content"); |
42 testNonGridDefinitionsSetJSValues("max-content", "max-content"); | 42 testNonGridDefinitionsSetJSValues("max-content", "max-content"); |
43 | 43 |
44 debug(""); | 44 debug(""); |
45 debug("Test getting and setting grid-definition-columns and grid-definition-rows
to minmax() values through JS"); | 45 debug("Test getting and setting grid-template-columns and grid-template-rows to
minmax() values through JS"); |
46 testNonGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)"); | 46 testNonGridDefinitionsSetJSValues("minmax(55%, 45px)", "minmax(30px, 40%)"); |
47 testNonGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "min
max(220px, 48px)", "minmax(80px, 50px)"); | 47 testNonGridDefinitionsSetJSValues("minmax(22em, 8vh)", "minmax(10vw, 5em)", "min
max(220px, 48px)", "minmax(80px, 50px)"); |
48 testNonGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-
content)", "minmax(min-content, 48px)", "minmax(80px, min-content)"); | 48 testNonGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-
content)", "minmax(min-content, 48px)", "minmax(80px, min-content)"); |
49 testNonGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-conte
nt, 5em)", "minmax(220px, max-content)", "minmax(max-content, 50px)"); | 49 testNonGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-conte
nt, 5em)", "minmax(220px, max-content)", "minmax(max-content, 50px)"); |
50 testNonGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(ma
x-content, min-content)"); | 50 testNonGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(ma
x-content, min-content)"); |
51 // Unit comparison should be case-insensitive. | 51 // Unit comparison should be case-insensitive. |
52 testNonGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr"
, "154fr"); | 52 testNonGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr"
, "154fr"); |
53 // Float values are allowed. | 53 // Float values are allowed. |
54 testNonGridDefinitionsSetJSValues("3.1459fr", "2.718fr"); | 54 testNonGridDefinitionsSetJSValues("3.1459fr", "2.718fr"); |
55 // A leading '+' is allowed. | 55 // A leading '+' is allowed. |
56 testNonGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr"); | 56 testNonGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr"); |
57 | 57 |
58 debug(""); | 58 debug(""); |
59 debug("Test setting grid-definition-columns and grid-definition-rows to bad valu
es through JS"); | 59 debug("Test setting grid-template-columns and grid-template-rows to bad values t
hrough JS"); |
60 // No comma and only 1 argument provided. | 60 // No comma and only 1 argument provided. |
61 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") | 61 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") |
62 // Nested minmax and only 2 arguments are allowed. | 62 // Nested minmax and only 2 arguments are allowed. |
63 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); | 63 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); |
64 // No breadth value and no comma. | 64 // No breadth value and no comma. |
65 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); | 65 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); |
66 // Auto is not allowed inside minmax. | 66 // Auto is not allowed inside minmax. |
67 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)"); | 67 testGridDefinitionsSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)"); |
68 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); | 68 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); |
69 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); | 69 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); |
70 testGridDefinitionsSetBadJSValues("0fr", "1r"); | 70 testGridDefinitionsSetBadJSValues("0fr", "1r"); |
71 // A dimension doesn't allow spaces between the number and the unit. | 71 // A dimension doesn't allow spaces between the number and the unit. |
72 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr"); | 72 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr"); |
73 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); | 73 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); |
74 // Negative values are not allowed. | 74 // Negative values are not allowed. |
75 testGridDefinitionsSetBadJSValues("-1px", "-6em"); | 75 testGridDefinitionsSetBadJSValues("-1px", "-6em"); |
76 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); | 76 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); |
77 | 77 |
78 debug(""); | 78 debug(""); |
79 debug("Test setting grid-definition-columns and grid-definition-rows back to 'no
ne' through JS"); | 79 debug("Test setting grid-template-columns and grid-template-rows back to 'none'
through JS"); |
80 testNonGridDefinitionsSetJSValues("18px", "66px"); | 80 testNonGridDefinitionsSetJSValues("18px", "66px"); |
81 testNonGridDefinitionsSetJSValues("none", "none"); | 81 testNonGridDefinitionsSetJSValues("none", "none"); |
82 | 82 |
83 function testInherit() | 83 function testInherit() |
84 { | 84 { |
85 var parentElement = document.createElement("div"); | 85 var parentElement = document.createElement("div"); |
86 document.body.appendChild(parentElement); | 86 document.body.appendChild(parentElement); |
87 parentElement.style.gridDefinitionColumns = "50px (last)"; | 87 parentElement.style.gridTemplateColumns = "50px (last)"; |
88 parentElement.style.gridDefinitionRows = "(first) 101%"; | 88 parentElement.style.gridTemplateRows = "(first) 101%"; |
89 | 89 |
90 element = document.createElement("div"); | 90 element = document.createElement("div"); |
91 parentElement.appendChild(element); | 91 parentElement.appendChild(element); |
92 element.style.gridDefinitionColumns = "inherit"; | 92 element.style.gridTemplateColumns = "inherit"; |
93 element.style.gridDefinitionRows = "inherit"; | 93 element.style.gridTemplateRows = "inherit"; |
94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'50px (last)'"); | 94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'50px (last)'"); |
95 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'(first) 101%'"); | 95 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'(first) 101%'"); |
96 | 96 |
97 document.body.removeChild(parentElement); | 97 document.body.removeChild(parentElement); |
98 } | 98 } |
99 debug(""); | 99 debug(""); |
100 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit
' through JS"); | 100 debug("Test setting grid-template-columns and grid-template-rows to 'inherit' th
rough JS"); |
101 testInherit(); | 101 testInherit(); |
102 | 102 |
103 function testInitial() | 103 function testInitial() |
104 { | 104 { |
105 element = document.createElement("div"); | 105 element = document.createElement("div"); |
106 document.body.appendChild(element); | 106 document.body.appendChild(element); |
107 element.style.gridDefinitionColumns = "150% (last)"; | 107 element.style.gridTemplateColumns = "150% (last)"; |
108 element.style.gridDefinitionRows = "(first) 1fr"; | 108 element.style.gridTemplateRows = "(first) 1fr"; |
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'150% (last)'"); | 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'150% (last)'"); |
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'(first) 1fr'"); | 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'(first) 1fr'"); |
111 | 111 |
112 element.style.gridDefinitionColumns = "initial"; | 112 element.style.gridTemplateColumns = "initial"; |
113 element.style.gridDefinitionRows = "initial"; | 113 element.style.gridTemplateRows = "initial"; |
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'none'"); | 114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); |
115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'none'"); | 115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); |
116 | 116 |
117 document.body.removeChild(element); | 117 document.body.removeChild(element); |
118 } | 118 } |
119 debug(""); | 119 debug(""); |
120 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial
' through JS"); | 120 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th
rough JS"); |
121 testInitial(); | 121 testInitial(); |
OLD | NEW |