layout/reftests/css-grid/grid-percent-intrinsic-sizing-001-ref.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   <style type="text/css">
  12 html,body {
  13     color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
  14 }
  15
  16 div {
  17   display: grid;
  18   float: left;
  19   border: 1px solid;
  20   clear: left;
  21   align-content: start;
  22   justify-content: 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: 1px; width: 10px; }
  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 .c.c0  { grid-template-columns: 0; }
  42
  43 .r { grid-auto-columns: 5px; grid-auto-flow: column; }
  44 .r.p1   { grid-template-rows: 10%; }
  45 .r.p1a  { grid-template-rows: minmax(10%,auto); }
  46 .r.p2   { grid-template-rows: 10% 10%; grid-gap: 20%; }
  47 .r.p2a  { grid-template-rows: repeat(2,minmax(10%,auto)); grid-gap: 20%; }
  48 .r.r0   { grid-template-rows: 0; }
  49
  50   </style>
  51 </head>
  52 <body>
  53
  54 <div class="c p1"><span></span><x></x></div>
  55 <div class="c c0"><x></x></div>
  56 <div class="c p1a"><span></span><x></x></div>
  57 <div class="c c0"><x></x></div>
  58
  59 <div class="c p2"><span></span><span></span><x></x></div>
  60 <div class="c c0"><x></x></div>
  61 <div class="c p2a"><span></span><span></span><x></x></div>
  62 <div class="c c0"><x></x></div>
  63
  64 <div class="r p1"><span></span><x></x></div>
  65 <div class="r r0"><x></x></div>
  66 <div class="r p1a"><span></span><x></x></div>
  67 <div class="r r0"><x></x></div>
  68
  69 <div class="r p2"><span></span><span></span><x></x></div>
  70 <div class="r r0"><x></x></div>
  71 <div class="r p2a"><span></span><span></span><x></x></div>
  72 <div class="r r0"><x></x></div>
  73
  74 </body>
  75 </html>