grid-repeat-auto-fill-fit-007.html (7124B)
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</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1237805"> 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-007-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 .m x:first-child , .n x:first-child { 91 background: cyan; 92 grid-column:2; 93 } 94 95 .n x:nth-child(2) , .o x:nth-child(2) { 96 background: purple; 97 grid-column:4; 98 } 99 100 </style> 101 </head> 102 <body> 103 104 <float> 105 <div class="grid c1 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 106 <div class="grid c2 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 107 <div class="grid c3 t1 n"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 108 109 <div class="grid c1 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 110 <div class="grid c2 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 111 <div class="grid c3 t2 m"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 112 113 <div class="grid c1 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 114 <div class="grid c2 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 115 <div class="grid c3 t1 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 116 117 <div class="grid c1 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 118 <div class="grid c2 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 119 <div class="grid c3 t2 o"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 120 121 <div class="grid c1 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 122 <div class="grid c2 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 123 <div class="grid c3 t1 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 124 125 <div class="grid c1 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 126 <div class="grid c2 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 127 <div class="grid c3 t2 n"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 128 </float> 129 130 <float> 131 <div class="grid c1 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 132 <div class="grid c2 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 133 <div class="grid c3 t1 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 134 135 <div class="grid c1 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 136 <div class="grid c2 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 137 <div class="grid c3 t2 n"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div> 138 </float> 139 140 <script> 141 function testGridTemplateColumns(elem, expected) { 142 var actual = window.getComputedStyle(elem).gridTemplateColumns; 143 if (actual != expected) { 144 var err = "FAIL: gridTemplateColumns " + elem.className + 145 ", GOT=" + actual + 146 ", EXPECTED=" + expected; 147 document.body.appendChild(document.createTextNode(err)); 148 } 149 } 150 var a1 = [ 151 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px", 152 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", 153 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", 154 "[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d] 20px", 155 "[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", 156 "[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c d] 20px", 157 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px", 158 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px", 159 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px", 160 "[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 161 "[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px", 162 "[a b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px" 163 ]; 164 var a2 = [ 165 "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", 166 "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]", 167 "[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d]", 168 "[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d]", 169 "[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]", 170 "[a b] 20px [c b] 0px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d]", 171 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]", 172 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]", 173 "[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c d]", 174 "[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]", 175 "[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]", 176 "[a b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]" 177 ]; 178 function runTest() { 179 var t1 = document.querySelectorAll('.t1'); 180 for (var i = 0; i < t1.length; ++i) { 181 testGridTemplateColumns(t1[i], a1[i]); 182 } 183 var t2 = document.querySelectorAll('.t2'); 184 for (var i = 0; i < t2.length; ++i) { 185 testGridTemplateColumns(t2[i], a2[i]); 186 } 187 188 document.documentElement.className=''; 189 } 190 document.addEventListener('MozReftestInvalidate', runTest); 191 192 </script> 193 194 </body> 195 </html>