| <!DOCTYPE html> |
| <html> |
| <link href="resources/flexbox.css" rel="stylesheet"> |
| <style> |
| .flexbox { |
| margin: 120px; |
| width: 100px; |
| height: 100px; |
| background-color: #aaa; |
| position: relative; |
| outline: 2px solid red; |
| } |
| .title { |
| margin-bottom: 10px; |
| } |
| .flexbox > div { |
| height: 110px; |
| width: 110px; |
| } |
| .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; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| </script> |
| <script src="../../resources/js-test.js"></script> |
| <body> |
| <script> |
| var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| var directions = ['ltr', 'rtl']; |
| |
| 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 isHorizontalFlow = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn; |
| |
| var container = document.createElement('div'); |
| container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="align-items: baseline;">' + |
| '<div><div style="display:inline-block;"></div></div>' + |
| '<div style="margin-top:20px;"><div style="display:inline-block;"></div></div>' + |
| '</div>'; |
| |
| container.firstChild.isHorizontal = writingMode.indexOf('horizontal') != -1; |
| container.firstChild.isHorizontalFlow = isHorizontalFlow; |
| container.firstChild.isColumn = isColumn; |
| container.firstChild.isLTR = direction == 'ltr'; |
| document.body.appendChild(container); |
| }) |
| }) |
| }) |
| |
| // Sanity check that the align-items:baseline flex items align to the same cross-axis position. |
| var flexboxen = document.getElementsByClassName('flexbox'); |
| for (var i = 0, len = flexboxen.length; i < len; i++) { |
| var flexbox = flexboxen[i]; |
| firstChild = flexbox.firstChild; |
| lastChild = flexbox.lastChild; |
| if (!flexbox.isHorizontal && flexbox.isColumn && flexbox.isLTR) { |
| shouldBe('firstChild.offsetTop', "0"); |
| shouldBe('lastChild.offsetTop', "20"); |
| } else if (flexbox.isHorizontalFlow) |
| shouldBe('firstChild.offsetTop', 'lastChild.offsetTop'); |
| else |
| shouldBe('firstChild.offsetLeft', 'lastChild.offsetLeft'); |
| } |
| </script> |
| </body> |
| </html> |
