third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-flex-items.html

   1 <!DOCTYPE html>
   2 <style>
   3 @import "resources/width-keyword-classes.css";
   4
   5 .container {
   6     border: 5px solid blue;
   7     width: 250px;
   8     height: 250px;
   9     display: -webkit-flex;
  10     display: flex;
  11 }
  12 .child {
  13     border: 5px solid pink;
  14     -webkit-flex: none;
  15     flex: none;
  16     display: -webkit-flex;
  17     display: flex;
  18 }
  19 .content {
  20     display: inline-block;
  21     width: 100px;
  22     height: 100px;
  23     background-color: salmon;
  24 }
  25 </style>
  26
  27 Tests intrinsic width values on flex-items.
  28
  29 <!-- width tests -->
  30 <div class="container">
  31     <div class="child max-content" data-expected-width="210">
  32         <div><div class="content"></div><div class="content"></div></div>
  33     </div>
  34 </div>
  35
  36 <div class="container">
  37     <div class="child min-content" data-expected-width="110">
  38         <div><div class="content"></div><div class="content"></div></div>
  39     </div>
  40 </div>
  41
  42 <div class="container">
  43     <div class="child fit-content" data-expected-width="210">
  44         <div><div class="content"></div><div class="content"></div></div>
  45     </div>
  46 </div>
  47
  48 <div class="container" style="width: 50px">
  49     <div class="child fit-content" data-expected-width="110">
  50         <div><div class="content"></div><div class="content"></div></div>
  51     </div>
  52 </div>
  53
  54 <div class="container">
  55     <div class="child fill-available" data-expected-width="250">
  56         <div><div class="content"></div><div class="content"></div></div>
  57     </div>
  58 </div>
  59
  60 <!-- min-width tests -->
  61 <div class="container">
  62     <div class="child min-width-max-content" style="width: 10px;" data-expected-width="210">
  63         <div><div class="content"></div><div class="content"></div></div>
  64     </div>
  65 </div>
  66 <div class="container">
  67     <div class="child min-width-min-content" style="width: 10px;" data-expected-width="110">
  68         <div><div class="content"></div><div class="content"></div></div>
  69     </div>
  70 </div>
  71
  72 <div class="container">
  73     <div class="child min-width-fit-content" style="width: 10px;" data-expected-width="210">
  74         <div><div class="content"></div><div class="content"></div></div>
  75     </div>
  76 </div>
  77
  78 <div class="container" style="width: 50px">
  79     <div class="child min-width-fit-content" style="width: 10px;" data-expected-width="110">
  80         <div><div class="content"></div><div class="content"></div></div>
  81     </div>
  82 </div>
  83
  84 <div class="container">
  85     <div class="child min-width-fill-available" style="width: 10px;" data-expected-width="250">
  86         <div><div class="content"></div><div class="content"></div></div>
  87     </div>
  88 </div>
  89
  90 <!-- max-width tests -->
  91 <div class="container">
  92     <div class="child max-width-max-content" style="width: 1000px; min-width: 0;" data-expected-width="210">
  93         <div><div class="content"></div><div class="content"></div></div>
  94     </div>
  95 </div>
  96
  97 <div class="container">
  98     <div class="child max-width-min-content" style="width: 1000px; min-width: 0;" data-expected-width="110">
  99         <div><div class="content"></div><div class="content"></div></div>
 100     </div>
 101 </div>
 102
 103 <div class="container">
 104     <div class="child max-width-fit-content" style="width: 1000px; min-width: 0;" data-expected-width="210">
 105         <div><div class="content"></div><div class="content"></div></div>
 106     </div>
 107 </div>
 108
 109 <div class="container" style="width: 50px">
 110     <div class="child max-width-fit-content" style="width: 1000px; min-width: 0;" data-expected-width="110">
 111         <div><div class="content"></div><div class="content"></div></div>
 112     </div>
 113 </div>
 114
 115 <div class="container">
 116     <div class="child max-width-fill-available" style="width: 1000px; min-width: 0;" data-expected-width="250">
 117         <div><div class="content"></div><div class="content"></div></div>
 118     </div>
 119 </div>
 120
 121 <script src="../../resources/check-layout.js"></script>
 122 <script>
 123 checkLayout(".container");
 124 </script>