third_party/WebKit/LayoutTests/fast/deprecated-flexbox/intrinsic-min-width-applies-with-fixed-width.html

   1 <!DOCTYPE html>
   2 <style>
   3 .min-content {
   4     width: 10px;
   5     min-width: -webkit-min-content;
   6     min-width: -moz-min-content;
   7     min-width: -ie-min-content;
   8     min-width: -o-min-content;
   9     min-width: min-content;
  10     outline: 2px solid;
  11     display: -webkit-box;
  12     -webkit-box-lines: multiple;
  13 }
  14 .max-content {
  15     width: 10px;
  16     min-width: -webkit-max-content;
  17     min-width: -moz-max-content;
  18     min-width: -ie-max-content;
  19     min-width: -o-max-content;
  20     min-width: max-content;
  21     outline: 2px solid;
  22     display: -webkit-box;
  23     -webkit-box-lines: multiple;
  24 }
  25 .fit-content {
  26     width: 10px;
  27     min-width: -webkit-fit-content;
  28     min-width: -moz-fit-content;
  29     min-width: -ie-fit-content;
  30     min-width: -o-fit-content;
  31     min-width: fit-content;
  32     outline: 2px solid;
  33     display: -webkit-box;
  34     -webkit-box-lines: multiple;
  35 }
  36 .child {
  37     width: 20px;
  38     height: 20px;
  39     background-color: pink;
  40 }
  41 div {
  42     display: inline-block;
  43     line-height: 0;
  44 }
  45 </style>
  46 <script src="../../resources/check-layout.js"></script>
  47
  48 <body onload="checkLayout('body > div')">
  49 <p>Check that min-width intrinsic size still applies if a fixed width is set.</p>
  50
  51 <div class="min-content" data-expected-width=20>
  52     <div class="child"></div><div class="child"></div>
  53 </div>
  54
  55 <div class="max-content" data-expected-width=40>
  56     <div class="child"></div><div class="child"></div>
  57 </div>
  58
  59 <div class="fit-content" data-expected-width=40>
  60     <div class="child"></div><div class="child"></div>
  61 </div>
  62
  63 <div style="width: 30px">
  64     <div class="fit-content" data-expected-width=30>
  65         <div class="child"></div><div class="child"></div>
  66     </div>
  67 </div>
  68
  69 <div style="width: 10px">
  70     <div class="fit-content" data-expected-width=20>
  71         <div class="child"></div><div class="child"></div>
  72     </div>
  73 </div>
  74
  75 </body>