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

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