| <!DOCTYPE html> |
| <html> |
| <style> |
| .container { |
| position: relative; |
| background-color: pink; |
| outline: 1px solid red; |
| display: inline-block; |
| } |
| .flexbox { |
| display: flex; |
| background-color: grey; |
| width: 100px; |
| height: 100px; |
| } |
| .title { |
| margin-top: 1em; |
| } |
| .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 { |
| flex-flow: row; |
| } |
| .row-reverse { |
| flex-flow: row-reverse; |
| } |
| .column { |
| flex-flow: column; |
| } |
| .column-reverse { |
| flex-flow: column-reverse; |
| } |
| .physical { |
| padding: 10px 20px 30px 40px; |
| } |
| .physical > div { |
| padding: 13px 2px 17px 8px; |
| } |
| .logical { |
| padding-block-start: 10px; |
| padding-block-end: 30px; |
| padding-inline-start: 40px; |
| padding-inline-end: 20px; |
| } |
| .logical > div { |
| padding-block-start: 13px; |
| padding-block-end: 17px; |
| padding-inline-start: 8px; |
| padding-inline-end: 2px; |
| } |
| .flexbox > :nth-child(1) { |
| background-color: blue; |
| } |
| .flexbox > div > div { |
| background-color: green; |
| } |
| </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> |
| function positionAsString(position) |
| { |
| return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"'; |
| } |
| |
| function asString(expectations) |
| { |
| return 'data-expected-width="' + expectations[0] + '" data-expected-height="' + expectations[1] + '" ' + positionAsString(expectations.slice(2, 4)); |
| } |
| |
| var horizontalContainerSize = [160, 140]; |
| var verticalContainerSize = [140, 160]; |
| |
| var physicalExpectations = { |
| 'horizontal-tb': { |
| rtl: { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [30, 100, 110, 10], |
| flexitemrow: [100, 50, 40, 10], |
| childcolumn: [20, 70, 118, 23], |
| childrow: [90, 20, 48, 23] |
| }, |
| ltr : { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [30, 100, 40, 10], |
| flexitemrow: [100, 50, 40, 10], |
| childcolumn: [20, 70, 48, 23], |
| childrow: [90, 20, 48, 23] |
| } |
| }, |
| 'vertical-lr': { |
| rtl: { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [100, 50, 40, 60], |
| flexitemrow: [30, 100, 40, 10], |
| childcolumn: [90, 20, 48, 73], |
| childrow: [20, 70, 48, 23] |
| }, |
| ltr : { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [100, 50, 40, 10], |
| flexitemrow: [30, 100, 40, 10], |
| childcolumn: [90, 20, 48, 23], |
| childrow: [20, 70, 48, 23] |
| } |
| }, |
| 'vertical-rl': { |
| rtl: { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [100, 50, 40, 60], |
| flexitemrow: [30, 100, 110, 10], |
| childcolumn: [90, 20, 48, 73], |
| childrow: [20, 70, 118, 23] |
| }, |
| ltr : { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [100, 50, 40, 10], |
| flexitemrow: [30, 100, 110, 10], |
| childcolumn: [90, 20, 48, 23], |
| childrow: [20, 70, 118, 23] |
| } |
| } |
| } |
| |
| var logicalExpectations = { |
| 'horizontal-tb': { |
| rtl: { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [30, 100, 90, 10], |
| flexitemrow: [100, 50, 20, 10], |
| childcolumn: [20, 70, 92, 23], |
| childrow: [90, 20, 22, 23] |
| }, |
| ltr : { |
| containersize: horizontalContainerSize, |
| flexitemcolumn: [30, 100, 40, 10], |
| flexitemrow: [100, 50, 40, 10], |
| childcolumn: [20, 70, 48, 23], |
| childrow: [90, 20, 48, 23] |
| } |
| }, |
| 'vertical-lr': { |
| rtl: { |
| containersize: verticalContainerSize, |
| flexitemcolumn: [100, 30, 10, 90], |
| flexitemrow: [50, 100, 10, 20], |
| childcolumn: [70, 20, 23, 92], |
| childrow: [20, 90, 23, 22] |
| }, |
| ltr : { |
| containersize: verticalContainerSize, |
| flexitemcolumn: [100, 30, 10, 40], |
| flexitemrow: [50, 100, 10, 40], |
| childcolumn: [70, 20, 23, 48], |
| childrow: [20, 90, 23, 48] |
| } |
| }, |
| 'vertical-rl': { |
| rtl: { |
| containersize: verticalContainerSize, |
| flexitemcolumn: [100, 30, 30, 90], |
| flexitemrow: [50, 100, 80, 20], |
| childcolumn: [70, 20, 47, 92], |
| childrow: [20, 90, 97, 22] |
| }, |
| ltr : { |
| containersize: verticalContainerSize, |
| flexitemcolumn: [100, 30, 30, 40], |
| flexitemrow: [50, 100, 80, 40], |
| childcolumn: [70, 20, 47, 48], |
| childrow: [20, 90, 97, 48] |
| } |
| } |
| } |
| |
| var writingModes = ['horizontal-tb', 'vertical-lr', 'vertical-rl']; |
| var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse']; |
| var directions = ['rtl', 'ltr']; |
| var marginTypes = ['physical', 'logical']; |
| |
| writingModes.forEach(function(writingMode) { |
| flexFlows.forEach(function(flexFlow) { |
| directions.forEach(function(direction) { |
| marginTypes.forEach(function(marginType) { |
| var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow + ' ' + marginType; |
| var title = document.createElement('div'); |
| title.className = 'title'; |
| title.innerHTML = flexboxClassName; |
| document.body.appendChild(title); |
| |
| var expectations = (marginType == 'physical') ? physicalExpectations : logicalExpectations; |
| expectations = expectations[writingMode][direction]; |
| |
| var container = document.createElement('div'); |
| container.className = 'container'; |
| container.setAttribute('data-expected-width', expectations.containersize[0]); |
| container.setAttribute('data-expected-height', expectations.containersize[1]); |
| |
| container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '">\n' + |
| '<div style="flex: 1 auto; width: 20px; height: 20px;" ' + asString(expectations['flexitem' + flexFlow.replace('-reverse', '')]) + '>\n' + |
| '<div style="width:100%; height:100%" ' + asString(expectations['child' + flexFlow.replace('-reverse', '')]) + '></div>' + |
| '</div>\n' + |
| '</div>\n'; |
| |
| document.body.appendChild(container); |
| }) |
| }) |
| }) |
| }) |
| </script> |
| </body> |
| </html> |
