1<!DOCTYPE HTML>
2<html>
3<head>
4<script>
5if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7</script>
8<link href="resources/grid.css" rel="stylesheet">
9<style>
10.gridWithFixed {
11 -webkit-grid-columns: "first" 10px;
12 -webkit-grid-rows: "first" 15px;
13}
14.gridWithPercent {
15 -webkit-grid-columns: 53% "last";
16 -webkit-grid-rows: 27% "last";
17}
18.gridWithAuto {
19 -webkit-grid-columns: "first" auto;
20 -webkit-grid-rows: auto "last";
21}
22.gridWithMinMax {
23 -webkit-grid-columns: "first" minmax(10%, 15px);
24 -webkit-grid-rows: minmax(20px, 50%) "last";
25}
26.gridWithFixedMultiple {
27 -webkit-grid-columns: "first" "nav" 10px "last";
28 -webkit-grid-rows: "first" "nav" 15px "last";
29}
30.gridWithPercentageSameStringMultipleTimes {
31 -webkit-grid-columns: "first" "nav" 10% "nav" 15% "last";
32 -webkit-grid-rows: "first" "nav2" 25% "nav2" 75% "last";
33}
34</style>
35<script src="../js/resources/js-test-pre.js"></script>
36</head>
37<body>
38<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
39<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
40<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
41<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
42<div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
43<div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
44<script>
45 description('Test that setting and getting grid-columns and grid-rows works as expected');
46
47 function testValue(gridElement, namedGridColumns, namedGridRows)
48 {
49 this.gridElement = gridElement;
50 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-columns')", namedGridColumns);
51 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-rows')", namedGridRows);
52 }
53
54 function testCSSValue(gridElementId, namedGridColumns, namedGridRows)
55 {
56 testValue(document.getElementById(gridElementId), namedGridColumns, namedGridRows);
57 }
58
59 debug("Test getting -webkit-grid-columns and -webkit-grid-rows set through CSS");
60 testCSSValue("gridWithFixedElement", "first 10px", "first 15px");
61 testCSSValue("gridWithPercentElement", "53% last", "27% last");
62 testCSSValue("gridWithAutoElement", "first auto", "auto last");
63 testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%) last");
64 testCSSValue("gridWithFixedMultiple", "nav first 10px last", "nav first 15px last");
65 testCSSValue("gridWithPercentageSameStringMultipleTimes", "nav first 10% nav 15% last", "first nav2 25% nav2 75% last");
66
67 debug("");
68 debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows through JS");
69 var element = document.createElement("div");
70 document.body.appendChild(element);
71 element.style.webkitGridColumns = "'first' 18px";
72 element.style.webkitGridRows = "66px 'last'";
73 testValue(element, "first 18px", "66px last");
74
75 element = document.createElement("div");
76 document.body.appendChild(element);
77 element.style.webkitGridColumns = "'first' 55%";
78 element.style.webkitGridRows = "40% 'last'";
79 testValue(element, "first 55%", "40% last");
80
81 element = document.createElement("div");
82 document.body.appendChild(element);
83 element.style.webkitGridColumns = "'first' auto";
84 element.style.webkitGridRows = "auto 'last'";
85 testValue(element, "first auto", "auto last");
86
87 element = document.createElement("div");
88 document.body.appendChild(element);
89 element.style.webkitGridColumns = "'first' -webkit-min-content";
90 element.style.webkitGridRows = "-webkit-min-content 'last'";
91 testValue(element, "first -webkit-min-content", "-webkit-min-content last");
92
93 element = document.createElement("div");
94 document.body.appendChild(element);
95 element.style.webkitGridColumns = "'first' -webkit-max-content";
96 element.style.webkitGridRows = "-webkit-max-content 'last'";
97 testValue(element, "first -webkit-max-content", "-webkit-max-content last");
98
99 element = document.createElement("div");
100 document.body.appendChild(element);
101 element.style.webkitGridColumns = "'first' minmax(55%, 45px)";
102 element.style.webkitGridRows = "minmax(30px, 40%) 'last'";
103 testValue(element, "first minmax(55%, 45px)", "minmax(30px, 40%) last");
104
105 element = document.createElement("div");
106 document.body.appendChild(element);
107 element.style.font = "10px Ahem";
108 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content)";
109 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";
110 testValue(element, "first minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) last");
111
112 element = document.createElement("div");
113 document.body.appendChild(element);
114 element.style.font = "10px Ahem";
115 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content)";
116 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";
117 testValue(element, "first minmax(220px, -webkit-max-content)", "minmax(-webkit-max-content, 50px) last");
118
119 element = document.createElement("div");
120 document.body.appendChild(element);
121 element.style.webkitGridColumns = "'first' minmax(-webkit-min-content, -webkit-max-content)";
122 element.style.webkitGridRows = "minmax(-webkit-max-content, -webkit-min-content) 'last'";
123 testValue(element, "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last");
124
125 element = document.createElement("div");
126 document.body.appendChild(element);
127 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'";
128 element.style.webkitGridRows = "'first' 'nav' minmax(-webkit-max-content, -webkit-min-content) 'last'";
129 testValue(element, "nav first minmax(-webkit-min-content, -webkit-max-content) last", "nav first minmax(-webkit-max-content, -webkit-min-content) last");
130
131 element = document.createElement("div");
132 document.body.appendChild(element);
133 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'";
134 element.style.webkitGridRows = "'first' 'nav2' minmax(-webkit-max-content, -webkit-min-content) 'nav2' minmax(10px, 15px) 'last'";
135 testValue(element, "nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last");
136
137 element = document.createElement("div");
138 document.body.appendChild(element);
139 element.style.webkitGridColumns = "'foo' 'bar' auto 'foo' auto 'bar'";
140 element.style.webkitGridRows = "'foo' 'bar' auto 'foo' auto 'bar'";
141 testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar");
142
143 debug("");
144 debug("Test getting and setting invalid -webkit-grid-columns and -webkit-grid-rows through JS");
145 element = document.createElement("div");
146 document.body.appendChild(element);
147 element.style.webkitGridColumns = "'foo'";
148 element.style.webkitGridRows = "'bar";
149 testValue(element, "none", "none");
150</script>
151<script src="../js/resources/js-test-post.js"></script>
152</body>
153</html>