firefox-bug-1881495.html (1493B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1881671"> 6 <link rel="match" href="firefox-bug-1881495-ref.html"> 7 <meta name="assert" content="An auto-block-size grid should choose a content-based block-size that accounts for linewrapping in its content-sized items"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 9 <style> 10 :root { 11 font: 30px/1 Ahem; 12 } 13 .grid { 14 display: inline-grid; 15 border: 4px solid gray; 16 justify-items: start; 17 vertical-align: top; 18 } 19 .negMargin { 20 margin-inline-end: -1px; 21 } 22 </style> 23 <div class="grid" style="inline-size: 1em"> 24 <div> 25 X 26 <span class="negMargin">X</span> 27 </div> 28 </div> 29 <div class="grid" style="inline-size: 2em"> 30 <div> 31 X 32 <span class="negMargin">X</span> 33 </div> 34 </div> 35 <div class="grid" style="inline-size: 3em"> 36 <div> 37 X 38 <span class="negMargin">X</span> 39 </div> 40 </div> 41 <br> 42 <br> 43 <div class="grid" style="writing-mode: vertical-rl; inline-size: 1em"> 44 <div> 45 X 46 <span class="negMargin">X</span> 47 </div> 48 </div> 49 <div class="grid" style="writing-mode: vertical-rl; inline-size: 2em"> 50 <div> 51 X 52 <span class="negMargin">X</span> 53 </div> 54 </div> 55 <div class="grid" style="writing-mode: vertical-rl; inline-size: 3em"> 56 <div> 57 X 58 <span class="negMargin">X</span> 59 </div> 60 </div>