third_party/WebKit/LayoutTests/css3/flexbox/columns-auto-size.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 body {
   6     margin: 0;
   7 }
   8
   9 .flexbox {
  10     background-color: #aaa;
  11     position: relative;
  12 }
  13 .horizontal {
  14     width: 400px;
  15 }
  16
  17 .horizontal div {
  18     width: 100%;
  19 }
  20 .vertical {
  21     -webkit-writing-mode: vertical-rl;
  22     height: 50px;
  23 }
  24 .vertical div {
  25     height: 100%;
  26 }
  27
  28 .flexbox > :nth-child(1) {
  29     background-color: blue;
  30 }
  31 .flexbox > :nth-child(2) {
  32     background-color: green;
  33 }
  34 .flexbox > :nth-child(3) {
  35     background-color: red;
  36 }
  37 .flexbox > :nth-child(4) {
  38     background-color: orange;
  39 }
  40 .child-div {
  41     background-color: yellow;
  42 }
  43 </style>
  44 <script src="../../resources/check-layout.js"></script>
  45 <body onload="checkLayout('.flexbox')">
  46 <div class="flexbox column horizontal">
  47   <div data-expected-height="10" data-offset-y="0" style="flex: 1 0 10px;"></div>
  48   <div data-expected-height="10" data-offset-y="10" style="height: 10px;"></div>
  49   <div data-expected-height="10" data-offset-y="20"><div data-expected-height="10" data-offset-y="20" style="height: 10px"></div></div>
  50 </div>
  51
  52 <!-- The last div is sized to 0 because there is no available space, however its child overflows. -->
  53 <div class="flexbox column horizontal">
  54   <div data-expected-height="0" data-offset-y="0" style="flex: 1;"></div>
  55   <div data-expected-height="10" data-offset-y="0" style="height: 10px;"></div>
  56   <div data-expected-height="10" data-offset-y="10" style="flex: 1 auto;"><div style="height: 10px"></div></div>
  57   <div data-expected-height="10" data-offset-y="20" style="min-height: 0; flex: 1;"><div data-expected-height="10" data-offset-y="20" class="child-div" style="height: 10px"></div></div>
  58 </div>
  59
  60 <div class="flexbox column horizontal">
  61   <div data-expected-height="10" data-offset-y="10" style="flex: 1 0 10px; margin-top: 10px;"></div>
  62   <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
  63   <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
  64 </div>
  65
  66 <!-- Same as previous test case but with a justify-content set.  Since there's no
  67      available space, it should layout the same. -->
  68 <div class="flexbox column horizontal justify-content-space-between">
  69   <div data-expected-height="10" data-offset-y="10" style="flex: 1 0 10px; margin-top: 10px;"></div>
  70   <div data-expected-height="10" data-offset-y="20" style="height: 10px; margin-bottom: 20px;"></div>
  71   <div data-expected-height="20" data-offset-y="50" style="padding-top: 10px"><div data-expected-height="10" data-offset-y="60" style="height: 10px"></div></div>
  72 </div>
  73
  74 <div class="flexbox column horizontal" data-expected-height="20">
  75   <div data-expected-height="10" data-offset-y="0" style="flex: 0 1 auto;"><div style="height: 10px"></div></div>
  76   <div data-expected-height="10" data-offset-y="10" style="flex: 0 2 auto;"><div style="height: 10px"></div></div>
  77 </div>
  78
  79 <div class="flexbox column horizontal" style="min-height: 10px" data-expected-height="20">
  80   <div data-expected-height="10" data-offset-y="0" style="flex: 0 1 auto;"><div style="height: 10px"></div></div>
  81   <div data-expected-height="10" data-offset-y="10" style="flex: 0 2 auto;"><div style="height: 10px"></div></div>
  82 </div>
  83
  84 <div class="flexbox column horizontal" style="min-height: 5px; max-height: 17px;" data-expected-height="17">
  85   <div data-expected-height="9" data-offset-y="0" style="min-height: 0; flex: 0 1 auto;"><div style="height: 10px"></div></div>
  86   <div data-expected-height="8" data-offset-y="9" style="min-height: 0; flex: 0 2 auto;"><div style="height: 10px"></div></div>
  87 </div>
  88
  89 <div class="flexbox column horizontal" style="min-height: 5px; max-height: 30px; padding-top: 1px; padding-bottom: 2px;" data-expected-height="33">
  90   <div data-expected-height="15" data-offset-y="1" style="min-height: 0; flex: 0 1 auto;"><div style="height: 20px"></div></div>
  91   <div data-expected-height="15" data-offset-y="16" style="min-height: 0; flex: 0 1 auto;"><div style="height: 20px"></div></div>
  92 </div>
  93
  94 <div class="flexbox column horizontal">
  95   <div data-expected-client-height="10" data-offset-y="0" style="overflow: scroll"><div data-expected-height=10 style="height: 10px"></div></div>
  96 </div>
  97
  98 <div class="flexbox column vertical">
  99   <div data-expected-width="10" data-offset-x="20" style="flex: 1 0 10px;"></div>
 100   <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
 101   <div data-expected-width="10" data-offset-x="0"><div data-expected-width="10" data-offset-x="0" style="width: 10px"></div></div>
 102 </div>
 103
 104 <!-- The first div overflows to the left, so give it a margin-left so we can see box it paints. -->
 105 <div class="flexbox column vertical" style="margin-left: 100px;">
 106   <div data-expected-width="50" data-offset-x="20" style="min-width: 0; flex: 1;"><div data-expected-width="50" data-offset-x="20" class="child-div" style="width: 50px"></div></div>
 107   <div data-expected-width="0" data-offset-x="20" style="flex: 1;"></div>
 108   <div data-expected-width="10" data-offset-x="10" style="width: 10px;"></div>
 109   <div data-expected-width="10" data-offset-x="0" style="flex: 1 auto;"><div style="width: 10px"></div></div>
 110 </div>
 111
 112 </body>
 113 </html>