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"), "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%)"); |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
51 testNonGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(ma
x-content, min-content)"); | 51 testNonGridDefinitionsSetJSValues("minmax(min-content, max-content)", "minmax(ma
x-content, min-content)"); |
52 // Unit comparison should be case-insensitive. | 52 // Unit comparison should be case-insensitive. |
53 testNonGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr"
, "154fr"); | 53 testNonGridDefinitionsSetJSValues("3600Fr", "154fR", "3600fr", "154fr", "3600fr"
, "154fr"); |
54 // Float values are allowed. | 54 // Float values are allowed. |
55 testNonGridDefinitionsSetJSValues("3.1459fr", "2.718fr"); | 55 testNonGridDefinitionsSetJSValues("3.1459fr", "2.718fr"); |
56 // A leading '+' is allowed. | 56 // A leading '+' is allowed. |
57 testNonGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr"); | 57 testNonGridDefinitionsSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr"); |
58 testNonGridDefinitionsSetJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)", "mi
nmax(auto, 48px)", "minmax(80px, auto)"); | 58 testNonGridDefinitionsSetJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)", "mi
nmax(auto, 48px)", "minmax(80px, auto)"); |
59 // Flex factor values can be zero. | 59 // Flex factor values can be zero. |
60 testGridDefinitionsSetJSValues("0fr", ".0fr", "0px", "0px", "0fr", "0fr"); | 60 testGridDefinitionsSetJSValues("0fr", ".0fr", "0px", "0px", "0fr", "0fr"); |
61 testGridDefinitionsSetJSValues("minmax(0fr, 0fr)", "minmax(.0fr, .0fr)", "0px",
"0px", "minmax(0fr, 0fr)", "minmax(0fr, 0fr)"); | 61 testGridDefinitionsSetJSValues("minmax(auto, 0fr)", "minmax(auto, .0fr)", "0px",
"0px", "minmax(auto, 0fr)", "minmax(auto, 0fr)"); |
62 | 62 |
63 debug(""); | 63 debug(""); |
64 debug("Test setting grid-template-columns and grid-template-rows to bad values t
hrough JS"); | 64 debug("Test setting grid-template-columns and grid-template-rows to bad values t
hrough JS"); |
65 // No comma and only 1 argument provided. | 65 // No comma and only 1 argument provided. |
66 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") | 66 testGridDefinitionsSetBadJSValues("minmax(10px 20px)", "minmax(10px)") |
67 // Nested minmax and only 2 arguments are allowed. | 67 // Nested minmax and only 2 arguments are allowed. |
68 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); | 68 testGridDefinitionsSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10
px, 20px, 30px)"); |
69 // No breadth value and no comma. | 69 // No breadth value and no comma. |
70 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); | 70 testGridDefinitionsSetBadJSValues("minmax()", "minmax(30px 30% 30em)"); |
71 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); | 71 testGridDefinitionsSetBadJSValues("-2fr", "3ffr"); |
72 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); | 72 testGridDefinitionsSetBadJSValues("-2.05fr", "+-3fr"); |
73 testGridDefinitionsSetBadJSValues("1f", "1r"); | 73 testGridDefinitionsSetBadJSValues("1f", "1r"); |
74 // A dimension doesn't allow spaces between the number and the unit. | 74 // A dimension doesn't allow spaces between the number and the unit. |
75 testGridDefinitionsSetBadJSValues(".0001 fr", "13 fr"); | 75 testGridDefinitionsSetBadJSValues(".0001 fr", "13 fr"); |
76 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); | 76 testGridDefinitionsSetBadJSValues("7.-fr", "-8,0fr"); |
77 // Negative values are not allowed. | 77 // Negative values are not allowed. |
78 testGridDefinitionsSetBadJSValues("-1px", "-6em"); | 78 testGridDefinitionsSetBadJSValues("-1px", "-6em"); |
79 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); | 79 testGridDefinitionsSetBadJSValues("minmax(-1%, 32%)", "minmax(2vw, -6em)"); |
| 80 // Flexible lengths are invalid on the min slot of minmax(). |
| 81 testGridDefinitionsSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)"); |
| 82 testGridDefinitionsSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)"); |
80 | 83 |
81 debug(""); | 84 debug(""); |
82 debug("Test setting grid-template-columns and grid-template-rows back to 'none'
through JS"); | 85 debug("Test setting grid-template-columns and grid-template-rows back to 'none'
through JS"); |
83 testNonGridDefinitionsSetJSValues("18px", "66px"); | 86 testNonGridDefinitionsSetJSValues("18px", "66px"); |
84 testNonGridDefinitionsSetJSValues("none", "none"); | 87 testNonGridDefinitionsSetJSValues("none", "none"); |
85 | 88 |
86 function testInherit() | 89 function testInherit() |
87 { | 90 { |
88 var parentElement = document.createElement("div"); | 91 var parentElement = document.createElement("div"); |
89 document.body.appendChild(parentElement); | 92 document.body.appendChild(parentElement); |
(...skipping 25 matching lines...) Expand all Loading... |
115 element.style.gridTemplateColumns = "initial"; | 118 element.style.gridTemplateColumns = "initial"; |
116 element.style.gridTemplateRows = "initial"; | 119 element.style.gridTemplateRows = "initial"; |
117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); | 120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); |
118 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); | 121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); |
119 | 122 |
120 document.body.removeChild(element); | 123 document.body.removeChild(element); |
121 } | 124 } |
122 debug(""); | 125 debug(""); |
123 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th
rough JS"); | 126 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th
rough JS"); |
124 testInitial(); | 127 testInitial(); |
OLD | NEW |