4bdabf2188a15baea3232505698e5bd01328fb68
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-element-shrink-to-fit.html
1 <!DOCTYPE html>
2 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .grid {
6     -webkit-grid-template-rows: 50px 50px;
7     -webkit-grid-template-columns: 0.5fr 0.5fr;
8 }
9
10 .floatPos {
11     float: left;
12 }
13
14 .absolutePos {
15     position: absolute;
16 }
17
18 .fixedPos {
19     position: fixed;
20 }
21
22 .one {
23     width: 100px;
24     height: 40px;
25 }
26
27 .two {
28     width: 50px;
29     height: 40px;
30 }
31 .three {
32     width: 40px;
33     height: 40px;
34 }
35 .four {
36     width: 30px;
37     height: 40px;
38 }
39
40 .testContainer {
41     position: relative;
42     height: 100px;
43 }
44 </style>
45 <body>
46
47 <p>This test checks that the shrink-to-fit behavior is applied to out-of-flow positioned elements.</p>
48
49 <div class="testContainer">
50   <div class="grid">
51     <div class="one firstRowFirstColumn"></div>
52     <div class="two firstRowSecondColumn"></div>
53     <div class="three secondRowFirstColumn"></div>
54     <div class="four secondRowSecondColumn"></div>
55   </div>
56 </div>
57
58 <div class="testContainer">
59   <div class="grid floatPos">
60     <div class="one firstRowFirstColumn"></div>
61     <div class="two firstRowSecondColumn"></div>
62     <div class="three secondRowFirstColumn"></div>
63     <div class="four secondRowSecondColumn"></div>
64   </div>
65 </div>
66
67 <div class="testContainer">
68   <div class="grid absolutePos">
69     <div class="one firstRowFirstColumn"></div>
70     <div class="two firstRowSecondColumn"></div>
71     <div class="three secondRowFirstColumn"></div>
72     <div class="four secondRowSecondColumn"></div>
73   </div>
74 </div>
75
76 <div class="testContainer">
77   <div class="grid fixedPos">
78     <div class="one firstRowFirstColumn"></div>
79     <div class="two firstRowSecondColumn"></div>
80     <div class="three secondRowFirstColumn"></div>
81     <div class="four secondRowSecondColumn"></div>
82   </div>
83 </div>
84
85 </body>
86 </html>