layout/reftests/css-grid/grid-percent-intrinsic-sizing-001.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <style type="text/css">
   9   <title>CSS Grid Test: Grid container intrinsic sizing involving percent track min sizing / grid-gap</title>
  10   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302541">
  11   <link rel="match" href="grid-percent-intrinsic-sizing-001-ref.html">
  12   <style type="text/css">
  13 html,body {
  14     color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
  15 }
  16
  17 div {
  18   display: grid;
  19   float: left;
  20   border: 1px solid;
  21   clear: left;
  22   place-content: start start;
  23   margin: 3px;
  24 }
  25
  26 span {
  27   background: grey;
  28 }
  29 .c > span { width: 10px; }
  30 .r > span { height: 10px; }
  31
  32 span:nth-child(2) { background:lime; }
  33 x { background: blue; }
  34 x:nth-child(2) { background:pink; }
  35
  36 .c { grid-auto-rows: 5px; }
  37 .c.p1   { grid-template-columns: 10%; }
  38 .c.p1a  { grid-template-columns: minmax(10%,auto); }
  39 .c.p2   { grid-template-columns: 10% 10%; grid-gap: 20%; }
  40 .c.p2a  { grid-template-columns: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
  41
  42 .r { grid-auto-columns: 5px; grid-auto-flow: column; }
  43 .r.p1   { grid-template-rows: 10%; }
  44 .r.p1a  { grid-template-rows: minmax(10%,auto); }
  45 .r.p2   { grid-template-rows: 10% 10%; grid-gap: 20%; }
  46 .r.p2a  { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
  47
  48   </style>
  49 </head>
  50 <body>
  51
  52 <div class="c p1"><span></span><x></x></div>
  53 <div class="c p1"><x></x></div>
  54 <div class="c p1a"><span></span><x></x></div>
  55 <div class="c p1a"><x></x></div>
  56
  57 <div class="c p2"><span></span><span></span><x></x></div>
  58 <div class="c p2"><x></x><x></x></div>
  59 <div class="c p2a"><span></span><span></span><x></x></div>
  60 <div class="c p2a"><x></x><x></x></div>
  61
  62 <div class="r p1"><span></span><x></x></div>
  63 <div class="r p1"><x></x></div>
  64 <div class="r p1a"><span></span><x></x></div>
  65 <div class="r p1a"><x></x></div>
  66
  67 <div class="r p2"><span></span><span></span><x></x></div>
  68 <div class="r p2"><x></x><x></x></div>
  69 <div class="r p2a"><span></span><span></span><x></x></div>
  70 <div class="r p2a"><x></x><x></x></div>
  71
  72 </body>
  73 </html>