| <!DOCTYPE html> |
| <html> |
| <style> |
| .flexbox { |
| display: flex; |
| background-color: grey; |
| float: left; |
| } |
| .flexbox > div { |
| padding: 2px 13px 8px 17px; |
| margin: 2px 13px 8px 17px; |
| flex: none; |
| flex: none; |
| } |
| .title { |
| margin-top: 1em; |
| } |
| .overflowX { |
| overflow-x: scroll; |
| overflow-y: hidden; |
| } |
| .overflowY { |
| overflow-x: hidden; |
| overflow-y: scroll; |
| } |
| .auto { |
| overflow: auto; |
| } |
| .horizontal-tb { |
| writing-mode: horizontal-tb; |
| } |
| .vertical-rl { |
| writing-mode: vertical-rl; |
| } |
| .vertical-lr { |
| writing-mode: vertical-lr; |
| } |
| .row { |
| flex-flow: row; |
| } |
| .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> |
| |
| <script> |
| var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| var scrollDirections = ['overflowY', 'overflowX']; |
| |
| var dummyNode = document.createElement('div'); |
| dummyNode.style.overflow = 'scroll'; |
| document.body.appendChild(dummyNode); |
| var scrollbarWidth = dummyNode.offsetWidth - dummyNode.clientWidth; |
| |
| writingModes.forEach(function(writingMode) { |
| flexFlows.forEach(function(flexFlow) { |
| scrollDirections.forEach(function(scrollDirection) { |
| var flexboxClassName = writingMode + ' ' + scrollDirection + ' ' + 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; |
| |
| var expectedWidth = isHorizontal ? 220 : 140; |
| var expectedHeight = isHorizontal ? 60 : 110; |
| if (scrollDirection == 'overflowY') |
| expectedWidth += scrollbarWidth; |
| if (scrollDirection == 'overflowX') |
| expectedHeight += scrollbarWidth; |
| |
| |
| var container = document.createElement('div'); |
| container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" data-expected-width="' + expectedWidth + '" data-expected-height="' + expectedHeight + '">\n' + |
| '<div style="background-color:pink; width: 20px; height: 30px;"></div>\n' + |
| '<div style="background-color:red; width: 80px; height: 40px;"></div>\n' + |
| '</div><div style="clear:both;"></div>'; |
| |
| document.body.appendChild(container); |
| }) |
| }) |
| }) |
| </script> |
| </body> |
| </html> |
