[CSS Grid Layout] Wrong computed style for named grid lines in implicit tracks
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / named-grid-lines-computed-style-implicit-tracks.html
1 <!DOCTYPE HTML>
2 <link href="resources/grid.css" rel="stylesheet">
3 <style>
4 .grid {
5     font: 50px/1 Ahem;
6 }
7
8 .singleNamedGridLines {
9     -webkit-grid-template-columns: (a) auto (b);
10     -webkit-grid-template-rows: (x) auto (y);
11 }
12
13 .multipleNamedGridLines {
14     -webkit-grid-template-columns: (a b c) auto (d e);
15     -webkit-grid-template-rows: (x y z) auto (v w);
16 }
17 </style>
18 <script src="../../resources/js-test.js"></script>
19
20 <div class="grid singleNamedGridLines" id="gridOneColumnSingle">
21     <div>XXXX</div>
22     <div>XXX</div>
23     <div>XX</div>
24     <div>X</div>
25 </div>
26
27 <div class="grid singleNamedGridLines" id="gridTwoColumnsSingle">
28     <div class="firstRowAutoColumn">XXXX</div>
29     <div class="firstRowAutoColumn">XXX</div>
30     <div>XX</div>
31     <div>X</div>
32 </div>
33
34 <div class="grid singleNamedGridLines" id="gridThreeColumnsSingle">
35     <div class="firstRowAutoColumn">XXXX</div>
36     <div class="firstRowAutoColumn">XXX</div>
37     <div class="firstRowAutoColumn">XX</div>
38     <div>X</div>
39 </div>
40
41 <div class="grid singleNamedGridLines" id="gridFourColumnsSingle">
42     <div class="firstRowAutoColumn">XXXX</div>
43     <div class="firstRowAutoColumn">XXX</div>
44     <div class="firstRowAutoColumn">XX</div>
45     <div class="firstRowAutoColumn">X</div>
46 </div>
47
48 <div class="grid multipleNamedGridLines" id="gridOneColumnMultiple">
49     <div>XXXX</div>
50     <div>XXX</div>
51     <div>XX</div>
52     <div>X</div>
53 </div>
54
55 <div class="grid multipleNamedGridLines" id="gridTwoColumnsMultiple">
56     <div class="firstRowAutoColumn">XXXX</div>
57     <div class="firstRowAutoColumn">XXX</div>
58     <div>XX</div>
59     <div>X</div>
60 </div>
61
62 <div class="grid multipleNamedGridLines" id="gridThreeColumnsMultiple">
63     <div class="firstRowAutoColumn">XXXX</div>
64     <div class="firstRowAutoColumn">XXX</div>
65     <div class="firstRowAutoColumn">XX</div>
66     <div>X</div>
67 </div>
68
69 <div class="grid multipleNamedGridLines" id="gridFourColumnsMultiple">
70     <div class="firstRowAutoColumn">XXXX</div>
71     <div class="firstRowAutoColumn">XXX</div>
72     <div class="firstRowAutoColumn">XX</div>
73     <div class="firstRowAutoColumn">X</div>
74 </div>
75
76 <script src="resources/grid-definitions-parsing-utils.js"></script>
77 <script>
78     description('Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks');
79
80     testGridTemplatesValues(document.getElementById("gridOneColumnSingle"), "(a) 200px (b)", "(x) 50px (y) 50px 50px 50px");
81     testGridTemplatesValues(document.getElementById("gridTwoColumnsSingle"), "(a) 200px (b) 150px", "(x) 50px (y) 50px");
82     testGridTemplatesValues(document.getElementById("gridThreeColumnsSingle"), "(a) 200px (b) 150px 100px", "(x) 50px (y) 50px");
83     testGridTemplatesValues(document.getElementById("gridFourColumnsSingle"), "(a) 200px (b) 150px 100px 50px", "(x) 50px (y)");
84
85     testGridTemplatesValues(document.getElementById("gridOneColumnMultiple"), "(a b c) 200px (d e)", "(x y z) 50px (v w) 50px 50px 50px");
86     testGridTemplatesValues(document.getElementById("gridTwoColumnsMultiple"), "(a b c) 200px (d e) 150px", "(x y z) 50px (v w) 50px");
87     testGridTemplatesValues(document.getElementById("gridThreeColumnsMultiple"), "(a b c) 200px (d e) 150px 100px", "(x y z) 50px (v w) 50px");
88     testGridTemplatesValues(document.getElementById("gridFourColumnsMultiple"), "(a b c) 200px (d e) 150px 100px 50px", "(x y z) 50px (v w)");
89 </script>