Unreviewed, rolling out r111094.
[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: 5px;
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 </style>
59 </head>
60 <body>
61     <p>Scrollbars should work in all the flexboxes and each row should show four identical boxes.</p>
62 </body>
63 <script>
64 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
65 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
66 writingModes.forEach(function(writingMode) {
67     flexDirections.forEach(function(flexDirection) {
68         var containerClass = 'container ' + writingMode;
69         var flexboxClass = 'flexbox ' + flexDirection;
70         document.body.innerHTML +=
71             "<div class='" + containerClass + "'>" +
72             "<div class='" + flexboxClass + "'>" +
73             "<div style='width: -webkit-flex(0 1 auto); height: -webkit-flex(0 1 auto)'><div></div></div>" +
74             "</div>" +
75             "</div>";
76     });
77     document.body.innerHTML += "<br>";
78 });
79
80 </script>
81 </body>
82 </html>