OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 if (window.testRunner) | 5 if (window.testRunner) |
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
7 </script> | 7 </script> |
8 <link href="resources/grid.css" rel="stylesheet"> | 8 <link href="resources/grid.css" rel="stylesheet"> |
9 <style> | 9 <style> |
10 .gridWithFixed { | 10 .gridWithFixed { |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
54 function testCSSValue(gridElementId, namedGridColumns, namedGridRows) | 54 function testCSSValue(gridElementId, namedGridColumns, namedGridRows) |
55 { | 55 { |
56 testValue(document.getElementById(gridElementId), namedGridColumns, name
dGridRows); | 56 testValue(document.getElementById(gridElementId), namedGridColumns, name
dGridRows); |
57 } | 57 } |
58 | 58 |
59 debug("Test getting grid-columns and grid-rows set through CSS"); | 59 debug("Test getting grid-columns and grid-rows set through CSS"); |
60 testCSSValue("gridWithFixedElement", "first 10px", "first 15px"); | 60 testCSSValue("gridWithFixedElement", "first 10px", "first 15px"); |
61 testCSSValue("gridWithPercentElement", "53% last", "27% last"); | 61 testCSSValue("gridWithPercentElement", "53% last", "27% last"); |
62 testCSSValue("gridWithAutoElement", "first auto", "auto last"); | 62 testCSSValue("gridWithAutoElement", "first auto", "auto last"); |
63 testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%)
last"); | 63 testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%)
last"); |
64 testCSSValue("gridWithFixedMultiple", "nav first 10px last", "nav first 15px
last"); | 64 testCSSValue("gridWithFixedMultiple", "first nav 10px last", "first nav 15px
last"); |
65 testCSSValue("gridWithPercentageSameStringMultipleTimes", "nav first 10% nav
15% last", "first nav2 25% nav2 75% last"); | 65 testCSSValue("gridWithPercentageSameStringMultipleTimes", "first nav 10% nav
15% last", "first nav2 25% nav2 75% last"); |
66 | 66 |
67 debug(""); | 67 debug(""); |
68 debug("Test getting and setting grid-columns and grid-rows through JS"); | 68 debug("Test getting and setting grid-columns and grid-rows through JS"); |
69 var element = document.createElement("div"); | 69 var element = document.createElement("div"); |
70 document.body.appendChild(element); | 70 document.body.appendChild(element); |
71 element.style.gridColumns = "'first' 18px"; | 71 element.style.gridColumns = "'first' 18px"; |
72 element.style.gridRows = "66px 'last'"; | 72 element.style.gridRows = "66px 'last'"; |
73 testValue(element, "first 18px", "66px last"); | 73 testValue(element, "first 18px", "66px last"); |
74 | 74 |
75 element = document.createElement("div"); | 75 element = document.createElement("div"); |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
119 element = document.createElement("div"); | 119 element = document.createElement("div"); |
120 document.body.appendChild(element); | 120 document.body.appendChild(element); |
121 element.style.gridColumns = "'first' minmax(-webkit-min-content, -webkit-max
-content)"; | 121 element.style.gridColumns = "'first' minmax(-webkit-min-content, -webkit-max
-content)"; |
122 element.style.gridRows = "minmax(-webkit-max-content, -webkit-min-content) '
last'"; | 122 element.style.gridRows = "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"); | 123 testValue(element, "first minmax(-webkit-min-content, -webkit-max-content)",
"minmax(-webkit-max-content, -webkit-min-content) last"); |
124 | 124 |
125 element = document.createElement("div"); | 125 element = document.createElement("div"); |
126 document.body.appendChild(element); | 126 document.body.appendChild(element); |
127 element.style.gridColumns = "'first' 'nav' minmax(-webkit-min-content, -webk
it-max-content) 'last'"; | 127 element.style.gridColumns = "'first' 'nav' minmax(-webkit-min-content, -webk
it-max-content) 'last'"; |
128 element.style.gridRows = "'first' 'nav' minmax(-webkit-max-content, -webkit-
min-content) 'last'"; | 128 element.style.gridRows = "'first' 'nav' minmax(-webkit-max-content, -webkit-
min-content) 'last'"; |
129 testValue(element, "nav first minmax(-webkit-min-content, -webkit-max-conten
t) last", "nav first minmax(-webkit-max-content, -webkit-min-content) last"); | 129 testValue(element, "first nav minmax(-webkit-min-content, -webkit-max-conten
t) last", "first nav minmax(-webkit-max-content, -webkit-min-content) last"); |
130 | 130 |
131 element = document.createElement("div"); | 131 element = document.createElement("div"); |
132 document.body.appendChild(element); | 132 document.body.appendChild(element); |
133 element.style.gridColumns = "'first' 'nav' minmax(-webkit-min-content, -webk
it-max-content) 'nav' auto 'last'"; | 133 element.style.gridColumns = "'first' 'nav' minmax(-webkit-min-content, -webk
it-max-content) 'nav' auto 'last'"; |
134 element.style.gridRows = "'first' 'nav2' minmax(-webkit-max-content, -webkit
-min-content) 'nav2' minmax(10px, 15px) 'last'"; | 134 element.style.gridRows = "'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-conten
t) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content)
nav2 minmax(10px, 15px) last"); | 135 testValue(element, "first nav minmax(-webkit-min-content, -webkit-max-conten
t) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content)
nav2 minmax(10px, 15px) last"); |
136 | 136 |
137 element = document.createElement("div"); | 137 element = document.createElement("div"); |
138 document.body.appendChild(element); | 138 document.body.appendChild(element); |
139 element.style.gridColumns = "'foo' 'bar' auto 'foo' auto 'bar'"; | 139 element.style.gridColumns = "'foo' 'bar' auto 'foo' auto 'bar'"; |
140 element.style.gridRows = "'foo' 'bar' auto 'foo' auto 'bar'"; | 140 element.style.gridRows = "'foo' 'bar' auto 'foo' auto 'bar'"; |
141 testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar")
; | 141 testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar")
; |
142 | 142 |
143 debug(""); | 143 debug(""); |
144 debug("Test getting and setting invalid grid-columns and grid-rows through J
S"); | 144 debug("Test getting and setting invalid grid-columns and grid-rows through J
S"); |
145 element = document.createElement("div"); | 145 element = document.createElement("div"); |
146 document.body.appendChild(element); | 146 document.body.appendChild(element); |
147 element.style.gridColumns = "'foo'"; | 147 element.style.gridColumns = "'foo'"; |
148 element.style.gridRows = "'bar"; | 148 element.style.gridRows = "'bar"; |
149 testValue(element, "none", "none"); | 149 testValue(element, "none", "none"); |
150 | 150 |
151 element = document.createElement("div"); | 151 element = document.createElement("div"); |
152 document.body.appendChild(element); | 152 document.body.appendChild(element); |
153 element.style.gridColumns = "'foo' 'bar'"; | 153 element.style.gridColumns = "'foo' 'bar'"; |
154 element.style.gridRows = "'bar' 'foo'"; | 154 element.style.gridRows = "'bar' 'foo'"; |
155 testValue(element, "none", "none"); | 155 testValue(element, "none", "none"); |
156 </script> | 156 </script> |
157 <script src="../js/resources/js-test-post.js"></script> | 157 <script src="../js/resources/js-test-post.js"></script> |
158 </body> | 158 </body> |
159 </html> | 159 </html> |
OLD | NEW |