| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 position: relative; | 5 position: relative; |
| 6 display: flex; | 6 display: flex; |
| 7 background-color: grey; | 7 background-color: grey; |
| 8 width: 600px; | 8 width: 600px; |
| 9 height: 20px; | 9 height: 20px; |
| 10 } | 10 } |
| 11 .title { | 11 .title { |
| 12 margin-top: 1em; | 12 margin-top: 1em; |
| 13 } | 13 } |
| 14 .ltr { | 14 .ltr { |
| 15 direction: ltr; | 15 direction: ltr; |
| 16 } | 16 } |
| 17 .rtl { | 17 .rtl { |
| 18 direction: rtl; | 18 direction: rtl; |
| 19 } | 19 } |
| 20 .horizontal-tb { | 20 .horizontal-tb { |
| 21 -webkit-writing-mode: horizontal-tb; | 21 -webkit-writing-mode: horizontal-tb; |
| 22 } | 22 } |
| 23 .horizontal-bt { | |
| 24 -webkit-writing-mode: horizontal-bt; | |
| 25 } | |
| 26 .column { | 23 .column { |
| 27 flex-flow: column; | 24 flex-flow: column; |
| 28 } | 25 } |
| 29 .column-reverse { | 26 .column-reverse { |
| 30 flex-flow: column-reverse; | 27 flex-flow: column-reverse; |
| 31 } | 28 } |
| 32 .wrap { | 29 .wrap { |
| 33 flex-wrap: wrap; | 30 flex-wrap: wrap; |
| 34 } | 31 } |
| 35 .wrap-reverse { | 32 .wrap-reverse { |
| (...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 137 'flex-start': [0, 100], | 134 'flex-start': [0, 100], |
| 138 'flex-end': [400, 500], | 135 'flex-end': [400, 500], |
| 139 'center': [200, 300], | 136 'center': [200, 300], |
| 140 'space-between': [0, 500], | 137 'space-between': [0, 500], |
| 141 'space-around': [100, 400], | 138 'space-around': [100, 400], |
| 142 'stretch': [0, 300], | 139 'stretch': [0, 300], |
| 143 }, | 140 }, |
| 144 }, | 141 }, |
| 145 }, | 142 }, |
| 146 }, | 143 }, |
| 147 'horizontal-bt': { | |
| 148 // Same as horizontal-tb. | |
| 149 'column': { | |
| 150 'ltr': { | |
| 151 'wrap': { | |
| 152 'flex-start': [0, 100], | |
| 153 'flex-end': [400, 500], | |
| 154 'center': [200, 300], | |
| 155 'space-between': [0, 500], | |
| 156 'space-around': [100, 400], | |
| 157 'stretch': [0, 300], | |
| 158 }, | |
| 159 'wrap-reverse': { | |
| 160 'flex-start': [500, 400], | |
| 161 'flex-end': [100, 0], | |
| 162 'center': [300, 200], | |
| 163 'space-between': [500, 0], | |
| 164 'space-around': [400, 100], | |
| 165 'stretch': [300, 0], | |
| 166 }, | |
| 167 }, | |
| 168 'rtl': { | |
| 169 'wrap': { | |
| 170 'flex-start': [500, 400], | |
| 171 'flex-end': [100, 0], | |
| 172 'center': [300, 200], | |
| 173 'space-between': [500, 0], | |
| 174 'space-around': [400, 100], | |
| 175 'stretch': [300, 0], | |
| 176 }, | |
| 177 'wrap-reverse': { | |
| 178 'flex-start': [0, 100], | |
| 179 'flex-end': [400, 500], | |
| 180 'center': [200, 300], | |
| 181 'space-between': [0, 500], | |
| 182 'space-around': [100, 400], | |
| 183 'stretch': [0, 300], | |
| 184 }, | |
| 185 }, | |
| 186 }, | |
| 187 'column-reverse': { | |
| 188 'ltr': { | |
| 189 'wrap': { | |
| 190 'flex-start': [0, 100], | |
| 191 'flex-end': [400, 500], | |
| 192 'center': [200, 300], | |
| 193 'space-between': [0, 500], | |
| 194 'space-around': [100, 400], | |
| 195 'stretch': [0, 300], | |
| 196 }, | |
| 197 'wrap-reverse': { | |
| 198 'flex-start': [500, 400], | |
| 199 'flex-end': [100, 0], | |
| 200 'center': [300, 200], | |
| 201 'space-between': [500, 0], | |
| 202 'space-around': [400, 100], | |
| 203 'stretch': [300, 0], | |
| 204 }, | |
| 205 }, | |
| 206 'rtl': { | |
| 207 'wrap': { | |
| 208 'flex-start': [500, 400], | |
| 209 'flex-end': [100, 0], | |
| 210 'center': [300, 200], | |
| 211 'space-between': [500, 0], | |
| 212 'space-around': [400, 100], | |
| 213 'stretch': [300, 0], | |
| 214 }, | |
| 215 'wrap-reverse': { | |
| 216 'flex-start': [0, 100], | |
| 217 'flex-end': [400, 500], | |
| 218 'center': [200, 300], | |
| 219 'space-between': [0, 500], | |
| 220 'space-around': [100, 400], | |
| 221 'stretch': [0, 300], | |
| 222 }, | |
| 223 }, | |
| 224 }, | |
| 225 }, | |
| 226 }; | 144 }; |
| 227 | 145 |
| 228 function mainAxisDirection(writingMode, flexDirection) | 146 function mainAxisDirection(writingMode, flexDirection) |
| 229 { | 147 { |
| 230 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) | 148 if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row')
!= -1) |
| 231 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) | 149 || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('colu
mn') != -1)) |
| 232 return 'width'; | 150 return 'width'; |
| 233 return 'height'; | 151 return 'height'; |
| 234 } | 152 } |
| 235 | 153 |
| 236 function addChild(flexbox, preferredSize, alignContent, expected_x_offset) | 154 function addChild(flexbox, preferredSize, alignContent, expected_x_offset) |
| 237 { | 155 { |
| 238 var child = document.createElement('div'); | 156 var child = document.createElement('div'); |
| 239 child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;' | 157 child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;' |
| 240 + 'min-width: 100px'); | 158 + 'min-width: 100px'); |
| 241 | 159 |
| 242 child.setAttribute("data-expected-width", alignContent == "stretch" ? "300"
: "100"); | 160 child.setAttribute("data-expected-width", alignContent == "stretch" ? "300"
: "100"); |
| 243 child.setAttribute("data-expected-height", "20"); | 161 child.setAttribute("data-expected-height", "20"); |
| 244 child.setAttribute("data-offset-y", "0"); | 162 child.setAttribute("data-offset-y", "0"); |
| 245 child.setAttribute("data-offset-x", expected_x_offset); | 163 child.setAttribute("data-offset-x", expected_x_offset); |
| 246 | 164 |
| 247 flexbox.appendChild(child); | 165 flexbox.appendChild(child); |
| 248 } | 166 } |
| 249 | 167 |
| 250 var writingModes = ['horizontal-tb', 'horizontal-bt']; | 168 var writingModes = ['horizontal-tb']; |
| 251 var flexDirections = ['column', 'column-reverse']; | 169 var flexDirections = ['column', 'column-reverse']; |
| 252 var directions = ['ltr', 'rtl']; | 170 var directions = ['ltr', 'rtl']; |
| 253 var wraps = ['wrap', 'wrap-reverse']; | 171 var wraps = ['wrap', 'wrap-reverse']; |
| 254 var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space
-around', 'stretch']; | 172 var alignContents = ['flex-start', 'flex-end', 'center', 'space-between', 'space
-around', 'stretch']; |
| 255 | 173 |
| 256 writingModes.forEach(function(writingMode) { | 174 writingModes.forEach(function(writingMode) { |
| 257 flexDirections.forEach(function(flexDirection) { | 175 flexDirections.forEach(function(flexDirection) { |
| 258 directions.forEach(function(direction) { | 176 directions.forEach(function(direction) { |
| 259 wraps.forEach(function(wrap) { | 177 wraps.forEach(function(wrap) { |
| 260 alignContents.forEach(function(alignContent) { | 178 alignContents.forEach(function(alignContent) { |
| (...skipping 17 matching lines...) Expand all Loading... |
| 278 | 196 |
| 279 document.body.appendChild(flexbox); | 197 document.body.appendChild(flexbox); |
| 280 }) | 198 }) |
| 281 }) | 199 }) |
| 282 }) | 200 }) |
| 283 }) | 201 }) |
| 284 }) | 202 }) |
| 285 </script> | 203 </script> |
| 286 </body> | 204 </body> |
| 287 </html> | 205 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1419813004:
Remove the "horizontal-bt" value from -webkit-writing-mode (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master