testing/web-platform/tests/css/css-intrinsic-size/intrinsic-size-026.html

   1 <!doctype html>
   2 <meta charset="utf8">
   3 <title>CSS intrinsic-size: grid auto-fit, min- max- size interactions</title>
   4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
   5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
   6 <link rel="match" href="intrinsic-size-026-ref.html">
   7
   8 <style>
   9 .grid {
  10   display: inline-grid;
  11   border: 1px solid black;
  12   grid-template-columns: repeat(auto-fit, 100px);
  13 }
  14 .one {
  15   intrinsic-width: 100px;
  16   min-width: 200px;
  17 }
  18 .two {
  19   intrinsic-width: 200px;
  20   min-width: 100px;
  21 }
  22 .three {
  23   intrinsic-width: 100px;
  24   min-width: 200px;
  25   max-width: 150px;
  26 }
  27 .four {
  28   intrinsic-width: 200px;
  29   min-width: 100px;
  30   max-width: 150px;
  31 }
  32 .item {
  33   background: green;
  34   height: 100%;
  35 }
  36 </style>
  37
  38 <p>min-width larger than intrinsic-width:
  39 <div class="grid one">
  40   <div class="item">one</div>
  41   <div class="item">two</div>
  42 </div>
  43
  44 <p>min-width smaller than intrinsic-width:
  45 <div class="grid two">
  46   <div class="item">one</div>
  47   <div class="item">two</div>
  48 </div>
  49
  50 <p>max-width ignored since min-width is larger:
  51 <div class="grid three">
  52   <div class="item">one</div>
  53   <div class="item">two</div>
  54 </div>
  55
  56 <p>min-width shrinks grid since it overrides intrinsic-width:
  57 <div class="grid four">
  58   <div class="item">one</div>
  59   <div class="item">two</div>
  60 </div>