grid-repeat-auto-fill-fit-008.html (10447B)
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>