| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
| 5 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
| 6 <style> | 6 <style> |
| 7 body { | 7 body { |
| 8 margin: 0; | 8 margin: 0; |
| 9 } | 9 } |
| 10 | 10 |
| (...skipping 20 matching lines...) Expand all Loading... |
| 31 } | 31 } |
| 32 | 32 |
| 33 .alignItemsCenter { | 33 .alignItemsCenter { |
| 34 align-items: center; | 34 align-items: center; |
| 35 } | 35 } |
| 36 | 36 |
| 37 .alignItemsCenterSafe { | 37 .alignItemsCenterSafe { |
| 38 align-items: center safe; | 38 align-items: center safe; |
| 39 } | 39 } |
| 40 | 40 |
| 41 .alignItemsCenterTrue { | 41 .alignItemsCenterUnsafe { |
| 42 align-items: center true; | 42 align-items: center unsafe; |
| 43 } | 43 } |
| 44 | 44 |
| 45 .alignItemsEnd { | 45 .alignItemsEnd { |
| 46 align-items: end; | 46 align-items: end; |
| 47 } | 47 } |
| 48 | 48 |
| 49 .alignItemsEndSafe { | 49 .alignItemsEndSafe { |
| 50 align-items: end safe; | 50 align-items: end safe; |
| 51 } | 51 } |
| 52 | 52 |
| 53 .alignItemsEndTrue { | 53 .alignItemsEndUnsafe { |
| 54 align-items: end true; | 54 align-items: end unsafe; |
| 55 } | 55 } |
| 56 | 56 |
| 57 .alignSelfCenter { | 57 .alignSelfCenter { |
| 58 align-self: center; | 58 align-self: center; |
| 59 } | 59 } |
| 60 | 60 |
| 61 .alignSelfCenterSafe { | 61 .alignSelfCenterSafe { |
| 62 align-self: center safe; | 62 align-self: center safe; |
| 63 } | 63 } |
| 64 | 64 |
| 65 .alignSelfCenterTrue { | 65 .alignSelfCenterUnsafe { |
| 66 align-self: center true; | 66 align-self: center unsafe; |
| 67 } | 67 } |
| 68 | 68 |
| 69 .alignSelfEnd { | 69 .alignSelfEnd { |
| 70 align-self: end; | 70 align-self: end; |
| 71 } | 71 } |
| 72 | 72 |
| 73 .alignSelfEndSafe { | 73 .alignSelfEndSafe { |
| 74 align-self: end safe; | 74 align-self: end safe; |
| 75 } | 75 } |
| 76 | 76 |
| 77 .alignSelfEndTrue { | 77 .alignSelfEndUnsafe { |
| 78 align-self: end true; | 78 align-self: end unsafe; |
| 79 } | 79 } |
| 80 | 80 |
| 81 .justifyItemsCenter { | 81 .justifyItemsCenter { |
| 82 justify-items: center; | 82 justify-items: center; |
| 83 } | 83 } |
| 84 | 84 |
| 85 .justifyItemsCenterSafe { | 85 .justifyItemsCenterSafe { |
| 86 justify-items: center safe; | 86 justify-items: center safe; |
| 87 } | 87 } |
| 88 | 88 |
| 89 .justifyItemsCenterTrue { | 89 .justifyItemsCenterUnsafe { |
| 90 justify-items: center true; | 90 justify-items: center unsafe; |
| 91 } | 91 } |
| 92 | 92 |
| 93 .justifyItemsEnd { | 93 .justifyItemsEnd { |
| 94 justify-items: end; | 94 justify-items: end; |
| 95 } | 95 } |
| 96 | 96 |
| 97 .justifyItemsEndSafe { | 97 .justifyItemsEndSafe { |
| 98 justify-items: end safe; | 98 justify-items: end safe; |
| 99 } | 99 } |
| 100 | 100 |
| 101 .justifyItemsEndTrue { | 101 .justifyItemsEndUnsafe { |
| 102 justify-items: end true; | 102 justify-items: end unsafe; |
| 103 } | 103 } |
| 104 | 104 |
| 105 .justifySelfCenter { | 105 .justifySelfCenter { |
| 106 justify-self: center; | 106 justify-self: center; |
| 107 } | 107 } |
| 108 | 108 |
| 109 .justifySelfCenterSafe { | 109 .justifySelfCenterSafe { |
| 110 justify-self: center safe; | 110 justify-self: center safe; |
| 111 } | 111 } |
| 112 | 112 |
| 113 .justifySelfCenterTrue { | 113 .justifySelfCenterUnsafe { |
| 114 justify-self: center true; | 114 justify-self: center unsafe; |
| 115 } | 115 } |
| 116 | 116 |
| 117 .justifySelfEnd { | 117 .justifySelfEnd { |
| 118 justify-self: end; | 118 justify-self: end; |
| 119 } | 119 } |
| 120 | 120 |
| 121 .thirdRowFirstColumn { | 121 .thirdRowFirstColumn { |
| 122 background-color: green; | 122 background-color: green; |
| 123 grid-column: 1; | 123 grid-column: 1; |
| 124 grid-row: 3; | 124 grid-row: 3; |
| 125 } | 125 } |
| 126 </style> | 126 </style> |
| 127 </head> | 127 </head> |
| 128 <body onload="checkLayout('.grid')"> | 128 <body onload="checkLayout('.grid')"> |
| 129 | 129 |
| 130 <p>This test checks that the 'overflow' keyword is applied correctly for 'align'
and 'justify' properties.</p> | 130 <p>This test checks that the 'overflow' keyword is applied correctly for 'align'
and 'justify' properties.</p> |
| 131 | 131 |
| 132 <div style="position: relative"> | 132 <div style="position: relative"> |
| 133 <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="3
00" data-expected-height="360"> | 133 <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="3
00" data-expected-height="360"> |
| 134 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15"
data-offset-y="40" data-expected-width="180" data-expected-height="40"></div> | 134 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-15"
data-offset-y="40" data-expected-width="180" data-expected-height="40"></div> |
| 135 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> | 135 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
| 136 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 136 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 137 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> | 137 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
| 138 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="135
" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> | 138 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="135
" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div> |
| 139 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 139 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 140 </div> | 140 </div> |
| 141 </div> | 141 </div> |
| 142 | 142 |
| 143 <div style="position: relative"> | 143 <div style="position: relative"> |
| 144 <div class="grid alignItemsCenterTrue justifyItemsCenterTrue" data-expected-
width="300" data-expected-height="360"> | 144 <div class="grid alignItemsCenterUnsafe justifyItemsCenterUnsafe" data-expec
ted-width="300" data-expected-height="360"> |
| 145 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" d
ata-offset-y="-15" data-expected-width="50" data-expected-height="150"></div> | 145 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" d
ata-offset-y="-15" data-expected-width="50" data-expected-height="150"></div> |
| 146 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> | 146 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50"
data-offset-y="160" data-expected-width="50" data-expected-height="40"></div> |
| 147 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 147 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" d
ata-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 148 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> | 148 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200"
data-offset-y="40" data-expected-width="50" data-expected-height="40"></div> |
| 149 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200
" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div> | 149 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200
" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div> |
| 150 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> | 150 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200"
data-offset-y="280" data-expected-width="50" data-expected-height="40"></div> |
| 151 </div> | 151 </div> |
| 152 </div> | 152 </div> |
| 153 | 153 |
| 154 <div style="position: relative"> | 154 <div style="position: relative"> |
| (...skipping 23 matching lines...) Expand all Loading... |
| 178 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30"
data-offset-y="80" data-expected-width="180" data-expected-height="40"></div> | 178 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="-30"
data-offset-y="80" data-expected-width="180" data-expected-height="40"></div> |
| 179 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" d
ata-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-hei
ght="40"></div> | 179 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" d
ata-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-hei
ght="40"></div> |
| 180 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 180 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 181 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> | 181 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> |
| 182 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="120
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> | 182 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="120
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> |
| 183 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 183 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 184 </div> | 184 </div> |
| 185 </div> | 185 </div> |
| 186 | 186 |
| 187 <div style="position: relative"> | 187 <div style="position: relative"> |
| 188 <div class="grid alignItemsEndTrue justifyItemsEndTrue" data-expected-width=
"300" data-expected-height="360"> | 188 <div class="grid alignItemsEndUnsafe justifyItemsEndUnsafe" data-expected-wi
dth="300" data-expected-height="360"> |
| 189 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div> | 189 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div> |
| 190 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> | 190 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> |
| 191 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 191 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 192 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" dat
a-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-heigh
t="40"></div> | 192 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" dat
a-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-heigh
t="40"></div> |
| 193 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div> | 193 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div> |
| 194 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 194 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 195 </div> | 195 </div> |
| 196 </div> | 196 </div> |
| 197 | 197 |
| 198 <div style="position: relative"> | 198 <div style="position: relative"> |
| 199 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> | 199 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> |
| 200 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="80" data-expected-width="180" data-expected-height="40"></div> | 200 <div class="cellOverflowWidth firstRowFirstColumn" data-offset-x="0" da
ta-offset-y="80" data-expected-width="180" data-expected-height="40"></div> |
| 201 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterTru
e" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected
-height="40"></div> | 201 <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenterUns
afe" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expect
ed-height="40"></div> |
| 202 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 202 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 203 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> | 203 <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250"
data-offset-y="80" data-expected-width="50" data-expected-height="40"></div> |
| 204 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> | 204 <div class="cellOverflowWidth secondRowSecondColumn" data-offset-x="150
" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div> |
| 205 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 205 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 206 </div> | 206 </div> |
| 207 </div> | 207 </div> |
| 208 | 208 |
| 209 <div style="position: relative"> | 209 <div style="position: relative"> |
| 210 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> | 210 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width=
"300" data-expected-height="360"> |
| 211 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="50" data-expected-height="150"></div> | 211 <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="50" data-expected-height="150"></div> |
| 212 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> | 212 <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100"
data-offset-y="200" data-expected-width="50" data-expected-height="40"></div> |
| 213 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 213 <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 214 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterTrue"
data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-h
eight="40"></div> | 214 <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenterUnsaf
e" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected
-height="40"></div> |
| 215 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> | 215 <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250
" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div> |
| 216 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> | 216 <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250"
data-offset-y="320" data-expected-width="50" data-expected-height="40"></div> |
| 217 </div> | 217 </div> |
| 218 </div> | 218 </div> |
| 219 | 219 |
| 220 </body> | 220 </body> |
| 221 </html> | 221 </html> |
| OLD | NEW |