grid-clamping-001.html (2317B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Testcase for bug 1229999</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 position: fixed; 10 bottom: 0; 11 display: grid; 12 grid-auto-rows: 1px; 13 grid-auto-columns: 10px; 14 border: 1px solid; 15 } 16 17 x { 18 position: absolute; 19 grid-row-start: span 2; 20 top:0; bottom:0; left:10px; width:20px; 21 background: grey; 22 } 23 y { background:blue; } 24 y:nth-of-type(2n+1) { background:lime; } 25 </style> 26 </head> 27 <body> 28 29 <div class="grid"> 30 <span style="grid-row-start: A -4;"></span> 31 <span style="grid-row-end: span 134217729; background:yellow"></span> 32 <y></y><y></y><y></y><y></y><y></y><y></y> 33 <y></y><y></y><y></y><y></y><y></y><y></y> 34 <x></x> 35 </div> 36 37 <div class="grid" style="left:50px;"> 38 <span style="grid-row-start: A -3;"></span> 39 <span style="grid-row-end: span 134217729; 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-start: A -2;"></span> 47 <span style="grid-row-end: span 134217729; background:yellow"></span> 48 <y></y><y></y><y></y><y></y><y></y><y></y> 49 <y></y><y></y><y></y><y></y><y></y><y></y> 50 <x></x> 51 </div> 52 53 <div class="grid" style="left:150px;"> 54 <span style="grid-row-start: A -1;"></span> 55 <span style="grid-row-end: span 134217729; background:yellow"></span> 56 <y></y><y></y><y></y><y></y><y></y><y></y> 57 <y></y><y></y><y></y><y></y><y></y><y></y> 58 <x></x> 59 </div> 60 61 <div class="grid" style="left:150px;"> 62 <span style="grid-row-start: 1;"></span> 63 <span style="grid-row-end: span 134217729; background:yellow"></span> 64 <y></y><y></y><y></y><y></y><y></y><y></y> 65 <y></y><y></y><y></y><y></y><y></y><y></y> 66 <x></x> 67 </div> 68 69 <div class="grid" style="left:200px;"> 70 <span style="grid-row-end: span 134217729; background:yellow"></span> 71 <y></y><y></y><y></y><y></y><y></y><y></y> 72 <y></y><y></y><y></y><y></y><y></y><y></y> 73 <x></x> 74 </div> 75 76 77 </body> 78 </html>