layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-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: repeat(auto-fit) with grid-aligned abs.pos. with removed start/middle tracks and implicit tracks on either/both sides</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1239036">
  10   <style type="text/css">
  11 html,body {
  12     color:black; background-color:white; font-size:16px; padding:0; margin:0;
  13 }
  14
  15 .grid {
  16   display: grid;
  17   position: relative;
  18   border: 1px solid;
  19   grid-auto-rows: 30px;
  20   grid-auto-columns: 3px;
  21   grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
  22   height: 30px;
  23 }
  24
  25 .c1 { width: 165px; }
  26 .c2 { width: 155px; }
  27 .c3 { width: 150px; }
  28 .p1 { padding-left:5px; }
  29
  30 .t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
  31
  32 x {
  33   width: 18px;
  34   border:1px solid;
  35   background: grey;
  36 }
  37 a {
  38   position: absolute;
  39   top:0; height:3px; right:0;
  40   background: cyan;
  41   grid-column: auto / auto;
  42 }
  43 b {
  44   position: absolute;
  45   left:0; bottom:0; height:3px; width:103px;
  46   background: brown;
  47   grid-column: auto / auto;
  48 }
  49 .c2 b {width:100px;}
  50 c {
  51   position: absolute;
  52   left:0; bottom:5px; height:3px; right:0;
  53   background: pink;
  54   grid-column: auto / auto;
  55 }
  56 d {
  57   position: absolute;
  58   left:23px; bottom:10px; height:3px; width:60px;
  59   background: silver;
  60   grid-column: auto / auto;
  61 }
  62 e {
  63   position: absolute;
  64   left:0; bottom:15px; height:3px; right:0;
  65   background: magenta;
  66   grid-column: auto / auto;
  67 }
  68 f {
  69   position: absolute;
  70   left:0; bottom:20px; height:3px; width:83px;
  71   background: orange;
  72   grid-column: auto / auto;
  73 }
  74 .c2 f {width:80px;}
  75
  76 x:first-of-type {
  77   background: lime;
  78 }
  79 x:nth-of-type(1) { grid-area:1/1; }
  80 x:nth-of-type(2) { grid-area:1/2; }
  81 x:nth-of-type(3) { grid-area:1/3; }
  82 x:nth-of-type(4) { grid-area:1/4; }
  83 x:nth-of-type(5) { grid-area:1/5; }
  84
  85 x:last-of-type {
  86   background: blue;
  87 }
  88
  89 .t1 x:last-of-type {
  90   grid-column-end:-1;
  91 }
  92
  93 float { float:left; margin-right:20px; }
  94
  95 .m x:first-of-type , .n x:first-of-type {
  96   background: cyan;
  97   grid-area:1/2;
  98 }
  99
 100 .n x:nth-of-type(2) , .o x:nth-of-type(2) {
 101   background: purple;
 102   grid-area:1/4;
 103 }
 104
 105 .c1 y, .c3 y:first-of-type { grid-column: span X / 1; background:black; }
 106 .c2 y, .c3 y:last-of-type { grid-column: -1 / span X; background:black; }
 107
 108 .s2 { left: 23px; }
 109 .s2a { left: 20px; }
 110 .e5 { right: 82px; }
 111 .e5a { right: 75px; }
 112 .e5b { right: 67px; }
 113 .e6 { right: 62px; }
 114 .e6a { right: 55px; }
 115 .e6b { right: 47px; }
 116 .c2 d { left:20px; }
 117 .t2.x4 f, .t2.x3 f { width:63px; }
 118 .c2.t2.x4 f, .c2.t2.x3 f { width:60px; }
 119 .t2.x4 d, .t2.x3 d { width:40px; }
 120 .x2 d { width:20px; }
 121 .x2 f { width:43px; }
 122 .c2.x2 f { width:40px; }
 123
 124 .t2.x5 b { width:83px; }
 125 .c2.t2.x5 b { width:80px; }
 126 .t2.x4 b, .t2.x3 b { width:63px; }
 127 .c2.t2.x4 b, .c2.t2.x3 b { width:60px; }
 128 .x2 b { width:43px; }
 129 .c2.x2 b { width:40px; }
 130
 131 .t1.x5 c, .t1.x4 c, .t1.x3 c { left:83px; width:20px; right:auto; }
 132 .c2.x5 c , .c2.t1.x4 c , .c2.t1.x3 c { left:80px; }
 133 .t2.x5 c { left:83px; }
 134 .c2.t2.x5 c { left:80px; }
 135 .t2.x4 c , .t2.x3 c { left:63px; }
 136 .c2.t2.x4 c , .c2.t2.x3 c { left:60px; }
 137 .t1.x2 c , .t2.x2 c { left:43px; }
 138 .c2.t2.x2 c , .c2.t1.x2 c { left:40px;}
 139
 140 .x2 e { left:23px; width:20px; right:auto; }
 141 .c2.x2 e { left:20px;  }
 142 .t1.c3.x2 e { width:20px; }
 143 .t1.c3.x2 c { width:20px; right:auto;}
 144
 145 .t2.x5 e { left:23px; width:60px; }
 146 .x4 e , .x3 e , .x2 e { left:23px; }
 147 .c2.x4 e , .c2.x3 e , .c2.x2 e { left:20px; }
 148 .c2.t2.x5 e { left:20px; }
 149 .t1.x4 e , .t1.x3 e { width:80px; }
 150 .t2.x4 e , .t2.x3 e { width:40px; }
 151
 152 </style>
 153 </head>
 154 <body>
 155
 156 <float>
 157 <div class="grid c1 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e class="s2 e6"></e><f class="e5"></f><x></x></div>
 158 <div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div>
 159 <div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div>
 160
 161 <div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
 162 <div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
 163 <div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
 164
 165 <div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
 166 <div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 167 <div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 168
 169 <div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
 170 <div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f></f><x></x></div>
 171 <div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
 172
 173 <div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
 174 <div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 175 <div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 176
 177 <div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
 178 <div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
 179 <div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
 180 </float>
 181
 182 <float>
 183 <div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
 184 <div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
 185 <div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
 186
 187 <div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
 188 <div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
 189 <div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
 190 </float>
 191
 192 </body>
 193 </html>