layout/reftests/css-grid/grid-max-sizing-flex-006-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   <title>CSS Grid Test: Testing track flex max-sizing</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
  10   <style type="text/css">
  11 body,html { color:black; background:white; font-size:8px; line-height:10px; padding:0; margin:0; }
  12
  13 .grid {
  14   display: grid;
  15   grid-auto-columns: 40px;
  16   border: 3px dashed blue;
  17   width: 720px;
  18 }
  19
  20 .c1 { grid-row: 1 / span 2; }
  21 .c2 { grid-row: 2 / span 3; }
  22 .c3 { grid-row: 3 / span 1; }
  23
  24 span {
  25   background: gray;
  26   padding: 1px 3px;
  27   margin: 1px 5px;
  28   min-height: 5px;
  29   justify-self: flex-start;
  30 }
  31
  32   </style>
  33 </body>
  34 <head>
  35
  36 <div class="grid" style="grid-template-rows: 3px 6px 9px 6px 3px;">
  37 <span class="c1"></span>
  38 <span class="c2"></span>
  39 <span class="c3"></span>
  40 </div>
  41
  42 <div class="grid" style="grid-template-rows: 0.9px 1.8px 2.7px 1.8px 0.9px;">
  43 <span class="c1"></span>
  44 <span class="c2"></span>
  45 <span class="c3"></span>
  46 </div>
  47
  48 <div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
  49 <span class="c1"></span>
  50 <span class="c2"></span>
  51 <span class="c3"></span>
  52 </div>
  53
  54 <div class="grid" style="grid-template-rows: 9px 18px 27px 18px 9px;">
  55 <span class="c1"></span>
  56 <span class="c1"></span>
  57 <span class="c1"></span>
  58 <span class="c2"></span>
  59 <span class="c3"></span>
  60 </div>
  61
  62 <div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
  63 <span class="c1"></span>
  64 <span class="c2"></span>
  65 <span class="c3"></span>
  66 </div>
  67
  68 <div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
  69 <span class="c1"></span>
  70 <span class="c2"></span>
  71 <span class="c3"></span>
  72 </div>
  73
  74 <div class="grid" style="grid-template-rows: 18px 36px 54px 36px 18px;">
  75 <span class="c1"></span>
  76 <span class="c2"></span>
  77 <span class="c3"></span>
  78 </div>
  79
  80 </body>
  81 </html>