OLD | NEW |
(Empty) | |
| 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 grid-template-columns: 150px 150px; |
| 13 grid-template-rows: 120px 120px 120px; |
| 14 width: -webkit-fit-content; |
| 15 margin-bottom: 20px; |
| 16 } |
| 17 |
| 18 .cellOverflowWidth { |
| 19 width: 180px; |
| 20 height: 40px; |
| 21 } |
| 22 |
| 23 .cellOverflowHeight { |
| 24 width: 50px; |
| 25 height: 150px; |
| 26 } |
| 27 |
| 28 .cellWithNoOverflow { |
| 29 width: 50px; |
| 30 height: 40px; |
| 31 } |
| 32 |
| 33 .alignItemsCenter { |
| 34 align-items: center; |
| 35 } |
| 36 |
| 37 .alignItemsCenterSafe { |
| 38 align-items: center safe; |
| 39 } |
| 40 |
| 41 .alignItemsCenterTrue { |
| 42 align-items: center true; |
| 43 } |
| 44 |
| 45 .alignItemsEnd { |
| 46 align-items: end; |
| 47 } |
| 48 |
| 49 .alignItemsEndSafe { |
| 50 align-items: end safe; |
| 51 } |
| 52 |
| 53 .alignItemsEndTrue { |
| 54 align-items: end true; |
| 55 } |
| 56 |
| 57 .alignSelfCenter { |
| 58 align-self: center; |
| 59 } |
| 60 |
| 61 .alignSelfCenterSafe { |
| 62 align-self: center safe; |
| 63 } |
| 64 |
| 65 .alignSelfCenterTrue { |
| 66 align-self: center true; |
| 67 } |
| 68 |
| 69 .alignSelfEnd { |
| 70 align-self: end; |
| 71 } |
| 72 |
| 73 .alignSelfEndSafe { |
| 74 align-self: end safe; |
| 75 } |
| 76 |
| 77 .alignSelfEndTrue { |
| 78 align-self: end true; |
| 79 } |
| 80 |
| 81 .justifyItemsCenter { |
| 82 justify-items: center; |
| 83 } |
| 84 |
| 85 .justifyItemsCenterSafe { |
| 86 justify-items: center safe; |
| 87 } |
| 88 |
| 89 .justifyItemsCenterTrue { |
| 90 justify-items: center true; |
| 91 } |
| 92 |
| 93 .justifyItemsEnd { |
| 94 justify-items: end; |
| 95 } |
| 96 |
| 97 .justifyItemsEndSafe { |
| 98 justify-items: end safe; |
| 99 } |
| 100 |
| 101 .justifyItemsEndTrue { |
| 102 justify-items: end true; |
| 103 } |
| 104 |
| 105 .justifySelfCenter { |
| 106 justify-self: center; |
| 107 } |
| 108 |
| 109 .justifySelfCenterSafe { |
| 110 justify-self: center safe; |
| 111 } |
| 112 |
| 113 .justifySelfCenterTrue { |
| 114 justify-self: center true; |
| 115 } |
| 116 |
| 117 .justifySelfEnd { |
| 118 justify-self: end; |
| 119 } |
| 120 |
| 121 .thirdRowFirstColumn { |
| 122 background-color: green; |
| 123 grid-column: 1; |
| 124 grid-row: 3; |
| 125 } |
| 126 |
| 127 .thirdRowSecondColumn { |
| 128 background-color: red; |
| 129 grid-column: 2; |
| 130 grid-row: 3; |
| 131 } |
| 132 </style> |
| 133 </head> |
| 134 <body onload="checkLayout('.grid')"> |
| 135 |
| 136 <p>This test checks that the 'overflow' keyword is applied correctly for 'align'
and 'justify' properties.</p> |
| 137 |
| 138 <div style="position: relative"> |
| 139 <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="3
00" data-expected-height="360"> |
| 140 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15"
data-offset-y="40" data-expected-width="180" data-expected-height="40"></div> |
| 141 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
| 142 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 143 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
| 144 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="135
" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> |
| 145 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 146 </div> |
| 147 </div> |
| 148 |
| 149 <div style="position: relative"> |
| 150 <div class="grid alignItemsCenterTrue justifyItemsCenterTrue" data-expected-
width="300" data-expected-height="360"> |
| 151 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" d
ata-offset-y="-15" data-expected-width="50" data-expected-height="150"></div> |
| 152 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
| 153 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 154 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
| 155 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200
" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div> |
| 156 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 157 </div> |
| 158 </div> |
| 159 |
| 160 <div style="position: relative"> |
| 161 <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-
width="300" data-expected-height="360"> |
| 162 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="40" data-expected-width="180" data-expected-height="40"></div> |
| 163 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
| 164 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 165 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
| 166 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150
" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> |
| 167 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 168 </div> |
| 169 </div> |
| 170 |
| 171 <div style="position: relative"> |
| 172 <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected-
width="300" data-expected-height="360"> |
| 173 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" d
ata-offset-y="0" data-expected-width="50" data-expected-height="150"></div> |
| 174 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
| 175 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 176 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
| 177 <div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe
justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-wi
dth="50" data-expected-height="150"></div> |
| 178 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 179 </div> |
| 180 </div> |
| 181 |
| 182 <div style="position: relative"> |
| 183 <div class="grid alignItemsEnd justifyItemsEnd" data-expected-width="300" da
ta-expected-height="360"> |
| 184 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30"
data-offset-y="80" data-expected-width="180" data-expected-height="40"></div> |
| 185 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" d
ata-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-hei
ght="40"></div> |
| 186 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 187 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> |
| 188 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="120
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> |
| 189 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 190 </div> |
| 191 </div> |
| 192 |
| 193 <div style="position: relative"> |
| 194 <div class="grid alignItemsEndTrue justifyItemsEndTrue" data-expected-width=
"300" data-expected-height="360"> |
| 195 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div> |
| 196 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> |
| 197 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 198 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" dat
a-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-heigh
t="40"></div> |
| 199 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div> |
| 200 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 201 </div> |
| 202 </div> |
| 203 |
| 204 <div style="position: relative"> |
| 205 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> |
| 206 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="80" data-expected-width="180" data-expected-height="40"></div> |
| 207 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterTru
e" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected
-height="40"></div> |
| 208 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 209 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> |
| 210 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> |
| 211 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 212 </div> |
| 213 </div> |
| 214 |
| 215 <div style="position: relative"> |
| 216 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> |
| 217 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="50" data-expected-height="150"></div> |
| 218 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> |
| 219 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 220 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterTrue"
data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-h
eight="40"></div> |
| 221 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> |
| 222 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 223 </div> |
| 224 </div> |
| 225 |
| 226 </body> |
| 227 </html> |
OLD | NEW |