1cd3a7b148d4a381a5fec04639dc9cb4eb883865
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-auto-margins-and-stretch.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script>
6 <style>
7 body {
8     margin: 0;
9 }
10
11 .grid {
12     -webkit-grid-template-columns: 100px 100px;
13     -webkit-grid-template-rows: 200px 200px;
14     width: -webkit-fit-content;
15     margin-bottom: 20px;
16     font: 15px/1 Ahem;
17 }
18
19 .autoMarginsTopBottom {
20     margin: auto 0px;
21 }
22
23 .autoMarginsRightLeft {
24     margin: 0px auto;
25 }
26
27 .autoMargins {
28     margin: auto auto;
29 }
30
31 .onlyWidthSet {
32     width: 20px;
33 }
34
35 .onlyHeightSet {
36     height: 40px;
37 }
38
39 .widthAndHeightSet {
40     width: 20px;
41     height: 40px;
42 }
43 </style>
44 </head>
45 <body onload="checkLayout('.grid')">
46
47 <p>This test checks that the 'stretch' value is only applied if neither of its margins (in the appropriate axis) are 'auto'.</p>
48
49 <div style="position: relative">
50     <div class="grid" data-expected-width="200" data-expected-height="400">
51         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">
52             <div class="widthAndHeightSet"></div>
53         </div>
54         <div class="autoMargins firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40">
55             <div class="widthAndHeightSet"></div>
56         </div>
57         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200">
58             <div class="widthAndHeightSet"></div>
59         </div>
60         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="40">
61             <div class="widthAndHeightSet"></div>
62         </div>
63     </div>
64 </div>
65
66 <div style="position: relative">
67     <div class="grid verticalRL" data-expected-width="400" data-expected-height="200">
68         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
69             <div class="widthAndHeightSet"></div>
70         </div>
71         <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40">
72             <div class="widthAndHeightSet"></div>
73         </div>
74         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="100">
75             <div class="widthAndHeightSet"></div>
76         </div>
77         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40">
78             <div class="widthAndHeightSet"></div>
79         </div>
80     </div>
81 </div>
82
83 <div style="position: relative">
84     <div class="grid verticalLR" data-expected-width="400" data-expected-height="200">
85         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
86             <div class="widthAndHeightSet"></div>
87         </div>
88         <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40">
89             <div class="widthAndHeightSet"></div>
90         </div>
91         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="100">
92             <div class="widthAndHeightSet"></div>
93         </div>
94         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40">
95             <div class="widthAndHeightSet"></div>
96         </div>
97     </div>
98 </div>
99
100 <!-- RTL direction -->
101 <div style="position: relative">
102     <div class="grid directionRTL" data-expected-width="200" data-expected-height="400">
103         <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200">
104             <div class="widthAndHeightSet"></div>
105         </div>
106         <div class="autoMargins firstRowSecondColumn" data-offset-x="80" data-offset-y="80" data-expected-width="20" data-expected-height="40">
107             <div class="widthAndHeightSet"></div>
108         </div>
109         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200">
110             <div class="widthAndHeightSet"></div>
111         </div>
112         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="40">
113             <div class="widthAndHeightSet"></div>
114         </div>
115     </div>
116 </div>
117
118 <div style="position: relative">
119     <div class="grid directionRTL verticalRL" data-expected-width="400" data-expected-height="200">
120         <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100">
121             <div class="widthAndHeightSet"></div>
122         </div>
123         <div class="autoMargins firstRowSecondColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40">
124             <div class="widthAndHeightSet"></div>
125         </div>
126         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="100">
127             <div class="widthAndHeightSet"></div>
128         </div>
129         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">
130             <div class="widthAndHeightSet"></div>
131         </div>
132     </div>
133 </div>
134
135 <div style="position: relative">
136     <div class="grid  directionRTL verticalLR" data-expected-width="400" data-expected-height="200">
137         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
138             <div class="widthAndHeightSet"></div>
139         </div>
140         <div class="autoMargins firstRowSecondColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40">
141             <div class="widthAndHeightSet"></div>
142         </div>
143         <div class="autoMarginsRightLeft secondRowFirstColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="100">
144             <div class="widthAndHeightSet"></div>
145         </div>
146         <div class="autoMarginsTopBottom secondRowSecondColumn" data-offset-x="200" data-offset-y="60" data-expected-width="200" data-expected-height="40">
147             <div class="widthAndHeightSet"></div>
148         </div>
149     </div>
150 </div>
151
152 </body>
153 </html>