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

   1 <!DOCTYPE html>
   2 <link href="resources/flexbox.css" rel="stylesheet">
   3
   4 <script src="../../resources/js-test.js"></script>
   5 <script src="../../resources/check-layout.js"></script>
   6
   7 <style>
   8 .flexbox {
   9     width: 10px;
  10     height: 10px;
  11     background-color: grey;
  12 }
  13
  14 .item {
  15     background-color: red;
  16     margin: 5px;
  17 }
  18
  19 .child {
  20     height: 100px;
  21     width: 100px;
  22     background-color: green;
  23 }
  24
  25 .width-20 {
  26     width: 20px;
  27 }
  28
  29 .flex-basis-20 {
  30     flex-basis: 20px;
  31 }
  32
  33 </style>
  34
  35 <body onload="checkLayout('.flexbox')">
  36
  37 <div class="flexbox" data-expected-width="10">
  38     <div class="item" data-expected-width="100">
  39         <div class="child" data-expected-width="100"></div>
  40     </div>
  41 </div>
  42
  43 <div class="flexbox column" data-expected-height="10">
  44     <div class="item" data-expected-height="100">
  45         <div class="child" data-expected-height="100"></div>
  46     </div>
  47 </div>
  48
  49 <div class="flexbox" data-expected-width="10">
  50     <div class="item width-20" data-expected-width="20">
  51         <div class="child" data-expected-width="100"></div>
  52     </div>
  53 </div>
  54
  55 <div class="flexbox" data-expected-width="10">
  56     <div class="item flex-basis-20" data-expected-width="100">
  57         <div class="child" data-expected-width="100"></div>
  58     </div>
  59 </div>