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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .test-row {
   6     display: flex;
   7     margin-bottom: 5px;
   8 }
   9 .test-row > div {
  10     flex: none;
  11 }
  12
  13 .container {
  14     margin-right: 5px;
  15     border: 5px solid lightgreen;
  16     width: 100px;
  17 }
  18
  19 .horizontal-tb {
  20     -webkit-writing-mode: horizontal-tb;
  21 }
  22
  23 .horizontal-bt {
  24     -webkit-writing-mode: horizontal-bt;
  25 }
  26
  27 .vertical-rl {
  28     -webkit-writing-mode: vertical-rl;
  29 }
  30
  31 .vertical-lr {
  32     -webkit-writing-mode: vertical-lr;
  33 }
  34
  35 .row {
  36     flex-direction: row;
  37 }
  38
  39 .row-reverse {
  40     flex-direction: row-reverse;
  41 }
  42
  43 .column {
  44     flex-direction: column;
  45 }
  46
  47 .column-reverse {
  48     flex-direction: column-reverse;
  49 }
  50
  51 .flexbox {
  52     border: 0 solid pink;
  53     display: flex;
  54     height: 100px;
  55     width: 100px;
  56     overflow: auto;
  57 }
  58
  59 .flexbox > div {
  60     width: 200px;
  61     height: 200px;
  62     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%);
  63     flex: none;
  64 }
  65
  66 </style>
  67 </head>
  68 <body>
  69     <p>Scrollbars should work in all the flexboxes.</p>
  70 </body>
  71 <script>
  72 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
  73 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
  74 var testContents = '';
  75 writingModes.forEach(function(writingMode) {
  76     testContents += "<div class='test-row'>";
  77     flexDirections.forEach(function(flexDirection) {
  78         var containerClass = 'container ' + writingMode;
  79         var flexboxClass = 'flexbox ' + flexDirection;
  80         testContents +=
  81             "<div class='" + containerClass + "'>" +
  82             "<div class='" + flexboxClass + "'>" +
  83             "<div></div>" +
  84             "</div>" +
  85             "</div>";
  86     });
  87     testContents += "</div>";
  88 });
  89
  90 document.body.innerHTML += testContents;
  91
  92 </script>
  93 </body>
  94 </html>