third_party/WebKit/LayoutTests/css3/flexbox/child-overflow-expected.html

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