| <!DOCTYPE html> |
| <html> |
| <style> |
| .flexbox { |
| width: 100px; |
| height: 100px; |
| display: flex; |
| background-color: #aaa; |
| position: relative; |
| } |
| .flexbox > div { |
| height: 110px; |
| width: 60px; |
| flex: none; |
| } |
| .vertical > div { |
| width: 110px; |
| height: 60px; |
| } |
| .flexbox :nth-child(1) { |
| background-color: blue; |
| } |
| .flexbox :nth-child(2) { |
| background-color: green; |
| } |
| .ltr { |
| direction: ltr; |
| } |
| .rtl { |
| direction: rtl; |
| } |
| .horizontal-tb { |
| writing-mode: horizontal-tb; |
| } |
| .vertical-rl { |
| writing-mode: vertical-rl; |
| } |
| .vertical-lr { |
| writing-mode: vertical-lr; |
| } |
| .row-reverse { |
| flex-flow: row-reverse; |
| } |
| .column { |
| flex-flow: column; |
| } |
| .column-reverse { |
| flex-flow: column-reverse; |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/check-layout-th.js"></script> |
| <body onload="checkLayout('.flexbox')"> |
| <div id=log></div> |
| |
| <div class="flexbox" style="align-items: center; justify-content: center;"> |
| <div data-offset-x="-10" data-offset-y="-5"></div> |
| <div data-offset-x="50" data-offset-y="-5"></div> |
| </div> |
| |
| <div class="flexbox row-reverse" style="align-items: center; justify-content: center;"> |
| <div data-offset-x="50" data-offset-y="-5"></div> |
| <div data-offset-x="-10" data-offset-y="-5"></div> |
| </div> |
| |
| <div class="flexbox column vertical" style="align-items: center; justify-content: center;"> |
| <div data-offset-x="-5" data-offset-y="-10"></div> |
| <div data-offset-x="-5" data-offset-y="50"></div> |
| </div> |
| |
| <div class="flexbox column-reverse vertical" style="align-items: center; justify-content: center;"> |
| <div data-offset-x="-5" data-offset-y="50"></div> |
| <div data-offset-x="-5" data-offset-y="-10"></div> |
| </div> |
| |
| <div class="flexbox" style="align-items: center; justify-content: space-around;"> |
| <div data-offset-x="-10" data-offset-y="-5"></div> |
| <div data-offset-x="50" data-offset-y="-5"></div> |
| </div> |
| |
| <div class="flexbox" style="align-items: center; justify-content: space-evenly;"> |
| <div data-offset-x="-10" data-offset-y="-5"></div> |
| <div data-offset-x="50" data-offset-y="-5"></div> |
| </div> |
| |
| <div class="flexbox" style="align-items: flex-start; justify-content: flex-start;"> |
| <div data-offset-x=0 data-offset-y=0></div> |
| <div data-offset-x=60 data-offset-y=0></div> |
| </div> |
| |
| <div class="flexbox" style="align-items: flex-start; justify-content: space-between;"> |
| <div data-offset-x=0 data-offset-y=0></div> |
| <div data-offset-x=60 data-offset-y=0></div> |
| </div> |
| |
| <script> |
| var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| var directions = ['ltr', 'rtl']; |
| |
| var verticalFirstChildExpected = 'data-offset-x="-5" data-offset-y="-10"'; |
| var verticalLastChildExpected = 'data-offset-x="-5" data-offset-y="50"'; |
| var horizontalFirstChildExpected = 'data-offset-x="-10" data-offset-y="-5"'; |
| var horizontalLastChildExpected = 'data-offset-x="50" data-offset-y="-5"'; |
| |
| 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 isColumn = flexFlow.indexOf('column') != -1; |
| var isHorizontal = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn; |
| if (!isHorizontal) |
| flexboxClassName += ' vertical'; |
| |
| var isReverse; |
| switch (flexFlow) { |
| case 'row': |
| isReverse = direction == 'rtl'; |
| break; |
| case 'row-reverse': |
| isReverse = direction == 'ltr'; |
| break; |
| case 'column': |
| isReverse = writingMode == 'vertical-rl'; |
| break; |
| case 'column-reverse': |
| isReverse = writingMode == 'vertical-lr' || writingMode == 'horizontal-tb'; |
| break; |
| } |
| |
| var firstChildExpected, lastChildExpected; |
| if (isHorizontal) { |
| firstChildExpected = isReverse ? horizontalLastChildExpected : horizontalFirstChildExpected; |
| lastChildExpected = isReverse ? horizontalFirstChildExpected : horizontalLastChildExpected; |
| } else { |
| firstChildExpected = isReverse ? verticalLastChildExpected : verticalFirstChildExpected; |
| lastChildExpected = isReverse ? verticalFirstChildExpected : verticalLastChildExpected; |
| } |
| |
| var container = document.createElement('div'); |
| container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="align-items: center; justify-content: center;">\n' + |
| '<div ' + firstChildExpected + '></div>\n' + |
| '<div ' + lastChildExpected + '></div>\n' + |
| '</div>'; |
| |
| document.body.appendChild(container); |
| }) |
| }) |
| }) |
| </script> |
| |
| </body> |
| </html> |
