testing/web-platform/tests/css/css-intrinsic-size/intrinsic-size-with-legacy-008.html

   1 <!doctype html>
   2 <meta charset="utf8">
   3 <title>CSS intrinsic-size: grid indefinite size, auto-fit with legacy</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-with-legacy-008-ref.html">
   7
   8 <style>
   9 .grid {
  10   border: 3px solid black;
  11   display: grid;
  12   background: lightblue;
  13   grid-gap: 5px;
  14 }
  15 .one {
  16   grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
  17 }
  18 .two {
  19   grid-template: 1fr 2fr / repeat(auto-fit, 15px);
  20 }
  21 .three {
  22   grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
  23 }
  24 .width {
  25   intrinsic-size: 70px legacy;
  26   width: max-content;
  27   height: 80px;
  28 }
  29 .height {
  30   intrinsic-size: legacy 80px;
  31   width: 70px;
  32 }
  33 .item {
  34   background: green;
  35   height: 100%;
  36 }
  37 </style>
  38
  39 <div class="grid one width">
  40   <div class=item></div>
  41   <div class=item></div>
  42   <div class=item></div>
  43   <div class=item></div>
  44   <div class=item></div>
  45   <div class=item></div>
  46 </div>
  47 <div class="grid two width">
  48   <div class=item></div>
  49   <div class=item></div>
  50   <div class=item></div>
  51   <div class=item></div>
  52   <div class=item></div>
  53   <div class=item></div>
  54 </div>
  55 <div class="grid three width">
  56   <div class=item></div>
  57   <div class=item></div>
  58   <div class=item></div>
  59   <div class=item></div>
  60   <div class=item></div>
  61   <div class=item></div>
  62 </div>
  63 <div class="grid one height">
  64   <div class=item></div>
  65   <div class=item></div>
  66   <div class=item></div>
  67   <div class=item></div>
  68   <div class=item></div>
  69   <div class=item></div>
  70 </div>
  71 <div class="grid two height">
  72   <div class=item></div>
  73   <div class=item></div>
  74   <div class=item></div>
  75   <div class=item></div>
  76   <div class=item></div>
  77   <div class=item></div>
  78 </div>
  79 <div class="grid three height">
  80   <div class=item></div>
  81   <div class=item></div>
  82   <div class=item></div>
  83   <div class=item></div>
  84   <div class=item></div>
  85   <div class=item></div>
  86 </div>