third_party/WebKit/LayoutTests/css3/flexbox/cross-axis-scrollbar.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/flexbox.css" rel="stylesheet">
   5 <style>
   6 body {
   7     margin: 0;
   8 }
   9
  10 .flexbox {
  11     background-color: red;
  12 }
  13
  14 .vertical-rl {
  15     -webkit-writing-mode: vertical-rl;
  16 }
  17
  18 .vertical-lr {
  19     -webkit-writing-mode: vertical-lr;
  20 }
  21
  22 .column > div {
  23     flex: none;
  24     background-color: green;
  25     width: 100px;
  26     height: 10px;
  27 }
  28
  29 .row > div {
  30     background-color: green;
  31     flex: 1;
  32     height: 50px;
  33     min-height: 0;
  34 }
  35
  36 .vertical-lr > .column > div {
  37     flex: none;
  38     height: 50px;
  39     width: 20px;
  40 }
  41
  42 .vertical-lr > .row > div {
  43     flex: 1;
  44     width: 100px;
  45 }
  46
  47 </style>
  48 </head>
  49 <body>
  50
  51 This test passes if no red is showing.
  52
  53 <div style="position: relative;">
  54
  55 <div style="position: absolute; top: 0; left: 0;">
  56 <div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
  57     <div class="align-self-flex-start"></div>
  58     <div class="align-self-center"></div>
  59     <div class="align-self-flex-end"></div>
  60     <div class="align-self-baseline"></div>
  61     <div class="align-self-stretch"></div>
  62 </div>
  63 </div>
  64
  65 <div style="position: absolute; top: 0; left: 150px;">
  66 <div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
  67     <div class="align-self-flex-start"></div>
  68     <div class="align-self-center"></div>
  69     <div class="align-self-flex-end"></div>
  70     <div class="align-self-baseline"></div>
  71     <div class="align-self-stretch"></div>
  72 </div>
  73 </div>
  74
  75 <div style="position: absolute; top:0; left: 300px" class="vertical-lr">
  76 <div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
  77     <div class="align-self-flex-start"></div>
  78     <div class="align-self-center"></div>
  79     <div class="align-self-flex-end"></div>
  80     <div class="align-self-baseline"></div>
  81     <div class="align-self-flex-start"></div>
  82 </div>
  83 </div>
  84
  85 <div style="position: absolute; top:0; left: 450px;" class="vertical-lr">
  86 <div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
  87     <div class="align-self-flex-start"></div>
  88     <div class="align-self-center"></div>
  89     <div class="align-self-flex-end"></div>
  90     <div class="align-self-baseline"></div>
  91     <div class="align-self-flex-start"></div>
  92 </div>
  93 </div>
  94
  95 <div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 0">
  96 <div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
  97     <div class="align-self-flex-start"></div>
  98     <div class="align-self-center"></div>
  99     <div class="align-self-flex-end"></div>
 100     <div class="align-self-baseline"></div>
 101     <div class="align-self-stretch"></div>
 102 </div>
 103 </div>
 104
 105 <div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 150px">
 106 <div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
 107     <div class="align-self-flex-start"></div>
 108     <div class="align-self-center"></div>
 109     <div class="align-self-flex-end"></div>
 110     <div class="align-self-baseline"></div>
 111     <div class="align-self-stretch"></div>
 112 </div>
 113 </div>
 114
 115 <div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 300px" class="vertical-lr">
 116 <div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
 117     <div class="align-self-flex-start"></div>
 118     <div class="align-self-center"></div>
 119     <div class="align-self-flex-end"></div>
 120     <div class="align-self-baseline"></div>
 121     <div class="align-self-stretch"></div>
 122 </div>
 123 </div>
 124
 125 <div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 450px" class="vertical-lr">
 126 <div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
 127     <div class="align-self-flex-start"></div>
 128     <div class="align-self-center"></div>
 129     <div class="align-self-flex-end"></div>
 130     <div class="align-self-baseline"></div>
 131     <div class="align-self-stretch"></div>
 132 </div>
 133 </div>
 134
 135 </div>
 136 <!-- FIXME: Add tests for horizontal-bt and vertical-rl.  Setting the logical
 137 bottom border on these tests cause additional scrollbars to appear. -->
 138
 139 </body>
 140 </html>