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