layout/reftests/css-grid/grid-percent-grid-gap-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   <title>CSS Grid Test: 'grid-column-gap' percentage</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279182">
  10   <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters">
  11   <link rel="match" href="grid-percent-grid-gap-ref.html">
  12 <style>
  13 html,body {
  14     color:black; background-color:white; font-size:1px; padding:0; margin:0;
  15 }
  16
  17 .grid {
  18   display: grid;
  19   grid-template-columns: 30px 30px;
  20   border: 1px solid;
  21 }
  22
  23 .inline-grid {
  24   display: inline-grid;
  25   grid-auto-columns: 160px;
  26   grid-auto-rows: 120px;
  27   border: 1px solid;
  28 }
  29
  30 .float { float:left; border: 2px solid blue; }
  31
  32 .percentgap {
  33   grid-gap: 20%;
  34 }
  35
  36 .calcgap {
  37   grid-gap: calc(12px + 10%) calc(16px + 10%);
  38 }
  39
  40 span:nth-of-type(1) { background: magenta; }
  41 span:nth-of-type(2) { background: cyan; }
  42 span:nth-of-type(3) { background: yellow; }
  43 span:nth-of-type(4) { background: lime; }
  44
  45 x {
  46   display: block;
  47   width: 20px;
  48   height: 30px;
  49 }
  50
  51 br { clear: both; }
  52     </style>
  53 </head>
  54 <body>
  55
  56 <div class="inline-grid">
  57 <div class="grid percentgap">
  58   <span><x></x></span>
  59   <span><x></x></span>
  60   <span><x></x></span>
  61   <span><x></x></span>
  62 </div>
  63 </div>
  64
  65 <div class="inline-grid" style="grid: auto / auto">
  66 <div class="grid percentgap" style="place-self:start/start; width:160px; height:120px">
  67   <span><x></x></span>
  68   <span><x></x></span>
  69   <span><x></x></span>
  70   <span><x></x></span>
  71 </div>
  72 </div>
  73
  74 <div class="float">
  75 <div class="grid percentgap cfill" style="max-width:800%">
  76   <span><x></x></span>
  77   <span><x></x></span>
  78   <span><x></x></span>
  79   <span><x></x></span>
  80 </div>
  81 </div>
  82
  83 <div class="inline-grid">
  84 <div class="grid percentgap" style="place-self:start">
  85   <span><x></x></span>
  86   <span><x></x></span>
  87   <span><x></x></span>
  88   <span><x></x></span>
  89 </div>
  90 </div>
  91
  92 <br>
  93
  94 <div style="width:320px;height:200px">
  95 <div class="grid percentgap" style="height:120px">
  96   <span><x></x></span>
  97   <span><x></x></span>
  98   <span><x></x></span>
  99   <span><x></x></span>
 100 </div>
 101 </div>
 102
 103 <div class="inline-grid">
 104 <div class="grid calcgap">
 105   <span><x></x></span>
 106   <span><x></x></span>
 107   <span><x></x></span>
 108   <span><x></x></span>
 109 </div>
 110 </div>
 111
 112 <div class="inline-grid" style="grid: auto / auto">
 113 <div class="grid calcgap" style="align-self:start; justify-self:start; width:160px; height:120px">
 114   <span><x></x></span>
 115   <span><x></x></span>
 116   <span><x></x></span>
 117   <span><x></x></span>
 118 </div>
 119 </div>
 120
 121 <div class="inline-grid">
 122 <div class="grid" style="grid: min-content calc(12px + 10%) min-content / min-content calc(16px + 10%) min-content">
 123   <span><x></x></span><z></z><span><x></x></span>
 124   <z></z><z></z><z></z>
 125   <span><x></x></span><z></z><span><x></x></span>
 126 </div>
 127 </div>
 128
 129 <br>
 130
 131 <div style="width:320px;height:200px">
 132 <div class="grid calcgap" style="height:120px; grid-column-gap:calc(32px + 10%)">
 133   <span><x></x></span>
 134   <span><x></x></span>
 135   <span><x></x></span>
 136   <span><x></x></span>
 137 </div>
 138 </div>
 139
 140 <div style="width:320px;height:200px">
 141 <div class="grid calcgap" style="height:120px; grid-gap:calc(32px - 30%)">
 142   <span><x></x></span>
 143   <span><x></x></span>
 144   <span><x></x></span>
 145   <span><x></x></span>
 146 </div>
 147 </div>
 148
 149 <div class="float" style="margin-top:-50px">
 150 <div class="grid percentgap cfill" style="min-width:300%">
 151   <span><x></x></span>
 152   <span><x></x></span>
 153   <span><x></x></span>
 154   <span><x></x></span>
 155 </div>
 156 </div>
 157
 158 </body>
 159 </html>