grid-repeat-auto-fill-fit-006.html (8666B)
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.</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> 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-006-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-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d] 20px; 23 grid-gap: 2px; 24 width: 160px; 25 height: 30px; 26 } 27 28 .c1 { width: 160px; } 29 .c2 { width: 150px; } 30 .c3 { width: 140px; } 31 .p1 { padding-left:5px; } 32 33 .t2 { grid-template-columns: [a] repeat(auto-fit, [b] 20px [c]) [d]; } 34 35 x { 36 width: 18px; 37 border:1px solid; 38 background: grey; 39 } 40 a { 41 position: absolute; 42 left:0; top:0; height:3px; right:0; 43 background: cyan; 44 grid-column: 7 / auto; 45 } 46 b { 47 position: absolute; 48 left:0; bottom:0; height:3px; right:0; 49 background: brown; 50 grid-column: auto / 7; 51 } 52 c { 53 position: absolute; 54 left:0; bottom:5px; height:3px; right:0; 55 background: pink; 56 grid-column: 6 / 7; 57 } 58 d { 59 position: absolute; 60 left:0; bottom:10px; height:3px; right:0; 61 background: silver; 62 grid-column: 3 / 6; 63 } 64 e { 65 position: absolute; 66 left:0; bottom:15px; height:3px; right:0; 67 background: magenta; 68 grid-column: 3 / 7; 69 } 70 f { 71 position: absolute; 72 left:0; bottom:20px; height:3px; right:0; 73 background: orange; 74 grid-column: auto / 6; 75 } 76 77 x:first-child { 78 background: lime; 79 } 80 x:last-child { 81 background: blue; 82 } 83 84 .t1 x:last-child { 85 grid-column-end:-1; 86 } 87 88 float { float:left; margin-right:20px; } 89 90 </style> 91 </head> 92 <body> 93 94 <float> 95 <div class="grid c1 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 96 <div class="grid c2 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 97 <div class="grid c3 t1"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 98 99 <div class="grid c1 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 100 <div class="grid c2 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 101 <div class="grid c3 t2"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 102 103 <div class="grid c1 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 104 <div class="grid c2 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 105 <div class="grid c3 t1"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 106 107 <div class="grid c1 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 108 <div class="grid c2 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 109 <div class="grid c3 t2"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 110 111 <div class="grid c1 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 112 <div class="grid c2 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 113 <div class="grid c3 t1"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 114 115 <div class="grid c1 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 116 <div class="grid c2 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 117 <div class="grid c3 t2"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 118 </float> 119 120 <float> 121 <div class="grid c1 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 122 <div class="grid c2 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 123 <div class="grid c3 t1"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 124 125 <div class="grid c1 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 126 <div class="grid c2 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 127 <div class="grid c3 t2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 128 129 <div class="grid c1 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 130 <div class="grid c2 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 131 <div class="grid c3 t1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 132 133 <div class="grid c1 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 134 <div class="grid c2 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 135 <div class="grid c3 t2"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 136 137 <div class="grid c1 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> 138 <div class="grid c2 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> 139 <div class="grid c3 t1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> 140 141 <div class="grid c1 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> 142 <div class="grid c2 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> 143 <div class="grid c3 t2 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div> 144 </float> 145 146 <script> 147 function testGridTemplateColumns(elem, expected) { 148 var actual = window.getComputedStyle(elem).gridTemplateColumns; 149 if (actual != expected) { 150 var err = "FAIL: gridTemplateColumns " + elem.className + 151 ", GOT=" + actual + 152 ", EXPECTED=" + expected; 153 document.body.appendChild(document.createTextNode(err)); 154 } 155 } 156 var a1 = [ 157 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", 158 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 20px", 159 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 20px", 160 "[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 161 "[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", 162 "[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", 163 "[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 164 "[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 165 "[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 166 "[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 167 "[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 168 "[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 169 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 170 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 171 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 172 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 173 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 174 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px" 175 ]; 176 var a2 = [ 177 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", 178 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", 179 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", 180 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", 181 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", 182 "[a b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", 183 "[a 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] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", 185 "[a b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", 186 "[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 187 "[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 188 "[a b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 189 "[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 190 "[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 191 "[a b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 192 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 193 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 194 "[a b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]" 195 ]; 196 function runTest() { 197 var t1 = document.querySelectorAll('.t1'); 198 for (var i = 0; i < t1.length; ++i) { 199 testGridTemplateColumns(t1[i], a1[i]); 200 } 201 var t2 = document.querySelectorAll('.t2'); 202 for (var i = 0; i < t2.length; ++i) { 203 testGridTemplateColumns(t2[i], a2[i]); 204 } 205 206 document.documentElement.className=''; 207 } 208 document.addEventListener('MozReftestInvalidate', runTest); 209 210 </script> 211 212 </body> 213 </html>