OLD | NEW |
1 description('Test that setting and getting grid-template-columns and grid-templa
te-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-template-columns and grid-template-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"); |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
55 testGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-con
tent)", "48px", "80px"); | 55 testGridDefinitionsSetJSValues("minmax(min-content, 8vh)", "minmax(10vw, min-con
tent)", "48px", "80px"); |
56 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content,
5em)", "220px", "50px"); | 56 testGridDefinitionsSetJSValues("minmax(22em, max-content)", "minmax(max-content,
5em)", "220px", "50px"); |
57 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-c
ontent, min-content)", "0px", "0px"); | 57 testGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(max-c
ontent, min-content)", "0px", "0px"); |
58 testGridDefinitionsSetJSValues("minmax(auto, max-content)", "minmax(10vw, auto)"
, "0px", "80px"); | 58 testGridDefinitionsSetJSValues("minmax(auto, max-content)", "minmax(10vw, auto)"
, "0px", "80px"); |
59 // Unit comparison should be case-insensitive. | 59 // Unit comparison should be case-insensitive. |
60 testGridDefinitionsSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "1
54fr"); | 60 testGridDefinitionsSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "1
54fr"); |
61 // Float values are allowed. | 61 // Float values are allowed. |
62 testGridDefinitionsSetJSValues("3.1459fr", "2.718fr", "800px", "600px"); | 62 testGridDefinitionsSetJSValues("3.1459fr", "2.718fr", "800px", "600px"); |
63 // A leading '+' is allowed. | 63 // A leading '+' is allowed. |
64 testGridDefinitionsSetJSValues("+3fr", "+4fr", "800px", "600px", "3fr", "4fr"); | 64 testGridDefinitionsSetJSValues("+3fr", "+4fr", "800px", "600px", "3fr", "4fr"); |
| 65 // Flex factor values can be zero. |
| 66 testGridDefinitionsSetJSValues("0fr", ".0fr", "0px", "0px", "0fr", "0fr"); |
| 67 testGridDefinitionsSetJSValues("minmax(0fr, 0fr)", "minmax(.0fr, .0fr)", "0px",
"0px", "minmax(0fr, 0fr)", "minmax(0fr, 0fr)"); |
65 | 68 |
66 debug(""); | 69 debug(""); |
67 debug("Test getting and setting grid-template-columns and grid-template-rows to
calc() values through JS"); | 70 debug("Test getting and setting grid-template-columns and grid-template-rows to
calc() values through JS"); |
68 testGridDefinitionsSetJSValues("calc(150px)", "calc(75px)", "150px", "75px"); | 71 testGridDefinitionsSetJSValues("calc(150px)", "calc(75px)", "150px", "75px"); |
69 testGridDefinitionsSetJSValues("calc(50% - 30px)", "calc(75px + 10%)", "370px",
"135px"); | 72 testGridDefinitionsSetJSValues("calc(50% - 30px)", "calc(75px + 10%)", "370px",
"135px"); |
70 testGridDefinitionsSetJSValues("minmax(25%, calc(30px))", "minmax(calc(75%), 40p
x)", "200px", "450px", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)"); | 73 testGridDefinitionsSetJSValues("minmax(25%, calc(30px))", "minmax(calc(75%), 40p
x)", "200px", "450px", "minmax(25%, calc(30px))", "minmax(calc(75%), 40px)"); |
71 testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%))", "minmax(calc(25%
- 50px), 200px)", "110px", "200px", "minmax(10%, calc(30px + 10%))", "minmax(ca
lc(25% - 50px), 200px)"); | 74 testGridDefinitionsSetJSValues("minmax(10%, calc(30px + 10%))", "minmax(calc(25%
- 50px), 200px)", "110px", "200px", "minmax(10%, calc(30px + 10%))", "minmax(ca
lc(25% - 50px), 200px)"); |
72 | 75 |
73 debug(""); | 76 debug(""); |
74 debug("Test setting grid-template-columns and grid-template-rows to bad values t
hrough JS"); | 77 debug("Test setting grid-template-columns and grid-template-rows to bad values t
hrough JS"); |
75 // No comma and only 1 argument provided. | 78 // No comma and only 1 argument provided. |
76 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") | 79 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") |
77 // Nested minmax and only 2 arguments are allowed. | 80 // Nested minmax and only 2 arguments are allowed. |
78 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); | 81 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); |
79 // No breadth value and no comma. | 82 // No breadth value and no comma. |
80 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); | 83 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); |
81 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); | 84 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); |
82 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); | 85 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); |
83 testGridDefinitionsSetBadJSValues("0fr", "1r"); | 86 testGridDefinitionsSetBadJSValues("1f", "1r"); |
84 // A dimension doesn't allow spaces between the number and the unit. | 87 // A dimension doesn't allow spaces between the number and the unit. |
85 testGridDefinitionsSetBadJSValues(".0000fr", "13 fr"); | 88 testGridDefinitionsSetBadJSValues(".1 fr", "13 fr"); |
86 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); | 89 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); |
87 // Negative values are not allowed. | 90 // Negative values are not allowed. |
88 testGridDefinitionsSetBadJSValues("-1px", "-6em"); | 91 testGridDefinitionsSetBadJSValues("-1px", "-6em"); |
89 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); | 92 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); |
90 // Invalid expressions with calc | 93 // Invalid expressions with calc |
91 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)"); | 94 testGridDefinitionsSetBadJSValues("calc(16px 30px)", "calc(25px + auto)"); |
92 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%("); | 95 testGridDefinitionsSetBadJSValues("minmax(min-content, calc())", "calc(10%("); |
93 // Forward slash not allowed if not part of a shorthand | 96 // Forward slash not allowed if not part of a shorthand |
94 testGridDefinitionsSetBadJSValues("10px /", "15px /"); | 97 testGridDefinitionsSetBadJSValues("10px /", "15px /"); |
95 | 98 |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
136 element.style.gridTemplateColumns = "initial"; | 139 element.style.gridTemplateColumns = "initial"; |
137 element.style.gridTemplateRows = "initial"; | 140 element.style.gridTemplateRows = "initial"; |
138 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); | 141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); |
139 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); | 142 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); |
140 | 143 |
141 document.body.removeChild(element); | 144 document.body.removeChild(element); |
142 } | 145 } |
143 debug(""); | 146 debug(""); |
144 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th
rough JS"); | 147 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th
rough JS"); |
145 testInitial(); | 148 testInitial(); |
OLD | NEW |