OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> | 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
5 <link href="resources/grid.css" rel="stylesheet"> | 5 <link href="resources/grid.css" rel="stylesheet"> |
6 <link href="resources/grid-alignment.css" rel="stylesheet"> | 6 <link href="resources/grid-alignment.css" rel="stylesheet"> |
7 <style> | 7 <style> |
8 .definite { | 8 .definite { |
9 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ | 9 /* Give an explicit size to the grid so that percentage grid tracks have a c
onsistent resolution */ |
10 width: 800px; | 10 width: 800px; |
11 height: 600px; | 11 height: 600px; |
12 } | 12 } |
13 .gridItem { | 13 .gridItem { |
14 grid-column: 1; | 14 grid-column: 1; |
15 grid-row: 1; | 15 grid-row: 1; |
16 height: 22px; | 16 height: 22px; |
17 width: 77px; | 17 width: 77px; |
18 } | 18 } |
19 .gridWithFixed { | 19 .gridWithFixed { |
20 grid-template-columns: [first] 10px; | 20 grid-template-columns: [first] 10px; |
21 grid-template-rows: [first] 15px; | 21 grid-template-rows: [first] 15px; |
22 } | 22 } |
23 .gridWithPercent { | 23 .gridWithPercent { |
24 grid-template-columns: 53% [last]; | 24 grid-template-columns: 50% [last]; |
25 grid-template-rows: 27% [last]; | 25 grid-template-rows: 27% [last]; |
26 } | 26 } |
27 .gridWithAuto { | 27 .gridWithAuto { |
28 grid-template-columns: [first] auto; | 28 grid-template-columns: [first] auto; |
29 grid-template-rows: auto [last]; | 29 grid-template-rows: auto [last]; |
30 } | 30 } |
31 .gridWithMinMax { | 31 .gridWithMinMax { |
32 grid-template-columns: [first] minmax(10%, 15px); | 32 grid-template-columns: [first] minmax(10%, 15px); |
33 grid-template-rows: minmax(20px, 50%) [last]; | 33 grid-template-rows: minmax(20px, 50%) [last]; |
34 } | 34 } |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
97 <div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBracke
ts"></div> | 97 <div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBracke
ts"></div> |
98 <div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrac
kets"></div> | 98 <div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrac
kets"></div> |
99 <div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustom
Idents"></div> | 99 <div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustom
Idents"></div> |
100 | 100 |
101 <script src="resources/grid-definitions-parsing-utils.js"></script> | 101 <script src="resources/grid-definitions-parsing-utils.js"></script> |
102 <script> | 102 <script> |
103 description('Test that setting and getting grid-template-columns and grid-te
mplate-rows works as expected'); | 103 description('Test that setting and getting grid-template-columns and grid-te
mplate-rows works as expected'); |
104 | 104 |
105 debug("Test getting grid-template-columns and grid-template-rows set through
CSS"); | 105 debug("Test getting grid-template-columns and grid-template-rows set through
CSS"); |
106 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
[first] 10px", "[first] 15px"); | 106 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
[first] 10px", "[first] 15px"); |
107 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"424px [last]", "162px [last]"); | 107 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"400px [last]", "162px [last]"); |
108 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
e"), "0px [last]", "0px [last]"); | 108 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
e"), "0px [last]", "0px [last]"); |
109 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
eWithChildren"), "77px [last]", "22px [last]"); | 109 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz
eWithChildren"), "38.5px [last]", "22px [last]"); |
110 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[
first] 0px", "0px [last]"); | 110 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[
first] 0px", "0px [last]"); |
111 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE
lement"), "[first] 77px", "22px [last]"); | 111 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE
lement"), "[first] 77px", "22px [last]"); |
112 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first
] 80px", "300px [last]"); | 112 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first
] 80px", "300px [last]"); |
113 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"),
"[first nav] 10px [last]", "[first nav] 15px [last]"); | 113 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"),
"[first nav] 10px [last]", "[first nav] 15px [last]"); |
114 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr
ingMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [
nav2] 450px [last]"); | 114 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr
ingMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [
nav2] 450px [last]"); |
115 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"),
"[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav n
av2] 150px [last]"); | 115 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"),
"[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav n
av2] 150px [last]"); |
116 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"),
"10px", "20px 50px"); | 116 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"),
"10px", "20px 50px"); |
117 | 117 |
118 debug(""); | 118 debug(""); |
119 debug("Test getting and setting grid-template-columns and grid-template-rows
through JS"); | 119 debug("Test getting and setting grid-template-columns and grid-template-rows
through JS"); |
(...skipping 25 matching lines...) Expand all Loading... |
145 testGridDefinitionsSetBadJSValues("[foo]", "[bar"); | 145 testGridDefinitionsSetBadJSValues("[foo]", "[bar"); |
146 testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]"); | 146 testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]"); |
147 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); | 147 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); |
148 testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2
em"); | 148 testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2
em"); |
149 testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em")
; | 149 testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em")
; |
150 testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]"); | 150 testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]"); |
151 testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]"); | 151 testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]"); |
152 </script> | 152 </script> |
153 </body> | 153 </body> |
154 </html> | 154 </html> |
OLD | NEW |