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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/flexbox.css" rel="stylesheet">
   5 <style>
   6 .container {
   7     display: inline-block;
   8     vertical-align: top;
   9     margin-right: 30px;
  10 }
  11
  12 .horizontal-tb {
  13     -webkit-writing-mode: horizontal-tb;
  14 }
  15
  16 .horizontal-bt {
  17     -webkit-writing-mode: horizontal-bt;
  18 }
  19
  20 .vertical-rl {
  21     -webkit-writing-mode: vertical-rl;
  22 }
  23
  24 .vertical-lr {
  25     -webkit-writing-mode: vertical-lr;
  26 }
  27
  28 .flexbox {
  29     border: 5px solid pink;
  30     height: 100px;
  31     width: 100px;
  32 }
  33
  34 .flexbox > div {
  35     overflow: auto;
  36     min-width: 0;
  37     min-height: 0;
  38 }
  39
  40 .flexbox > div > div {
  41     width: 120px;
  42     height: 120px;
  43     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%);
  44     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%);
  45 }
  46
  47 p {
  48     margin-bottom: 30px;
  49 }
  50 </style>
  51 </head>
  52 <body>
  53     <p>Scrollbars should work in all the flexboxes. Each row should be aligned
  54     to the same corner.</p>
  55 </body>
  56 <script>
  57 var writingModes = ['horizontal-bt', 'vertical-rl', 'vertical-lr', 'horizontal-tb'];
  58 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
  59 writingModes.forEach(function(writingMode) {
  60     flexDirections.forEach(function(flexDirection) {
  61         var containerClass = 'container ' + writingMode;
  62         var flexboxClass = 'flexbox ' + flexDirection;
  63         document.body.innerHTML +=
  64             "<div class='" + containerClass + "'>" +
  65             "<div class='" + flexboxClass + "'>" +
  66             "<div><div></div></div>" +
  67             "</div>" +
  68             "</div> ";
  69     });
  70     document.body.innerHTML += "<br>";
  71 });
  72 </script>
  73 </html>