c198bee4fd576ef101742554641a3aeed0e769d0
[WebKit-https.git] / LayoutTests / css3 / flexbox / child-overflow.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .container {
6     display: inline-block;
7     margin-right: 30px;
8 }
9
10 .horizontal-tb {
11     -webkit-writing-mode: horizontal-tb;
12 }
13
14 .horizontal-bt {
15     -webkit-writing-mode: horizontal-bt;
16 }
17
18 .vertical-rl {
19     -webkit-writing-mode: vertical-rl;
20 }
21
22 .vertical-lr {
23     -webkit-writing-mode: vertical-lr;
24 }
25
26 .row {
27     -webkit-flex-direction: row;
28 }
29
30 .row-reverse {
31     -webkit-flex-direction: row-reverse;
32 }
33
34 .column {
35     -webkit-flex-direction: column;
36 }
37
38 .column-reverse {
39     -webkit-flex-direction: column-reverse;
40 }
41
42 .flexbox {
43     border: 5px solid pink;
44     display: -webkit-flexbox;
45     height: 100px;
46     width: 100px;
47 }
48
49 .flexbox > div {
50     overflow: auto;
51 }
52
53 .flexbox > div > div {
54     width: 120px;
55     height: 120px;
56     background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
57 }
58
59 p {
60     margin-bottom: 30px;
61 }
62 </style>
63 </head>
64 <body>
65     <p>Scrollbars should work in all the flexboxes. The first and third
66     columns should overflow the logical height. Each row should be aligned
67     to the same corner.</p>
68 </body>
69 <script>
70 var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-tb'];
71 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
72 writingModes.forEach(function(writingMode) {
73     flexDirections.forEach(function(flexDirection) {
74         var containerClass = 'container ' + writingMode;
75         var flexboxClass = 'flexbox ' + flexDirection;
76         document.body.innerHTML +=
77             "<div class='" + containerClass + "'>" +
78             "<div class='" + flexboxClass + "'>" +
79             "<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
80             "</div>" +
81             "</div> ";
82     });
83     document.body.innerHTML += "<br>";
84 });
85
86 </script>
87 </body>
88 </html>