[CSS Grid Layout] Layout is wrong for flex factor sum between 0 and 1
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / flex-factor-sum-less-than-1.html
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .onlyColumnFractionFlexFactors {
6     -webkit-grid-template-columns: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr);
7     -webkit-grid-template-rows: 50px;
8     width: 100px;
9 }
10 .onlyRowFractionFlexFactors {
11     -webkit-grid-template-columns: 50px;
12     -webkit-grid-template-rows: minmax(0,0.1fr) minmax(0,0.2fr) minmax(0,0.3fr);
13     width: 50px;
14     height: 100px;
15 }
16 .fixedAndfractionFlexFactors {
17     -webkit-grid-template-columns: 50px minmax(0,0.2fr) 30px;
18     -webkit-grid-template-rows: minmax(0,0.1fr) 50px minmax(0,0.3fr);
19     width: 100px;
20     height: 100px;
21 }
22 .firstRowThirdColumn {
23     background-color: yellow;
24     -webkit-grid-column: 3;
25     -webkit-grid-row: 1;
26 }
27 .secondRowThirdColumn {
28     background-color: yellow;
29     -webkit-grid-column: 3;
30     -webkit-grid-row: 2;
31 }
32 .thirdRowFirstColumn {
33     background-color: brown;
34     -webkit-grid-column: 1;
35     -webkit-grid-row: 3;
36 }
37 .thirdRowThirdColumn {
38     background-color: magenta;
39     -webkit-grid-column: 3;
40     -webkit-grid-row: 3;
41 }
42 </style>
43 <script src="../../resources/check-layout.js"></script>
44 <body onload="checkLayout('.grid');">
45
46 <p>Test that resolving auto tracks on grid items works properly.</p>
47
48 <div style="position: relative;">
49     <div class="grid onlyColumnFractionFlexFactors">
50         <div class="firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
51         <div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
52         <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
53     </div>
54 </div>
55
56 <div style="position: relative;">
57     <div class="grid onlyRowFractionFlexFactors">
58         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
59         <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
60         <div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
61     </div>
62 </div>
63
64 <div style="position: relative;">
65     <div class="grid fixedAndfractionFlexFactors">
66         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div>
67         <div class="firstRowSecondColumn" data-expected-width="4" data-expected-height="5"></div>
68         <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="5"></div>
69         <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
70         <div class="secondRowSecondColumn" data-expected-width="4" data-expected-height="50"></div>
71         <div class="secondRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
72         <div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
73         <div class="thirdRowSecondColumn" data-expected-width="4" data-expected-height="15"></div>
74         <div class="thirdRowThirdColumn" data-expected-width="30" data-expected-height="15"></div>
75     </div>
76 </div>
77
78 </body>
79 </html>
80
81