OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <link href="resources/grid.css" rel="stylesheet"> | 2 <link href="resources/grid.css" rel="stylesheet"> |
3 <style> | 3 <style> |
4 .grid { | 4 .grid { |
5 font: 50px/1 Ahem; | 5 font: 50px/1 Ahem; |
6 } | 6 } |
7 | 7 |
8 .singleNamedGridLines { | 8 .singleNamedGridLines { |
9 grid-template-columns: (a) auto (b); | 9 grid-template-columns: [a] auto [b]; |
10 grid-template-rows: (x) auto (y); | 10 grid-template-rows: [x] auto [y]; |
11 } | 11 } |
12 | 12 |
13 .multipleNamedGridLines { | 13 .multipleNamedGridLines { |
14 grid-template-columns: (a b c) auto (d e); | 14 grid-template-columns: [a b c] auto [d e]; |
15 grid-template-rows: (x y z) auto (v w); | 15 grid-template-rows: [x y z] auto [v w]; |
16 } | 16 } |
17 </style> | 17 </style> |
18 <script src="../../resources/js-test.js"></script> | 18 <script src="../../resources/js-test.js"></script> |
19 | 19 |
20 <div class="grid singleNamedGridLines" id="gridOneColumnSingle"> | 20 <div class="grid singleNamedGridLines" id="gridOneColumnSingle"> |
21 <div>XXXX</div> | 21 <div>XXXX</div> |
22 <div>XXX</div> | 22 <div>XXX</div> |
23 <div>XX</div> | 23 <div>XX</div> |
24 <div>X</div> | 24 <div>X</div> |
25 </div> | 25 </div> |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
70 <div class="firstRowAutoColumn">XXXX</div> | 70 <div class="firstRowAutoColumn">XXXX</div> |
71 <div class="firstRowAutoColumn">XXX</div> | 71 <div class="firstRowAutoColumn">XXX</div> |
72 <div class="firstRowAutoColumn">XX</div> | 72 <div class="firstRowAutoColumn">XX</div> |
73 <div class="firstRowAutoColumn">X</div> | 73 <div class="firstRowAutoColumn">X</div> |
74 </div> | 74 </div> |
75 | 75 |
76 <script src="resources/grid-definitions-parsing-utils.js"></script> | 76 <script src="resources/grid-definitions-parsing-utils.js"></script> |
77 <script> | 77 <script> |
78 description("Test that computed style for grid-template-columns and grid-tem
plate-rows works as expected with named grid lines and implicit tracks"); | 78 description("Test that computed style for grid-template-columns and grid-tem
plate-rows works as expected with named grid lines and implicit tracks"); |
79 | 79 |
80 testGridDefinitionsValues(document.getElementById("gridOneColumnSingle"), "(
a) 200px (b)", "(x) 50px (y) 50px 50px 50px"); | 80 testGridDefinitionsValues(document.getElementById("gridOneColumnSingle"), "[
a] 200px [b]", "[x] 50px [y] 50px 50px 50px"); |
81 testGridDefinitionsValues(document.getElementById("gridTwoColumnsSingle"), "
(a) 200px (b) 150px", "(x) 50px (y) 50px"); | 81 testGridDefinitionsValues(document.getElementById("gridTwoColumnsSingle"), "
[a] 200px [b] 150px", "[x] 50px [y] 50px"); |
82 testGridDefinitionsValues(document.getElementById("gridThreeColumnsSingle"),
"(a) 200px (b) 150px 100px", "(x) 50px (y) 50px"); | 82 testGridDefinitionsValues(document.getElementById("gridThreeColumnsSingle"),
"[a] 200px [b] 150px 100px", "[x] 50px [y] 50px"); |
83 testGridDefinitionsValues(document.getElementById("gridFourColumnsSingle"),
"(a) 200px (b) 150px 100px 50px", "(x) 50px (y)"); | 83 testGridDefinitionsValues(document.getElementById("gridFourColumnsSingle"),
"[a] 200px [b] 150px 100px 50px", "[x] 50px [y]"); |
84 | 84 |
85 testGridDefinitionsValues(document.getElementById("gridOneColumnMultiple"),
"(a b c) 200px (d e)", "(x y z) 50px (v w) 50px 50px 50px"); | 85 testGridDefinitionsValues(document.getElementById("gridOneColumnMultiple"),
"[a b c] 200px [d e]", "[x y z] 50px [v w] 50px 50px 50px"); |
86 testGridDefinitionsValues(document.getElementById("gridTwoColumnsMultiple"),
"(a b c) 200px (d e) 150px", "(x y z) 50px (v w) 50px"); | 86 testGridDefinitionsValues(document.getElementById("gridTwoColumnsMultiple"),
"[a b c] 200px [d e] 150px", "[x y z] 50px [v w] 50px"); |
87 testGridDefinitionsValues(document.getElementById("gridThreeColumnsMultiple"
), "(a b c) 200px (d e) 150px 100px", "(x y z) 50px (v w) 50px"); | 87 testGridDefinitionsValues(document.getElementById("gridThreeColumnsMultiple"
), "[a b c] 200px [d e] 150px 100px", "[x y z] 50px [v w] 50px"); |
88 testGridDefinitionsValues(document.getElementById("gridFourColumnsMultiple")
, "(a b c) 200px (d e) 150px 100px 50px", "(x y z) 50px (v w)"); | 88 testGridDefinitionsValues(document.getElementById("gridFourColumnsMultiple")
, "[a b c] 200px [d e] 150px 100px 50px", "[x y z] 50px [v w]"); |
89 </script> | 89 </script> |
OLD | NEW |