| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 display: -webkit-flex; | 5 display: flex; |
| 6 background-color: #aaa; | 6 background-color: #aaa; |
| 7 position: relative; | 7 position: relative; |
| 8 -webkit-flex-wrap: wrap; | 8 flex-wrap: wrap; |
| 9 } | 9 } |
| 10 | 10 |
| 11 .horizontal { | 11 .horizontal { |
| 12 width: 200px; | 12 width: 200px; |
| 13 height: 120px; | 13 height: 120px; |
| 14 } | 14 } |
| 15 .horizontal > div { | 15 .horizontal > div { |
| 16 min-height: 20px; | 16 min-height: 20px; |
| 17 } | 17 } |
| 18 .horizontal > :nth-child(1) { | 18 .horizontal > :nth-child(1) { |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 68 <body onload="checkLayout('.flexbox')"> | 68 <body onload="checkLayout('.flexbox')"> |
| 69 <p>Test to make sure that align-content works properly.</p> | 69 <p>Test to make sure that align-content works properly.</p> |
| 70 | 70 |
| 71 <div data-expected-height="120" class="flexbox horizontal"> | 71 <div data-expected-height="120" class="flexbox horizontal"> |
| 72 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> | 72 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> |
| 73 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> | 73 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> |
| 74 <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> | 74 <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> |
| 75 <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> | 75 <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> |
| 76 </div> | 76 </div> |
| 77 | 77 |
| 78 <div data-expected-height="120" class="flexbox horizontal" style="-webkit-align-
content: flex-start"> | 78 <div data-expected-height="120" class="flexbox horizontal" style="align-content:
flex-start"> |
| 79 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> | 79 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| 80 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> | 80 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| 81 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> | 81 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> |
| 82 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> | 82 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> |
| 83 </div> | 83 </div> |
| 84 | 84 |
| 85 <div data-expected-height="120" class="flexbox horizontal" style="-webkit-align-
content: flex-end"> | 85 <div data-expected-height="120" class="flexbox horizontal" style="align-content:
flex-end"> |
| 86 <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div> | 86 <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div> |
| 87 <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div> | 87 <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div> |
| 88 <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div> | 88 <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div> |
| 89 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> | 89 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> |
| 90 </div> | 90 </div> |
| 91 | 91 |
| 92 <div data-expected-height="120" class="flexbox horizontal" style="-webkit-align-
content: center"> | 92 <div data-expected-height="120" class="flexbox horizontal" style="align-content:
center"> |
| 93 <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div> | 93 <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div> |
| 94 <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div> | 94 <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div> |
| 95 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> | 95 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> |
| 96 <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div> | 96 <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div> |
| 97 </div> | 97 </div> |
| 98 | 98 |
| 99 <div data-expected-height="120" class="flexbox horizontal" style="-webkit-align-
content: space-between"> | 99 <div data-expected-height="120" class="flexbox horizontal" style="align-content:
space-between"> |
| 100 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> | 100 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| 101 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> | 101 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| 102 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> | 102 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> |
| 103 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> | 103 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> |
| 104 </div> | 104 </div> |
| 105 | 105 |
| 106 <div data-expected-height="120" class="flexbox horizontal" style="-webkit-align-
content: space-around"> | 106 <div data-expected-height="120" class="flexbox horizontal" style="align-content:
space-around"> |
| 107 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> | 107 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> |
| 108 <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div> | 108 <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div> |
| 109 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> | 109 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> |
| 110 <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div> | 110 <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div> |
| 111 </div> | 111 </div> |
| 112 | 112 |
| 113 <div data-expected-height="120" class="flexbox horizontal" style="-webkit-align-
content: stretch"> | 113 <div data-expected-height="120" class="flexbox horizontal" style="align-content:
stretch"> |
| 114 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> | 114 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> |
| 115 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> | 115 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> |
| 116 <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> | 116 <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> |
| 117 <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> | 117 <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> |
| 118 </div> | 118 </div> |
| 119 | 119 |
| 120 <!-- Negative overflow goes out the top. --> | 120 <!-- Negative overflow goes out the top. --> |
| 121 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: flex-end; height: 30px"> | 121 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
flex-end; height: 30px"> |
| 122 <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div> | 122 <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div> |
| 123 <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div> | 123 <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div> |
| 124 <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div> | 124 <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div> |
| 125 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> | 125 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> |
| 126 </div> | 126 </div> |
| 127 | 127 |
| 128 <!-- If we overflow, we should true center. --> | 128 <!-- If we overflow, we should true center. --> |
| 129 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: center; height: 30px"> | 129 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
center; height: 30px"> |
| 130 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> | 130 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> |
| 131 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> | 131 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> |
| 132 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> | 132 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> |
| 133 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> | 133 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> |
| 134 </div> | 134 </div> |
| 135 | 135 |
| 136 <!-- If we overflow, we should be the same as flex-start. --> | 136 <!-- If we overflow, we should be the same as flex-start. --> |
| 137 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: space-between; height: 30px"> | 137 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
space-between; height: 30px"> |
| 138 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> | 138 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| 139 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> | 139 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| 140 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> | 140 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> |
| 141 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> | 141 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> |
| 142 </div> | 142 </div> |
| 143 | 143 |
| 144 <!-- If we overflow, we should true center. --> | 144 <!-- If we overflow, we should true center. --> |
| 145 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: space-around; height: 30px"> | 145 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
space-around; height: 30px"> |
| 146 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> | 146 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> |
| 147 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> | 147 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> |
| 148 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> | 148 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> |
| 149 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> | 149 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> |
| 150 </div> | 150 </div> |
| 151 | 151 |
| 152 <!-- Stretch should only grow, not shrink. --> | 152 <!-- Stretch should only grow, not shrink. --> |
| 153 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: stretch; height: 30px"> | 153 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
stretch; height: 30px"> |
| 154 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> | 154 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> |
| 155 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> | 155 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> |
| 156 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> | 156 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> |
| 157 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> | 157 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> |
| 158 </div> | 158 </div> |
| 159 | 159 |
| 160 <!-- 0 lines should not crash. --> | 160 <!-- 0 lines should not crash. --> |
| 161 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: space-between; height: 30px"> | 161 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
space-between; height: 30px"> |
| 162 </div> | 162 </div> |
| 163 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: space-around; height: 30px"> | 163 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
space-around; height: 30px"> |
| 164 </div> | 164 </div> |
| 165 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: stretch; height: 30px"> | 165 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
stretch; height: 30px"> |
| 166 </div> | 166 </div> |
| 167 | 167 |
| 168 <!-- 1 line should not crash. --> | 168 <!-- 1 line should not crash. --> |
| 169 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: space-between; height: 30px"> | 169 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
space-between; height: 30px"> |
| 170 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> | 170 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> |
| 171 </div> | 171 </div> |
| 172 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: space-around; height: 30px"> | 172 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
space-around; height: 30px"> |
| 173 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> | 173 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> |
| 174 </div> | 174 </div> |
| 175 <div data-expected-height="30" class="flexbox horizontal" style="-webkit-align-c
ontent: stretch; height: 30px"> | 175 <div data-expected-height="30" class="flexbox horizontal" style="align-content:
stretch; height: 30px"> |
| 176 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> | 176 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> |
| 177 </div> | 177 </div> |
| 178 | 178 |
| 179 | 179 |
| 180 <div data-expected-width="120" class="flexbox vertical-rl"> | 180 <div data-expected-width="120" class="flexbox vertical-rl"> |
| 181 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> | 181 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> |
| 182 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> | 182 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> |
| 183 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> | 183 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> |
| 184 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> | 184 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> |
| 185 </div> | 185 </div> |
| 186 | 186 |
| 187 <div data-expected-width="120" class="flexbox vertical-rl" style="-webkit-align-
content: flex-start"> | 187 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content:
flex-start"> |
| 188 <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> | 188 <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> |
| 189 <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> | 189 <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> |
| 190 <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div> | 190 <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div> |
| 191 <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div> | 191 <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div> |
| 192 </div> | 192 </div> |
| 193 | 193 |
| 194 <div data-expected-width="120" class="flexbox vertical-rl" style="-webkit-align-
content: flex-end"> | 194 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content:
flex-end"> |
| 195 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> | 195 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> |
| 196 <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> | 196 <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> |
| 197 <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> | 197 <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> |
| 198 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> | 198 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> |
| 199 </div> | 199 </div> |
| 200 | 200 |
| 201 <div data-expected-width="120" class="flexbox vertical-rl" style="-webkit-align-
content: center"> | 201 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content:
center"> |
| 202 <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div> | 202 <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div> |
| 203 <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div> | 203 <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div> |
| 204 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> | 204 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> |
| 205 <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div> | 205 <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div> |
| 206 </div> | 206 </div> |
| 207 | 207 |
| 208 <div data-expected-width="120" class="flexbox vertical-rl" style="-webkit-align-
content: space-between"> | 208 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content:
space-between"> |
| 209 <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> | 209 <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> |
| 210 <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> | 210 <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> |
| 211 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> | 211 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> |
| 212 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> | 212 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> |
| 213 </div> | 213 </div> |
| 214 | 214 |
| 215 <div data-expected-width="120" class="flexbox vertical-rl" style="-webkit-align-
content: space-around"> | 215 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content:
space-around"> |
| 216 <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div> | 216 <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div> |
| 217 <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div> | 217 <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div> |
| 218 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> | 218 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> |
| 219 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> | 219 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> |
| 220 </div> | 220 </div> |
| 221 | 221 |
| 222 <div data-expected-width="120" class="flexbox vertical-rl" style="-webkit-align-
content: stretch"> | 222 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content:
stretch"> |
| 223 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> | 223 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> |
| 224 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> | 224 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> |
| 225 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> | 225 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> |
| 226 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> | 226 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> |
| 227 </div> | 227 </div> |
| 228 | 228 |
| 229 <!-- Negative overflow goes out the right. --> | 229 <!-- Negative overflow goes out the right. --> |
| 230 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: flex-end; width: 30px;"> | 230 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
flex-end; width: 30px;"> |
| 231 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> | 231 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> |
| 232 <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> | 232 <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> |
| 233 <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> | 233 <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> |
| 234 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> | 234 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> |
| 235 </div> | 235 </div> |
| 236 | 236 |
| 237 <!-- If we overflow, we should true center. --> | 237 <!-- If we overflow, we should true center. --> |
| 238 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: center; width: 30px;"> | 238 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
center; width: 30px;"> |
| 239 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> | 239 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> |
| 240 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> | 240 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> |
| 241 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> | 241 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> |
| 242 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> | 242 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> |
| 243 </div> | 243 </div> |
| 244 | 244 |
| 245 <!-- If we overflow, we should be the same as flex-start. --> | 245 <!-- If we overflow, we should be the same as flex-start. --> |
| 246 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: space-between; width: 30px;"> | 246 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
space-between; width: 30px;"> |
| 247 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> | 247 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> |
| 248 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> | 248 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> |
| 249 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> | 249 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> |
| 250 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> | 250 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> |
| 251 </div> | 251 </div> |
| 252 | 252 |
| 253 <!-- If we overflow, we should true center. --> | 253 <!-- If we overflow, we should true center. --> |
| 254 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: space-around; width: 30px;"> | 254 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
space-around; width: 30px;"> |
| 255 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> | 255 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> |
| 256 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> | 256 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> |
| 257 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> | 257 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> |
| 258 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> | 258 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> |
| 259 </div> | 259 </div> |
| 260 | 260 |
| 261 <!-- Stretch should only grow, not shrink. --> | 261 <!-- Stretch should only grow, not shrink. --> |
| 262 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: stretch; width: 30px;"> | 262 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
stretch; width: 30px;"> |
| 263 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> | 263 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> |
| 264 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> | 264 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> |
| 265 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> | 265 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> |
| 266 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> | 266 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> |
| 267 </div> | 267 </div> |
| 268 | 268 |
| 269 <!-- 0 lines should not crash. --> | 269 <!-- 0 lines should not crash. --> |
| 270 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: space-between; width: 30px"> | 270 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
space-between; width: 30px"> |
| 271 </div> | 271 </div> |
| 272 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: space-around; width: 30px"> | 272 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
space-around; width: 30px"> |
| 273 </div> | 273 </div> |
| 274 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: stretch; width: 30px"> | 274 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
stretch; width: 30px"> |
| 275 </div> | 275 </div> |
| 276 | 276 |
| 277 <!-- 1 line should not crash. --> | 277 <!-- 1 line should not crash. --> |
| 278 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: space-between; width: 30px"> | 278 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
space-between; width: 30px"> |
| 279 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> | 279 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> |
| 280 </div> | 280 </div> |
| 281 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: space-around; width: 30px"> | 281 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
space-around; width: 30px"> |
| 282 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> | 282 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> |
| 283 </div> | 283 </div> |
| 284 <div data-expected-width="30" class="flexbox vertical-rl" style="-webkit-align-c
ontent: stretch; width: 30px"> | 284 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content:
stretch; width: 30px"> |
| 285 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> | 285 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> |
| 286 </div> | 286 </div> |
| 287 </body> | 287 </body> |
| 288 </html> | 288 </html> |
| OLD | NEW |