| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .container { | 4 .container { |
| 5 position: relative; | 5 position: relative; |
| 6 background-color: pink; | 6 background-color: pink; |
| 7 outline: 1px solid black; | 7 outline: 1px solid black; |
| 8 display: inline-block; | 8 display: inline-block; |
| 9 } | 9 } |
| 10 .flexbox { | 10 .flexbox { |
| (...skipping 10 matching lines...) Expand all Loading... |
| 21 } | 21 } |
| 22 .ltr { | 22 .ltr { |
| 23 direction: ltr; | 23 direction: ltr; |
| 24 } | 24 } |
| 25 .rtl { | 25 .rtl { |
| 26 direction: rtl; | 26 direction: rtl; |
| 27 } | 27 } |
| 28 .horizontal-tb { | 28 .horizontal-tb { |
| 29 -webkit-writing-mode: horizontal-tb; | 29 -webkit-writing-mode: horizontal-tb; |
| 30 } | 30 } |
| 31 .horizontal-bt { | |
| 32 -webkit-writing-mode: horizontal-bt; | |
| 33 } | |
| 34 .vertical-rl { | 31 .vertical-rl { |
| 35 -webkit-writing-mode: vertical-rl; | 32 -webkit-writing-mode: vertical-rl; |
| 36 } | 33 } |
| 37 .vertical-lr { | 34 .vertical-lr { |
| 38 -webkit-writing-mode: vertical-lr; | 35 -webkit-writing-mode: vertical-lr; |
| 39 } | 36 } |
| 40 .row { | 37 .row { |
| 41 flex-flow: row; | 38 flex-flow: row; |
| 42 } | 39 } |
| 43 .row-reverse { | 40 .row-reverse { |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 80 }, | 77 }, |
| 81 row: { | 78 row: { |
| 82 rtl: [[80, 0], [60, 0]], | 79 rtl: [[80, 0], [60, 0]], |
| 83 ltr: [[0, 0], [20, 0]] | 80 ltr: [[0, 0], [20, 0]] |
| 84 }, | 81 }, |
| 85 'row-reverse': { | 82 'row-reverse': { |
| 86 rtl: [[0, 0], [20, 0]], | 83 rtl: [[0, 0], [20, 0]], |
| 87 ltr: [[80, 0], [60, 0]] | 84 ltr: [[80, 0], [60, 0]] |
| 88 } | 85 } |
| 89 }, | 86 }, |
| 90 'horizontal-bt': { | |
| 91 column: { | |
| 92 rtl: [[80, 80], [80, 60]], | |
| 93 ltr: [[0, 80], [0, 60]] | |
| 94 }, | |
| 95 'column-reverse': { | |
| 96 rtl: [[80, 0], [80, 20]], | |
| 97 ltr: [[0, 0], [0, 20]] | |
| 98 }, | |
| 99 row: { | |
| 100 rtl: [[80, 80], [60, 80]], | |
| 101 ltr: [[0, 80], [20, 80]] | |
| 102 }, | |
| 103 'row-reverse': { | |
| 104 rtl: [[0, 80], [20, 80]], | |
| 105 ltr: [[80, 80], [60, 80]] | |
| 106 } | |
| 107 }, | |
| 108 'vertical-lr': { | 87 'vertical-lr': { |
| 109 column: { | 88 column: { |
| 110 rtl: [[0, 80], [20, 80]], | 89 rtl: [[0, 80], [20, 80]], |
| 111 ltr: [[0, 0], [20, 0]] | 90 ltr: [[0, 0], [20, 0]] |
| 112 }, | 91 }, |
| 113 'column-reverse': { | 92 'column-reverse': { |
| 114 rtl: [[80, 80], [60, 80]], | 93 rtl: [[80, 80], [60, 80]], |
| 115 ltr: [[80, 0], [60, 0]] | 94 ltr: [[80, 0], [60, 0]] |
| 116 }, | 95 }, |
| 117 row: { | 96 row: { |
| (...skipping 18 matching lines...) Expand all Loading... |
| 136 rtl: [[80, 80], [80, 60]], | 115 rtl: [[80, 80], [80, 60]], |
| 137 ltr: [[80, 0], [80, 20]] | 116 ltr: [[80, 0], [80, 20]] |
| 138 }, | 117 }, |
| 139 'row-reverse': { | 118 'row-reverse': { |
| 140 rtl: [[80, 0], [80, 20]], | 119 rtl: [[80, 0], [80, 20]], |
| 141 ltr: [[80, 80], [80, 60]] | 120 ltr: [[80, 80], [80, 60]] |
| 142 } | 121 } |
| 143 } | 122 } |
| 144 }; | 123 }; |
| 145 | 124 |
| 146 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-r
l']; | 125 var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| 147 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; | 126 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| 148 var directions = ['rtl', 'ltr']; | 127 var directions = ['rtl', 'ltr']; |
| 149 | 128 |
| 150 function physicalWritingMode(writingMode, flexFlow, direction) | |
| 151 { | |
| 152 if (flexFlow.indexOf('column') == -1) | |
| 153 return writingMode; | |
| 154 | |
| 155 var isReverse = flexFlow.indexOf('reverse') != -1; | |
| 156 switch (writingMode) { | |
| 157 case 'horizontal-tb': | |
| 158 case 'horizontal-bt': | |
| 159 return isReverse ? 'vertical-rl' : 'vertical-lr'; | |
| 160 case 'vertical-lr': | |
| 161 case 'vertical-rl': | |
| 162 return isReverse ? 'horizontal-bt' : 'horizontal-tb'; | |
| 163 } | |
| 164 } | |
| 165 | |
| 166 writingModes.forEach(function(writingMode) { | 129 writingModes.forEach(function(writingMode) { |
| 167 flexFlows.forEach(function(flexFlow) { | 130 flexFlows.forEach(function(flexFlow) { |
| 168 directions.forEach(function(direction) { | 131 directions.forEach(function(direction) { |
| 169 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo
w; | 132 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlo
w; |
| 170 var title = document.createElement('div'); | 133 var title = document.createElement('div'); |
| 171 title.className = 'title'; | 134 title.className = 'title'; |
| 172 title.innerHTML = flexboxClassName; | 135 title.innerHTML = flexboxClassName; |
| 173 document.body.appendChild(title); | 136 document.body.appendChild(title); |
| 174 | 137 |
| 175 | 138 |
| 176 var flexItemExpectations = expectations[writingMode][flexFlow][direc
tion]; | 139 var flexItemExpectations = expectations[writingMode][flexFlow][direc
tion]; |
| 177 | 140 |
| 178 var container = document.createElement('div'); | 141 var container = document.createElement('div'); |
| 179 container.className = 'container'; | 142 container.className = 'container'; |
| 180 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '"
>\n' + | 143 container.innerHTML = '<div class="flexbox ' + flexboxClassName + '"
>\n' + |
| 181 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx
pectations[0]) + '></div>\n' + | 144 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx
pectations[0]) + '></div>\n' + |
| 182 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx
pectations[1]) + '></div>\n' + | 145 '<div style="width: 20px; height: 20px;" ' + asString(flexItemEx
pectations[1]) + '></div>\n' + |
| 183 '</div>'; | 146 '</div>'; |
| 184 | 147 |
| 185 document.body.appendChild(container); | 148 document.body.appendChild(container); |
| 186 }) | 149 }) |
| 187 }) | 150 }) |
| 188 }) | 151 }) |
| 189 </script> | 152 </script> |
| 190 </body> | 153 </body> |
| 191 </html> | 154 </html> |
| OLD | NEW |