b688e66f5a7d05dc40c13fcb1987b1f610191453
[WebKit-https.git] / LayoutTests / css3 / flexbox / child-overflow-expected.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .container {
6     display: inline-block;
7     margin-right: 30px;
8     width: 100px;
9     height: 100px;
10     border: 5px solid pink;
11     position: relative;
12 }
13
14 .container > div {
15     overflow: auto;
16     width: 100px;
17     height: 100px;
18 }
19
20 .container > div > div {
21     width: 120px;
22     height: 120px;
23     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%);
24 }
25
26 p {
27     margin-bottom: 30px;
28 }
29 </style>
30 </head>
31 <body>
32     <p>Scrollbars should work in all the flexboxes. The first and third
33     columns should overflow the logical height. Each row should be aligned
34     to the same corner.</p>
35
36     <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
37     <div class="container bottomLeft"><div><div></div></div></div>
38     <div class="container bottomLeft"><div style="height: auto; position: absolute; bottom: 0"><div></div></div></div>
39     <div class="container bottomLeft"><div><div></div></div></div>
40     <br>
41     <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
42     <div class="container topRight"><div><div></div></div></div>
43     <div class="container topRight"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute; right: 0"><div></div></div></div>
44     <div class="container topRight"><div><div></div></div></div>
45     <br>
46     <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
47     <div class="container"><div><div></div></div></div>
48     <div class="container"><div style="width: auto; overflow-x: hidden; overflow-y: scroll; position: absolute;"><div></div></div></div>
49     <div class="container"><div><div></div></div></div>
50     <br>
51     <div class="container"><div style="height: auto"><div></div></div></div>
52     <div class="container"><div><div></div></div></div>
53     <div class="container"><div style="height: auto"><div></div></div></div>
54     <div class="container"><div><div></div></div></div>
55
56 <script>
57
58 Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {
59     element.firstChild.scrollTop = 1000;
60 });
61
62 Array.prototype.forEach.call(document.querySelectorAll('.topRight'), function(element) {
63     element.firstChild.scrollLeft = 1000;
64 });
65
66 </script>
67 </body>
68 </html>