ea7da6121fd085f7c39cbbc2d0e5cc52ee90ddad
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-flow-overflow.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .container {
5     position: relative;
6     background-color: pink;
7     outline: 1px solid red;
8     display: inline-block;
9 }
10 .flexbox {
11     display: -webkit-flexbox;
12     background-color: grey;
13     width: 100px;
14     height: 100px;
15 }
16 .title {
17     margin-top: 1em;
18 }
19 .ltr {
20     direction: ltr;
21 }
22 .rtl {
23     direction: rtl;
24 }
25 .horizontal-tb {
26     -webkit-writing-mode: horizontal-tb;
27 }
28 .horizontal-bt {
29     -webkit-writing-mode: horizontal-bt;
30 }
31 .vertical-rl {
32     -webkit-writing-mode: vertical-rl;
33 }
34 .vertical-lr {
35     -webkit-writing-mode: vertical-lr;
36 }
37 .row {
38     -webkit-flex-flow: row;    
39 }
40 .row-reverse {
41     -webkit-flex-flow: row-reverse;
42 }
43 .column {
44     -webkit-flex-flow: column;
45 }
46 .column-reverse {
47     -webkit-flex-flow: column-reverse;
48 }
49 .flexbox > :nth-child(1) {
50     background-color: blue;
51 }
52 </style>
53 <script>
54 if (window.layoutTestController)
55     layoutTestController.dumpAsText();
56 </script>
57 <script src="resources/flexbox.js"></script>
58 <body onload="checkFlexBoxen()">
59
60 <script>
61 function positionAsString(position)
62 {
63     return 'data-offset-x="' + position[0] + '" data-offset-y="' + position[1] + '"';
64 }
65
66 function sizeAsString(size)
67 {
68     return 'data-expected-width="' + size[0] + '" data-expected-height="' + size[1] + '"';
69 }
70
71 var containerSize = [100, 100];
72
73 var expectations = {
74     'horizontal-tb': {
75         rtl: [-5, 0],
76         ltr: [0, 0]
77     },
78     'horizontal-bt': {
79         rtl: [-5, -5],
80         ltr: [0, -5]
81     },
82     'vertical-lr': {
83         rtl: [0, -5],
84         ltr: [0, 0]
85     },
86     'vertical-rl': {
87         rtl: [-5, -5],
88         ltr: [-5, 0]
89     }
90 }
91
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'];
96
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);
105
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]);
110
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' +
113             '</div>\n';
114
115             document.body.appendChild(container);   
116         })
117     })
118 })
119 </script>
120 </body>
121 </html>