[css-align][css-grid] Overflow alignment value 'true' renamed to 'unsafe'
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-align-justify-overflow.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 .grid {
11     -webkit-grid-template-columns: 150px 150px;
12     -webkit-grid-template-rows: 120px 120px 120px;
13     width: -webkit-fit-content;
14     margin-bottom: 20px;
15 }
16 .cellOverflowWidth {
17     width: 180px;
18     height: 40px;
19 }
20 .cellOverflowHeight {
21     width: 50px;
22     height: 150px;
23 }
24 .cellWithNoOverflow {
25     width: 50px;
26     height: 40px;
27 }
28 .alignItemsCenter { align-items: center; }
29 .alignItemsCenterSafe { align-items: center safe; }
30 .alignItemsCenterUnsafe { align-items: center unsafe; }
31 .alignItemsEnd { align-items: end; }
32 .alignItemsEndSafe { align-items: end safe; }
33 .alignItemsEndUnsafe { align-items: end unsafe; }
34 .alignSelfCenter { align-self: center; }
35 .alignSelfCenterSafe { align-self: center safe; }
36 .alignSelfCenterUnsafe { align-self: center unsafe; }
37 .alignSelfEnd { align-self: end; }
38 .alignSelfEndSafe { align-self: end safe; }
39 .alignSelfEndUnsafe { align-self: end unsafe; }
40 .justifyItemsCenter { justify-items: center; }
41 .justifyItemsCenterSafe { justify-items: center safe; }
42 .justifyItemsCenterUnsafe { justify-items: center unsafe; }
43 .justifyItemsEnd { justify-items: end; }
44 .justifyItemsEndSafe { justify-items: end safe; }
45 .justifyItemsEndUnsafe { justify-items: end unsafe; }
46 .justifySelfCenter { justify-self: center; }
47 .justifySelfCenterSafe { justify-self: center safe; }
48 .justifySelfCenterUnsafe { justify-self: center unsafe; }
49 .justifySelfEnd { justify-self: end; }
50 .thirdRowFirstColumn {
51     background-color: green;
52     -webkit-grid-column: 1;
53     -webkit-grid-row: 3;
54 }
55 </style>
56 </head>
57 <body onload="checkLayout('.grid')">
58
59 <p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
60
61 <div style="position: relative">
62     <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
63         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
64         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
65         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
66         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
67         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="135" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
68         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
69     </div>
70 </div>
71
72 <div style="position: relative">
73     <div class="grid alignItemsCenterUnsafe justifyItemsCenterUnsafe" data-expected-width="300" data-expected-height="360">
74         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
75         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
76         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
77         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
78         <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div>
79         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
80     </div>
81 </div>
82
83 <div style="position: relative">
84     <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
85         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
86         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
87         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
88         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
89         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
90         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
91     </div>
92 </div>
93
94 <div style="position: relative">
95     <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-width="300" data-expected-height="360">
96         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
97         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
98         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
99         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
100         <div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
101         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
102     </div>
103 </div>
104
105 <div style="position: relative">
106     <div class="grid alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
107         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
108         <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
109         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
110         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
111         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="120" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
112         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
113     </div>
114 </div>
115
116 <div style="position: relative">
117     <div class="grid alignItemsEndUnsafe justifyItemsEndUnsafe" data-expected-width="300" data-expected-height="360">
118         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
119         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
120         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
121         <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
122         <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div>
123         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
124     </div>
125 </div>
126
127 <div style="position: relative">
128     <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
129         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
130         <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterUnsafe" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
131         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
132         <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
133         <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
134         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
135     </div>
136 </div>
137
138 <div style="position: relative">
139     <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width="300" data-expected-height="360">
140         <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
141         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
142         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
143         <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterUnsafe" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
144         <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
145         <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
146     </div>
147 </div>
148
149 </body>
150 </html>