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