grid-clamping-002.html (2169B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Testcase: Clamp number of auto-fill tracks</title> 5 <style type="text/css"> 6 html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; } 7 8 .grid { 9 display: grid; 10 position: fixed; 11 bottom: 0; 12 height: 9999px; /* results in 9999 rows, i.e. the max line is 10000 */ 13 grid-template-rows: repeat(auto-fill, 1px); 14 grid-template-columns: 10px; 15 grid-auto-flow: column; 16 border: 1px solid; 17 } 18 19 x { 20 position: absolute; 21 grid-row-start: span 2; 22 top:0; bottom:0; left:10px; width:20px; 23 background: grey; 24 } 25 y { background:blue; } 26 y:nth-of-type(2n+1) { background:lime; } 27 </style> 28 </head> 29 <body> 30 31 <div class="grid"> 32 <span style="grid-row: 1/ span 9995; background:yellow"></span> 33 <y></y><y></y><y></y><y></y><y></y><y></y> 34 <y></y><y></y><y></y><y></y><y></y><y></y> 35 <x></x> 36 </div> 37 38 <div class="grid" style="left:50px;"> 39 <span style="grid-row: 1/ span 9996; background:yellow"></span> 40 <y></y><y></y><y></y><y></y><y></y><y></y> 41 <y></y><y></y><y></y><y></y><y></y><y></y> 42 <x></x> 43 </div> 44 45 <div class="grid" style="left:100px;"> 46 <span style="grid-row: 1/ span 9997; background:yellow"></span> 47 <y></y><y></y><y></y><y></y><y></y><y></y> 48 <y></y><y></y><y></y><y></y><y></y><y></y> 49 <x></x> 50 </div> 51 52 <div class="grid" style="left:150px;"> 53 <span style="grid-row: 1/ span 9998; background:yellow"></span> 54 <y></y><y></y><y></y><y></y><y></y><y></y> 55 <y></y><y></y><y></y><y></y><y></y><y></y> 56 <x></x> 57 </div> 58 59 <div class="grid" style="left:150px;"> 60 <span style="grid-row: 1/ span 9999; background:yellow"></span> 61 <y></y><y></y><y></y><y></y><y></y><y></y> 62 <y></y><y></y><y></y><y></y><y></y><y></y> 63 <x></x> 64 </div> 65 66 <div class="grid" style="left:200px;"> 67 <span style="grid-row: 1/ span 10000; background:yellow"></span> 68 <y></y><y></y><y></y><y></y><y></y><y></y> 69 <y></y><y></y><y></y><y></y><y></y><y></y> 70 <x></x> 71 </div> 72 73 74 </body> 75 </html>