| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 display: 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; |
| (...skipping 11 matching lines...) Expand all Loading... |
| 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 { | |
| 33 -webkit-writing-mode: horizontal-bt; | |
| 34 } | |
| 35 .vertical-rl { | 32 .vertical-rl { |
| 36 -webkit-writing-mode: vertical-rl; | 33 -webkit-writing-mode: vertical-rl; |
| 37 } | 34 } |
| 38 .vertical-lr { | 35 .vertical-lr { |
| 39 -webkit-writing-mode: vertical-lr; | 36 -webkit-writing-mode: vertical-lr; |
| 40 } | 37 } |
| 41 .row { | 38 .row { |
| 42 flex-flow: row; | 39 flex-flow: row; |
| 43 } | 40 } |
| 44 .row-reverse { | 41 .row-reverse { |
| 45 flex-flow: row-reverse; | 42 flex-flow: row-reverse; |
| 46 } | 43 } |
| 47 .column { | 44 .column { |
| 48 flex-flow: column; | 45 flex-flow: column; |
| 49 } | 46 } |
| 50 .column-reverse { | 47 .column-reverse { |
| 51 flex-flow: column-reverse; | 48 flex-flow: column-reverse; |
| 52 } | 49 } |
| 53 </style> | 50 </style> |
| 54 <script src="../../resources/check-layout.js"></script> | 51 <script src="../../resources/check-layout.js"></script> |
| 55 <body onload="checkLayout('.flexbox')"> | 52 <body onload="checkLayout('.flexbox')"> |
| 56 | 53 |
| 57 <script> | 54 <script> |
| 58 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 55 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| 59 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 56 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 60 var scrollDirections = ['overflowY', 'overflowX']; | 57 var scrollDirections = ['overflowY', 'overflowX']; |
| 61 | 58 |
| 62 var dummyNode = document.createElement('div'); | 59 var dummyNode = document.createElement('div'); |
| 63 dummyNode.style.overflow = 'scroll'; | 60 dummyNode.style.overflow = 'scroll'; |
| 64 document.body.appendChild(dummyNode); | 61 document.body.appendChild(dummyNode); |
| 65 var scrollbarWidth = dummyNode.offsetWidth - dummyNode.clientWidth; | 62 var scrollbarWidth = dummyNode.offsetWidth - dummyNode.clientWidth; |
| 66 | 63 |
| 67 writingModes.forEach(function(writingMode) { | 64 writingModes.forEach(function(writingMode) { |
| 68 flexFlows.forEach(function(flexFlow) { | 65 flexFlows.forEach(function(flexFlow) { |
| (...skipping 22 matching lines...) Expand all Loading... |
| 91 '<div style="background-color:red; width: 80px; height: 40px;"><
/div>\n' + | 88 '<div style="background-color:red; width: 80px; height: 40px;"><
/div>\n' + |
| 92 '</div><div style="clear:both;"></div>'; | 89 '</div><div style="clear:both;"></div>'; |
| 93 | 90 |
| 94 document.body.appendChild(container); | 91 document.body.appendChild(container); |
| 95 }) | 92 }) |
| 96 }) | 93 }) |
| 97 }) | 94 }) |
| 98 </script> | 95 </script> |
| 99 </body> | 96 </body> |
| 100 </html> | 97 </html> |
| OLD | NEW |