grid-auto-repeat-multiple-values-002-ref.html (1401B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat"> 5 <head> 6 <style> 7 8 .grid-container { 9 height: 30px; 10 width: 300px; 11 border-bottom: 2px solid #cfbfcf; 12 } 13 14 .grid-container > * { float: left; height: 30px; } 15 .grid-container > :nth-child(2n) { background: sienna; } 16 .grid-container > :nth-child(2n + 1) { background: orange; } 17 18 </style> 19 </head> 20 21 <body> 22 <p>The test passes if it has the same visual effect as reference.</p> 23 <div class="grid-container"> 24 <div style="width: 10px;"></div> 25 <div style="width: 20px;"></div> 26 <div style="width: 30px;"></div> 27 <div style="width: 40px;"></div> 28 <div style="width: 30px;"></div> 29 <div style="width: 40px;"></div> 30 </div> 31 <div class="grid-container"> 32 <div style="width: 10px;"></div> 33 <div style="width: 20px;"></div> 34 <div style="width: 30px;"></div> 35 <div style="width: 40px;"></div> 36 <div style="width: 30px;"></div> 37 <div style="width: 50px; margin-left: 40px;"></div> 38 </div> 39 <div class="grid-container"> 40 <div style="width: 20px; margin-left: 10px"></div> 41 <div style="width: 30px;"></div> 42 <div style="width: 30px; margin-left: 40px;"></div> 43 <div style="width: 40px;"></div> 44 <div style="width: 50px;"></div> 45 <div style="width: 60px;"></div> 46 </div> 47 </body> 48 49 </html>