layout/reftests/css-grid/grid-placement-implicit-named-areas-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   <title>Reference: implicit named areas</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215182">
  10   <style type="text/css">
  11 div {
  12   display: grid;
  13   grid-auto-columns: 3px;
  14   grid-auto-rows: 3px;
  15   border: 1px solid;
  16   float: left;
  17   width: 100px;
  18   margin: 2px;
  19   place-items: stretch;
  20   place-content: start;
  21 }
  22 .row-tests div {
  23   height: 100px;
  24 }
  25 span { background:lime; grid-column:A/B; grid-row:A/B; }
  26
  27 .col-valid { grid-template-columns:[A] 40px [] 40px [B]; }
  28 .row-valid { grid-template-rows:   [A] 40px [] 40px [B]; }
  29
  30 .col-start-1 { grid-template-columns:[A] 40px [] 40px; }
  31 .row-start-1 { grid-template-rows:   [A] 40px [] 40px; }
  32
  33 .col-end-1 { grid-template-columns:[B] 40px [] 40px; }
  34 .row-end-1 { grid-template-rows:   [B] 40px [] 40px; }
  35
  36 .col-start { grid-template-columns: 40px [A] 40px []; }
  37 .row-start { grid-template-rows:    40px [A] 40px []; }
  38
  39 .col-end { grid-template-columns:40px [B] 40px; }
  40 .row-end { grid-template-rows:   40px [B] 40px; }
  41
  42 .col-end-start { grid-template-columns:[B] 40px [A] 40px; }
  43 .row-end-start { grid-template-rows:   [B] 40px [A] 40px; }
  44
  45 .col-start-end-start { grid-template-columns:[A] 40px [B] 40px [A] 40px; }
  46 .row-start-end-start { grid-template-rows:   [A] 40px [B] 40px [A] 40px; }
  47
  48 .col-start-start-end { grid-template-columns:[A] 40px [A] 40px [B] 40px; }
  49 .row-start-start-end { grid-template-rows:   [A] 40px [A] 40px [B] 40px; }
  50
  51 .col-start-end-end { grid-template-columns:[A] 40px [B] 40px [B]; }
  52 .row-start-end-end { grid-template-rows:   [A] 40px [B] 40px [B]; }
  53
  54 .col-start-last { grid-template-columns: 40px [] 40px [A]; }
  55 .row-start-last { grid-template-rows:    40px [] 40px [A]; }
  56
  57 .col-same-1 { grid-template-columns:[B A] 40px [] 40px; }
  58 .row-same-1 { grid-template-rows:   [B A] 40px [] 40px; }
  59
  60 .col-same-2 { grid-template-columns:40px [B A] 40px; }
  61 .row-same-2 { grid-template-rows:   40px [B A] 40px; }
  62
  63 .col-same-2b { grid-template-columns:40px [A B] 40px; }
  64 .row-same-2b { grid-template-rows:   40px [A B] 40px; }
  65
  66 .col-same-3 { grid-template-columns:40px [] 40px [B A]; }
  67 .row-same-3 { grid-template-rows:   40px [] 40px [B A]; }
  68     </style>
  69 </head>
  70 <body>
  71
  72 <div class="col-valid"><span></span></div>
  73 <div class="col-start-1"><span></span></div>
  74 <div class="col-end-1"><span></span></div>
  75 <div class="col-start"><span></span></div>
  76 <div class="col-end"><span></span></div>
  77 <div class="col-end-start"><span></span></div>
  78 <div class="col-start-end-start"><span></span></div>
  79
  80 <br clear="all">
  81
  82 <div class="col-valid row-valid"><span></span></div>
  83 <div class="col-start-1 row-valid"><span></span></div>
  84 <div class="col-end-1 row-valid"><span></span></div>
  85 <div class="col-start row-valid"><span></span></div>
  86 <div class="col-end row-valid"><span></span></div>
  87 <div class="col-end-start row-valid"><span></span></div>
  88 <div class="col-start-end-start row-valid"><span></span></div>
  89
  90 <br clear="all">
  91
  92 <div class="col-start-start-end"><span></span></div>
  93 <div class="col-start-end-end"><span></span></div>
  94 <div class="col-start-last"><span></span></div>
  95 <div class="col-same-1"><span></span></div>
  96 <div class="col-same-2"><span></span></div>
  97 <div class="col-same-2b"><span></span></div>
  98 <div class="col-same-3"><span></span></div>
  99
 100 <br clear="all">
 101
 102 <div class="col-start-start-end row-valid"><span></span></div>
 103 <div class="col-start-end-end row-valid"><span></span></div>
 104 <div class="col-start-last row-valid"><span></span></div>
 105 <div class="col-same-1 row-valid"><span></span></div>
 106 <div class="col-same-2 row-valid"><span></span></div>
 107 <div class="col-same-2b row-valid"><span></span></div>
 108 <div class="col-same-3 row-valid"><span></span></div>
 109
 110 <br clear="all">
 111
 112 <x class="row-tests">
 113
 114 <div class="row-valid"><span></span></div>
 115 <div class="row-start-1"><span></span></div>
 116 <div class="row-end-1"><span></span></div>
 117 <div class="row-start"><span></span></div>
 118 <div class="row-end"><span></span></div>
 119 <div class="row-end-start"><span></span></div>
 120 <div class="row-start-end-start"><span></span></div>
 121
 122 <br clear="all">
 123
 124 <div class="row-valid col-valid"><span></span></div>
 125 <div class="row-start-1 col-valid"><span></span></div>
 126 <div class="row-end-1 col-valid"><span></span></div>
 127 <div class="row-start col-valid"><span></span></div>
 128 <div class="row-end col-valid"><span></span></div>
 129 <div class="row-end-start col-valid"><span></span></div>
 130 <div class="row-start-end-start col-valid"><span></span></div>
 131
 132 <br clear="all">
 133
 134 <div class="row-start-start-end"><span></span></div>
 135 <div class="row-start-end-end"><span></span></div>
 136 <div class="row-start-last"><span></span></div>
 137 <div class="row-same-1"><span></span></div>
 138 <div class="row-same-2"><span></span></div>
 139 <div class="row-same-2b"><span></span></div>
 140 <div class="row-same-3"><span></span></div>
 141
 142 <br clear="all">
 143
 144 <div class="row-start-start-end col-valid"><span></span></div>
 145 <div class="row-start-end-end col-valid"><span></span></div>
 146 <div class="row-start-last col-valid"><span></span></div>
 147 <div class="row-same-1 col-valid"><span></span></div>
 148 <div class="row-same-2 col-valid"><span></span></div>
 149 <div class="row-same-2b col-valid"><span></span></div>
 150 <div class="row-same-3 col-valid"><span></span></div>
 151
 152 </x>
 153
 154 </body>
 155 </html>