| <!DOCTYPE html> |
| <html> |
| <style> |
| .container { |
| position: relative; |
| background-color: pink; |
| outline: 1px solid black; |
| display: inline-block; |
| } |
| .flexbox { |
| display: -webkit-flex; |
| background-color: grey; |
| width: 100px; |
| height: 100px; |
| } |
| .flexbox > * { |
| -webkit-flex: none; |
| } |
| .title { |
| margin-top: 1em; |
| } |
| .ltr { |
| direction: ltr; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| .horizontal-tb { |
| -webkit-writing-mode: horizontal-tb; |
| } |
| .horizontal-bt { |
| -webkit-writing-mode: horizontal-bt; |
| } |
| .vertical-rl { |
| -webkit-writing-mode: vertical-rl; |
| } |
| .vertical-lr { |
| -webkit-writing-mode: vertical-lr; |
| } |
| .row { |
| -webkit-flex-flow: row; |
| } |
| .row-reverse { |
| -webkit-flex-flow: row-reverse; |
| } |
| .column { |
| -webkit-flex-flow: column; |
| } |
| .column-reverse { |
| -webkit-flex-flow: column-reverse; |
| } |
| .flexbox > :nth-child(1) { |
| background-color: blue; |
| } |
| .flexbox > :nth-child(2) { |
| background-color: green; |
| } |
| .flexbox > :nth-child(3) { |
| background-color: red; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <body onload="checkLayout('.flexbox')"> |
| |
| <script> |
| function asString(position) |
| { |
| return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"'; |
| } |
| |
| var expectations = { |
| 'horizontal-tb': { |
| column: { |
| rtl: [[80, 0], [80, 20]], |
| ltr: [[0, 0], [0, 20]] |
| }, |
| 'column-reverse': { |
| rtl: [[80, 80], [80, 60]], |
| ltr: [[0, 80], [0, 60]] |
| }, |
| row: { |
| rtl: [[80, 0], [60, 0]], |
| ltr: [[0, 0], [20, 0]] |
| }, |
| 'row-reverse': { |
| rtl: [[0, 0], [20, 0]], |
| ltr: [[80, 0], [60, 0]] |
| } |
| }, |
| 'horizontal-bt': { |
| column: { |
| rtl: [[80, 80], [80, 60]], |
| ltr: [[0, 80], [0, 60]] |
| }, |
| 'column-reverse': { |
| rtl: [[80, 0], [80, 20]], |
| ltr: [[0, 0], [0, 20]] |
| }, |
| row: { |
| rtl: [[80, 80], [60, 80]], |
| ltr: [[0, 80], [20, 80]] |
| }, |
| 'row-reverse': { |
| rtl: [[0, 80], [20, 80]], |
| ltr: [[80, 80], [60, 80]] |
| } |
| }, |
| 'vertical-lr': { |
| column: { |
| rtl: [[0, 80], [20, 80]], |
| ltr: [[0, 0], [20, 0]] |
| }, |
| 'column-reverse': { |
| rtl: [[80, 80], [60, 80]], |
| ltr: [[80, 0], [60, 0]] |
| }, |
| row: { |
| rtl: [[0, 80], [0, 60]], |
| ltr: [[0, 0], [0, 20]] |
| }, |
| 'row-reverse': { |
| rtl: [[0, 0], [0, 20]], |
| ltr: [[0, 80], [0, 60]] |
| } |
| }, |
| 'vertical-rl': { |
| column: { |
| rtl: [[80, 80], [60, 80]], |
| ltr: [[80, 0], [60, 0]] |
| }, |
| 'column-reverse': { |
| rtl: [[0, 80], [20, 80]], |
| ltr: [[0, 0], [20, 0]] |
| }, |
| row: { |
| rtl: [[80, 80], [80, 60]], |
| ltr: [[80, 0], [80, 20]] |
| }, |
| 'row-reverse': { |
| rtl: [[80, 0], [80, 20]], |
| ltr: [[80, 80], [80, 60]] |
| } |
| } |
| }; |
| |
| var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl']; |
| var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| var directions = ['rtl', 'ltr']; |
| |
| function physicalWritingMode(writingMode, flexFlow, direction) |
| { |
| if (flexFlow.indexOf('column') == -1) |
| return writingMode; |
| |
| var isReverse = flexFlow.indexOf('reverse') != -1; |
| switch (writingMode) { |
| case 'horizontal-tb': |
| case 'horizontal-bt': |
| return isReverse ? 'vertical-rl' : 'vertical-lr'; |
| case 'vertical-lr': |
| case 'vertical-rl': |
| return isReverse ? 'horizontal-bt' : 'horizontal-tb'; |
| } |
| } |
| |
| writingModes.forEach(function(writingMode) { |
| flexFlows.forEach(function(flexFlow) { |
| directions.forEach(function(direction) { |
| var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow; |
| var title = document.createElement('div'); |
| title.className = 'title'; |
| title.innerHTML = flexboxClassName; |
| document.body.appendChild(title); |
| |
| |
| var flexItemExpectations = expectations[writingMode][flexFlow][direction]; |
| |
| var container = document.createElement('div'); |
| container.className = 'container'; |
| container.innerHTML = '<div class="flexbox ' + flexboxClassName + '">\n' + |
| '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[0]) + '></div>\n' + |
| '<div style="width: 20px; height: 20px;" ' + asString(flexItemExpectations[1]) + '></div>\n' + |
| '</div>'; |
| |
| document.body.appendChild(container); |
| }) |
| }) |
| }) |
| </script> |
| </body> |
| </html> |
