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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 body {
   6     margin: 0;
   7 }
   8
   9 .testcase {
  10     position: absolute;
  11 }
  12
  13 .testcase div {
  14     background-color: green;
  15 }
  16 </style>
  17 </head>
  18 <body>
  19 This test passes if no red is showing.
  20
  21 <div style="position: relative; background-color: transparent;">
  22
  23 <div class="testcase" style="top:0; left: 0">
  24     <div style="width: 100px; height: 50px"></div>
  25     <div style="width: 100px; overflow-x: scroll"></div>
  26     <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
  27 </div>
  28
  29 <div class="testcase" style="height: 50px; -webkit-writing-mode: vertical-lr; top: 0; left: 150px">
  30     <div style="width: 100px"></div>
  31     <div style="overflow-y: scroll"></div>
  32     <div style="width: 10px; position: relative; z-index: -1"></div>
  33 </div>
  34
  35 <div class="testcase" style="height: 50px; -webkit-writing-mode: vertical-lr; top: 0; left: 300px">
  36     <div style="width: 100px"></div>
  37     <div style="overflow-y: scroll"></div>
  38     <div style="width: 10px; position: relative; z-index: -1"></div>
  39 </div>
  40
  41 <div class="testcase" style="top: 0; left: 450px">
  42     <div style="width: 100px; height: 50px"></div>
  43     <div style="width: 100px; overflow-x: scroll"></div>
  44     <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
  45 </div>
  46
  47 <div class="testcase" style="top: 100px; left: 0">
  48     <div style="width: 100px; height: 50px; "></div>
  49     <div style="width: 100px; overflow-x: scroll"></div>
  50     <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
  51 </div>
  52
  53 <div class="testcase" style="height: 50px; -webkit-writing-mode: vertical-lr; top: 100px; left: 150px">
  54     <div style="width: 90px; overflow-y: scroll"></div>
  55     <div style="width: 10px; position: relative; z-index: -1"></div>
  56 </div>
  57
  58 <div class="testcase" style="top: 100px; left: 300px">
  59     <div style="width: 100px; height: 40px; overflow-x: scroll"></div>
  60     <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
  61 </div>
  62
  63 <div class="testcase" style="height: 50px; -webkit-writing-mode: vertical-lr; top: 100px; left: 450px">
  64     <div style="width: 100px"></div>
  65     <div style="overflow-y: scroll"></div>
  66     <div style="width: 10px; position: relative; z-index: -1"></div>
  67 </div>
  68
  69
  70 </body>
  71 </html>