grid-support-named-grid-lines-002-ref.html (5697B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> 5 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> 6 <style> 7 8 .holder { 9 width: 300px; 10 height: 20px; 11 border-bottom: 2px solid #cfbfcf; 12 } 13 14 .holder > :nth-child(2) { 15 clear: left; /* Forces the div to a new line to simulate a new grid row. */ 16 padding-top: 2px; /* Simulates the grid row gap. */ 17 } 18 19 .grid-container > * { float: left; height: 8px; } 20 21 .grid-container > :nth-child(3n) { background: sienna; } 22 .grid-container > :nth-child(3n+1) { background: gold; } 23 .grid-container > :nth-child(3n+2) { background: orange; } 24 25 .alt-color > :nth-child(2n) { background: sienna; } 26 .alt-color > :nth-child(2n+1) { background: orange; } 27 28 .invis { width: 0px; visibility: none; } 29 30 </style> 31 32 <p>The test passes if it has the same visual effect as reference.</p> 33 34 <div class="holder"> 35 <div class="grid-container"> 36 <div style="width:30px; margin-left:30px"></div> 37 </div> 38 </div> 39 40 <div class="holder"> 41 <div class="grid-container"> 42 <div style="width:50px; margin-left:170px"></div> 43 </div> 44 </div> 45 46 <div class="holder"> 47 <div class="grid-container"> 48 <div style="width:30px; margin-left:30px"></div> 49 <div style="width:30px; margin-left:40px"></div> 50 <div style="width:40px;"></div> 51 <div style="width:50px;"></div> 52 <div style="width:60px;"></div> 53 </div> 54 </div> 55 56 <div class="holder"> 57 <div class="grid-container"> 58 <div style="width:10px;"></div> 59 <div style="width:30px; margin-left:20px"></div> 60 <div style="width:30px; margin-left:40px"></div> 61 <div style="width:40px;"></div> 62 <div style="width:50px;"></div> 63 <div style="width:60px;"></div> 64 </div> 65 </div> 66 67 <div class="holder"> 68 <div class="grid-container"> 69 <div style="width:30px; margin-left:30px"></div> 70 <div style="width:50px; margin-left:110px"></div> 71 <div style="width:60px;"></div> 72 </div> 73 <div class="grid-container"> 74 <div style="width:10px"></div> 75 </div> 76 </div> 77 78 <div class="holder"> 79 <div class="grid-container"> 80 <div style="width:10px;"></div> 81 <div style="width:30px; margin-left:20px"></div> 82 <div style="width:50px; margin-left:110px"></div> 83 <div style="width:60px;"></div> 84 </div> 85 <div class="grid-container"> 86 <div class="invis"></div> 87 <div style="width:10px;"></div> 88 </div> 89 </div> 90 91 <div class="holder"> 92 <div class="grid-container"> 93 <div style="width:50px; margin-left:10px;"></div> 94 <div style="width:40px;"></div> 95 <div style="width:30px;"></div> 96 <div style="width:40px;"></div> 97 <div style="width:50px;"></div> 98 </div> 99 </div> 100 101 <div class="holder"> 102 <div class="grid-container"> 103 <div style="width:90px; margin-left:10px;"></div> 104 <div style="width:30px;"></div> 105 <div style="width:40px;"></div> 106 <div style="width:50px;"></div> 107 <div style="width:60px;"></div> 108 </div> 109 </div> 110 111 <div class="holder"> 112 <div class="grid-container"> 113 <div class="invis"></div> 114 <div style="width:10px;"></div> 115 <div class="invis"></div> 116 <div style="width:90px;"></div> 117 <div class="invis"></div> 118 <div style="width:30px;"></div> 119 <div style="width:40px;"></div> 120 </div> 121 </div> 122 123 <div class="holder"> 124 <div class="grid-container alt-color"> 125 <div class="invis"></div> 126 <div style="width:10px;"></div> 127 <div style="width:120px;"></div> 128 <div style="width:40px;"></div> 129 </div> 130 </div> 131 132 <div class="holder"> 133 <div class="grid-container"> 134 <div style="width:10px;"></div> 135 <div style="width:90px;"></div> 136 <div style="width:30px;"></div> 137 <div style="width:40px;"></div> 138 <div style="width:50px;"></div> 139 </div> 140 </div> 141 142 <div class="holder"> 143 <div class="grid-container"> 144 <div class="invis"></div> 145 <div style="width:10px;"></div> 146 <div class="invis"></div> 147 <div style="width:50px;"></div> 148 <div class="invis"></div> 149 <div style="width:40px;"></div> 150 <div style="width:30px;"></div> 151 </div> 152 </div> 153 154 <div class="holder"> 155 <div class="grid-container alt-color"> 156 <div class="invis"></div> 157 <div style="width:10px;"></div> 158 <div style="width:90px;"></div> 159 <div style="width:30px;"></div> 160 </div> 161 </div> 162 163 <div class="holder"> 164 <div class="grid-container"> 165 <div style="width:10px;"></div> 166 <div style="width:50px;"></div> 167 <div style="width:40px;"></div> 168 <div style="width:30px;"></div> 169 <div style="width:40px;"></div> 170 </div> 171 </div> 172 173 <div class="holder"> 174 <div class="grid-container"> 175 <div style="width:10px;"></div> 176 <div style="width:20px;"></div> 177 <div style="width:140px;"></div> 178 <div style="width:50px;"></div> 179 </div> 180 </div> 181 182 <div class="holder"> 183 <div class="grid-container"> 184 <div style="width:10px;"></div> 185 <div class="invis"></div> 186 <div style="width:20px;"></div> 187 <div class="invis"></div> 188 <div style="width:140px;"></div> 189 </div> 190 </div> 191 192 <div class="holder"> 193 <div class="grid-container alt-color"> 194 <div style="width:30px;"></div> 195 <div style="width:140px;"></div> 196 </div> 197 </div> 198 199 <div class="holder"> 200 <div class="grid-container"> 201 <div class="invis"></div> 202 <div style="width:10px;"></div> 203 <div class="invis"></div> 204 <div style="width:140px; margin-left:20px;"></div> 205 </div> 206 </div> 207 208 <div class="holder"> 209 <div class="grid-container"> 210 <div class="invis"></div> 211 <div style="width:10px;"></div> 212 <div class="invis"></div> 213 <div style="width:210px;"></div> 214 </div> 215 </div>