| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="resources/flexbox.css" rel="stylesheet"> | 4 <link href="resources/flexbox.css" rel="stylesheet"> |
| 5 <style> | 5 <style> |
| 6 .container { | 6 .container { |
| 7 display: inline-block; | 7 display: inline-block; |
| 8 vertical-align: top; | 8 vertical-align: top; |
| 9 margin-right: 30px; | 9 margin-right: 30px; |
| 10 } | 10 } |
| 11 | 11 |
| 12 .horizontal-tb { | 12 .horizontal-tb { |
| 13 -webkit-writing-mode: horizontal-tb; | 13 -webkit-writing-mode: horizontal-tb; |
| 14 } | 14 } |
| 15 | 15 |
| 16 .horizontal-bt { | |
| 17 -webkit-writing-mode: horizontal-bt; | |
| 18 } | |
| 19 | |
| 20 .vertical-rl { | 16 .vertical-rl { |
| 21 -webkit-writing-mode: vertical-rl; | 17 -webkit-writing-mode: vertical-rl; |
| 22 } | 18 } |
| 23 | 19 |
| 24 .vertical-lr { | 20 .vertical-lr { |
| 25 -webkit-writing-mode: vertical-lr; | 21 -webkit-writing-mode: vertical-lr; |
| 26 } | 22 } |
| 27 | 23 |
| 28 .flexbox { | 24 .flexbox { |
| 29 border: 5px solid pink; | 25 border: 5px solid pink; |
| (...skipping 17 matching lines...) Expand all Loading... |
| 47 p { | 43 p { |
| 48 margin-bottom: 30px; | 44 margin-bottom: 30px; |
| 49 } | 45 } |
| 50 </style> | 46 </style> |
| 51 </head> | 47 </head> |
| 52 <body> | 48 <body> |
| 53 <p>Scrollbars should work in all the flexboxes. Each row should be aligned | 49 <p>Scrollbars should work in all the flexboxes. Each row should be aligned |
| 54 to the same corner.</p> | 50 to the same corner.</p> |
| 55 </body> | 51 </body> |
| 56 <script> | 52 <script> |
| 57 var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-t
b']; | 53 var writingModes = ['vertical-rl', 'vertical-lr', 'horizontal-tb']; |
| 58 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; | 54 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 59 writingModes.forEach(function(writingMode) { | 55 writingModes.forEach(function(writingMode) { |
| 60 flexDirections.forEach(function(flexDirection) { | 56 flexDirections.forEach(function(flexDirection) { |
| 61 var containerClass = 'container ' + writingMode; | 57 var containerClass = 'container ' + writingMode; |
| 62 var flexboxClass = 'flexbox ' + flexDirection; | 58 var flexboxClass = 'flexbox ' + flexDirection; |
| 63 document.body.innerHTML += | 59 document.body.innerHTML += |
| 64 "<div class='" + containerClass + "'>" + | 60 "<div class='" + containerClass + "'>" + |
| 65 "<div class='" + flexboxClass + "'>" + | 61 "<div class='" + flexboxClass + "'>" + |
| 66 "<div><div></div></div>" + | 62 "<div><div></div></div>" + |
| 67 "</div>" + | 63 "</div>" + |
| 68 "</div> "; | 64 "</div> "; |
| 69 }); | 65 }); |
| 70 document.body.innerHTML += "<br>"; | 66 document.body.innerHTML += "<br>"; |
| 71 }); | 67 }); |
| 72 </script> | 68 </script> |
| 73 </html> | 69 </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