6 background-color: pink;
7 outline: 1px solid red;
11 display: -webkit-flexbox;
12 background-color: grey;
26 -webkit-writing-mode: horizontal-tb;
29 -webkit-writing-mode: horizontal-bt;
32 -webkit-writing-mode: vertical-rl;
35 -webkit-writing-mode: vertical-lr;
38 -webkit-flex-flow: row;
41 -webkit-flex-flow: row-reverse;
44 -webkit-flex-flow: column;
47 -webkit-flex-flow: column-reverse;
49 .flexbox > :nth-child(1) {
50 background-color: blue;
54 if (window.layoutTestController)
55 layoutTestController.dumpAsText();
57 <script src="resources/flexbox.js"></script>
58 <body onload="checkFlexBoxen()">
61 function positionAsString(position)
63 return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
66 function sizeAsString(size)
68 return 'data-expected-width="' + size[0] + '" data-expected-height="' + size[1] + '"';
71 var containerSize = [100, 100];
92 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
93 // FIXME: Test row-reverse and column-reverse.
94 var flexFlows = ['row', 'column'];
95 var directions = ['rtl', 'ltr'];
97 writingModes.forEach(function(writingMode) {
98 flexFlows.forEach(function(flexFlow) {
99 directions.forEach(function(direction) {
100 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
101 var title = document.createElement('div');
102 title.className = 'title';
103 title.innerHTML = flexboxClassName;
104 document.body.appendChild(title);
106 var container = document.createElement('div');
107 container.className = 'container';
108 container.setAttribute('data-expected-width', containerSize[0]);
109 container.setAttribute('data-expected-height', containerSize[1]);
111 container.innerHTML = '\n<div class="flexbox ' + flexboxClassName + '" ' + sizeAsString(containerSize) + '>\n' +
112 '<div style="width: -webkit-flex(1 105px); height: -webkit-flex(1 105px);" ' + sizeAsString([105, 105]) + ' ' + positionAsString(expectations[writingMode][direction]) + '></div>\n' +
115 document.body.appendChild(container);