third_party/WebKit/LayoutTests/fast/css/deprecated-flexbox-auto-min-size.html

   1 <!DOCTYPE html>
   2 <style>
   3 .flexbox {
   4     display: -webkit-box;
   5     width: 30px;
   6     height: 30px;
   7 }
   8 .item {
   9     -webkit-box-flex: 1;
  10     width: 20px;
  11     height: 20px;
  12 }
  13 .item:nth-child(1) {
  14     background-color: salmon;
  15     min-width: 0;
  16     min-height: 0;
  17 }
  18 .item:nth-child(2) {
  19     background-color: lightblue;
  20     min-width: auto;
  21     min-height: auto;
  22 }
  23 .item:nth-child(3) {
  24     background-color: orange;
  25     min-width: 30px;
  26     min-height: 30px;
  27 }
  28 .inline {
  29     display: inline-block;
  30     width: 20px;
  31     height: 20px;
  32 }
  33 .vertical {
  34     -webkit-box-orient: vertical;
  35 }
  36 </style>
  37
  38 <script src="../../resources/check-layout.js"></script>
  39 <body onload="checkLayout('.flexbox')">
  40
  41 Tests that deprecated flexboxes treat min-width/min-height:auto as 0px.
  42
  43 <div class="flexbox horizontal">
  44     <div class="item" data-expected-width=0 data-expected-height=20><div class="inline"></div></div>
  45     <div class="item" data-expected-width=0 data-expected-height=20><div class="inline"></div></div>
  46     <div class="item" data-expected-width=30 data-expected-height=30><div class="inline"></div></div>
  47 </div>
  48
  49 <div class="flexbox vertical">
  50     <div class="item" data-expected-width=20 data-expected-height=0><div class="inline"></div></div>
  51     <div class="item" data-expected-width=20 data-expected-height=0><div class="inline"></div></div>
  52     <div class="item" data-expected-width=30 data-expected-height=30><div class="inline"></div></div>
  53 </div>
  54 </body>