[CSS Grid Layout] LayoutBox::hasDefiniteLogicalHeight() should consider abspos boxes...
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / percent-track-breadths-regarding-container-size.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 .grid {
7     -webkit-grid-template-columns: 20% 50% 30%;
8     -webkit-grid-template-rows: 40%;
9 }
10
11 .fixedSize {
12     width: 400px;
13     height: 400px;
14 }
15
16 .calculatedSize {
17     width: calc(200px + 20%);
18     height: calc(300px + 10%);
19 }
20
21 .percentageSize {
22     width: 50%;
23     height: 50%;
24 }
25
26 .absolutelyPositioned {
27     position: absolute;
28 }
29
30 .indefiniteSize {
31     width: -webkit-fit-content;
32     height: auto;
33 }
34
35 .firstRowFirstColumn {
36     color: blue;
37     background-color: cyan;
38 }
39
40 .firstRowSecondColumn {
41     color: green;
42     background-color: lime;
43 }
44
45 .firstRowThirdColumn {
46     color: brown;
47     background-color: yellow;
48     -webkit-grid-column: 3;
49     -webkit-grid-row: 1;
50 }
51 </style>
52 <script src="../../resources/check-layout.js"></script>
53 </head>
54 <body onload="checkLayout('.grid');">
55     <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
56     <div class="unconstrainedContainer">
57         <div class="grid">
58             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
59             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
60             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
61         </div>
62     </div>
63
64     <div class="indefiniteSize">
65         <div class="grid">
66             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
67             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
68             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
69         </div>
70     </div>
71
72     <div class="unconstrainedContainer">
73         <div class="grid fixedSize">
74             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
75             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
76             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
77         </div>
78     </div>
79
80     <div class="indefiniteSize">
81         <div class="grid fixedSize">
82             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
83             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
84             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
85         </div>
86     </div>
87
88     <div class="indefiniteSize">
89         <div class="grid calculatedSize">
90             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
91             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
92             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
93         </div>
94     </div>
95
96     <div class="unconstrainedContainer">
97         <div class="grid calculatedSize">
98             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
99             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
100             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
101         </div>
102     </div>
103
104     <div class="indefiniteSize">
105         <div class="grid percentageSize">
106             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
107             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
108             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
109         </div>
110     </div>
111
112     <div class="unconstrainedContainer">
113         <div class="grid percentageSize">
114             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
115             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
116             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
117         </div>
118     </div>
119
120     <div class="indefiniteSize">
121         <div class="grid absolutelyPositioned">
122             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XX</div>
123             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXXXX</div>
124             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXX</div>
125         </div>
126     </div>
127
128     <div class="unconstrainedContainer">
129         <div class="grid absolutelyPositioned">
130             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XX</div>
131             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXXXX</div>
132             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="0" data-expected-height="0">XXX</div>
133         </div>
134     </div>
135
136     <div class="indefiniteSize">
137         <div class="grid indefiniteSize">
138             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
139             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
140             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
141         </div>
142     </div>
143
144     <div class="unconstrainedContainer">
145         <div class="grid indefiniteSize">
146             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
147             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
148             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
149         </div>
150     </div>
151
152 </body>
153 </html>