| 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: grey; | 6 background-color: grey; |
| 7 float: left; | 7 float: left; |
| 8 } | 8 } |
| 9 .flexbox > div { | 9 .flexbox > div { |
| 10 padding: 2px 13px 8px 17px; | 10 padding: 2px 13px 8px 17px; |
| 11 margin: 2px 13px 8px 17px; | 11 margin: 2px 13px 8px 17px; |
| 12 -webkit-flex: none; | 12 flex: none; |
| 13 flex: none; | 13 flex: none; |
| 14 } | 14 } |
| 15 .title { | 15 .title { |
| 16 margin-top: 1em; | 16 margin-top: 1em; |
| 17 } | 17 } |
| 18 .overflowX { | 18 .overflowX { |
| 19 overflow-x: scroll; | 19 overflow-x: scroll; |
| 20 overflow-y: hidden; | 20 overflow-y: hidden; |
| 21 } | 21 } |
| 22 .overflowY { | 22 .overflowY { |
| 23 overflow-x: hidden; | 23 overflow-x: hidden; |
| 24 overflow-y: scroll; | 24 overflow-y: scroll; |
| 25 } | 25 } |
| 26 .auto { | 26 .auto { |
| 27 overflow: auto; | 27 overflow: auto; |
| 28 } | 28 } |
| 29 .horizontal-tb { | 29 .horizontal-tb { |
| 30 -webkit-writing-mode: horizontal-tb; | 30 -webkit-writing-mode: horizontal-tb; |
| 31 } | 31 } |
| 32 .horizontal-bt { | 32 .horizontal-bt { |
| 33 -webkit-writing-mode: horizontal-bt; | 33 -webkit-writing-mode: horizontal-bt; |
| 34 } | 34 } |
| 35 .vertical-rl { | 35 .vertical-rl { |
| 36 -webkit-writing-mode: vertical-rl; | 36 -webkit-writing-mode: vertical-rl; |
| 37 } | 37 } |
| 38 .vertical-lr { | 38 .vertical-lr { |
| 39 -webkit-writing-mode: vertical-lr; | 39 -webkit-writing-mode: vertical-lr; |
| 40 } | 40 } |
| 41 .row { | 41 .row { |
| 42 -webkit-flex-flow: row; | 42 flex-flow: row; |
| 43 } | 43 } |
| 44 .row-reverse { | 44 .row-reverse { |
| 45 -webkit-flex-flow: row-reverse; | 45 flex-flow: row-reverse; |
| 46 } | 46 } |
| 47 .column { | 47 .column { |
| 48 -webkit-flex-flow: column; | 48 flex-flow: column; |
| 49 } | 49 } |
| 50 .column-reverse { | 50 .column-reverse { |
| 51 -webkit-flex-flow: column-reverse; | 51 flex-flow: column-reverse; |
| 52 } | 52 } |
| 53 </style> | 53 </style> |
| 54 <script src="../../resources/check-layout.js"></script> | 54 <script src="../../resources/check-layout.js"></script> |
| 55 <body onload="checkLayout('.flexbox')"> | 55 <body onload="checkLayout('.flexbox')"> |
| 56 | 56 |
| 57 <script> | 57 <script> |
| 58 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 58 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; |
| 59 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 59 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 60 var scrollDirections = ['overflowY', 'overflowX']; | 60 var scrollDirections = ['overflowY', 'overflowX']; |
| 61 | 61 |
| (...skipping 29 matching lines...) Expand all Loading... |
| 91 '<div style="background-color:red; width: 80px; height: 40px;"><
/div>\n' + | 91 '<div style="background-color:red; width: 80px; height: 40px;"><
/div>\n' + |
| 92 '</div><div style="clear:both;"></div>'; | 92 '</div><div style="clear:both;"></div>'; |
| 93 | 93 |
| 94 document.body.appendChild(container); | 94 document.body.appendChild(container); |
| 95 }) | 95 }) |
| 96 }) | 96 }) |
| 97 }) | 97 }) |
| 98 </script> | 98 </script> |
| 99 </body> | 99 </body> |
| 100 </html> | 100 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
