layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.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 class="reftest-wait"><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   <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
  11   <link rel="match" href="grid-repeat-auto-fill-fit-008-ref.html">
  12   <style type="text/css">
  13 html,body {
  14     color:black; background-color:white; font-size:16px; padding:0; margin:0;
  15 }
  16
  17 .grid {
  18   display: grid;
  19   position: relative;
  20   border: 1px solid;
  21   grid-auto-rows: 30px;
  22   grid-auto-columns: 3px;
  23   grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px;
  24   height: 30px;
  25 }
  26
  27 .c1 { width: 165px; }
  28 .c2 { width: 155px; }
  29 .c3 { width: 150px; }
  30 .p1 { padding-left:5px; }
  31
  32 .t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
  33
  34 x {
  35   width: 18px;
  36   border:1px solid;
  37   background: grey;
  38 }
  39 a {
  40   position: absolute;
  41   left:0; top:0; height:3px; right:0;
  42   background: cyan;
  43   grid-column: 7 / auto;
  44 }
  45 b {
  46   position: absolute;
  47   left:0; bottom:0; height:3px; right:0;
  48   background: brown;
  49   grid-column: auto / 7;
  50 }
  51 c {
  52   position: absolute;
  53   left:0; bottom:5px; height:3px; right:0;
  54   background: pink;
  55   grid-column: 6 / 7;
  56 }
  57 d {
  58   position: absolute;
  59   left:0; bottom:10px; height:3px; right:0;
  60   background: silver;
  61   grid-column: 3 / 6;
  62 }
  63 e {
  64   position: absolute;
  65   left:0; bottom:15px; height:3px; right:0;
  66   background: magenta;
  67   grid-column: 3 / 7;
  68 }
  69 f {
  70   position: absolute;
  71   left:0; bottom:20px; height:3px; right:0;
  72   background: orange;
  73   grid-column: auto / 6;
  74 }
  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 </style>
 109 </head>
 110 <body>
 111
 112 <float>
 113 <div class="grid c1 t1 n"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 114 <div class="grid c2 t1 n"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 115 <div class="grid c3 t1 n"><x></x><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 116
 117 <div class="grid c1 t2 m"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 118 <div class="grid c2 t2 m"><x></x><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 119 <div class="grid c3 t2 m"><x></x><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 120
 121 <div class="grid c1 t1 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 122 <div class="grid c2 t1 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 123 <div class="grid c3 t1 o"><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 124
 125 <div class="grid c1 t2 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 126 <div class="grid c2 t2 o"><x></x><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 127 <div class="grid c3 t2 o"><x></x><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 128
 129 <div class="grid c1 t1 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 130 <div class="grid c2 t1 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 131 <div class="grid c3 t1 n"><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 132
 133 <div class="grid c1 t2 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 134 <div class="grid c2 t2 n"><x></x><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 135 <div class="grid c3 t2 n"><x></x><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 136 </float>
 137
 138 <float>
 139 <div class="grid c1 t1 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 140 <div class="grid c2 t1 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 141 <div class="grid c3 t1 n"><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 142
 143 <div class="grid c1 t2 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 144 <div class="grid c2 t2 n"><x></x><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 145 <div class="grid c3 t2 n"><x></x><y></y><y></y><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
 146 </float>
 147
 148 <script>
 149 function testGridTemplateColumns(elem, expected) {
 150   var actual = window.getComputedStyle(elem).gridTemplateColumns;
 151   if (actual != expected) {
 152     var err = "FAIL: gridTemplateColumns " + elem.className +
 153               ", GOT=" + actual +
 154               ", EXPECTED=" + expected;
 155     document.body.appendChild(document.createTextNode(err));
 156   }
 157   if (location.search.indexOf("no-implicit") !== -1) {
 158     /* This shouldn't change the layout */
 159     elem.style.gridTemplateColumns = actual;
 160   }
 161 }
 162 var a1 = [
 163 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 164 "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
 165 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
 166 "3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 167 "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
 168 "3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
 169 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 170 "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
 171 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
 172 "3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
 173 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px",
 174 "3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px"
 175 ];
 176 var a2 = [
 177 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 178 "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
 179 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
 180 "3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
 181 "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
 182 "3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
 183 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
 184 "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
 185 "3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
 186 "3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
 187 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
 188 "3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px"
 189 ];
 190
 191 if (location.search.indexOf("no-implicit") !== -1) {
 192   a1 = [
 193     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 194     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 195     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 196     "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 197     "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 198     "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 199     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 200     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 201     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
 202     "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
 203     "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
 204     "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
 205   ]
 206
 207   a2 = [
 208     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 209     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
 210     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
 211     "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
 212     "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 213     "[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 214     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
 215     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 216     "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 217     "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
 218     "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 219     "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
 220   ]
 221 }
 222
 223 function runTest() {
 224  var t1 = document.querySelectorAll('.t1');
 225  for (var i = 0; i < t1.length; ++i) {
 226    testGridTemplateColumns(t1[i], a1[i]);
 227  }
 228  var t2 = document.querySelectorAll('.t2');
 229  for (var i = 0; i < t2.length; ++i) {
 230    testGridTemplateColumns(t2[i], a2[i]);
 231  }
 232
 233  document.documentElement.className='';
 234 }
 235 document.addEventListener('MozReftestInvalidate', runTest);
 236
 237 </script>
 238
 239 </body>
 240 </html>