grid-auto-min-sizing-intrinsic-004.html (2210B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: min-width|min-height:auto w. vertical writing-mode</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> 11 <link rel="match" href="grid-auto-min-sizing-intrinsic-004-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 float: left; 18 width: 60px; 19 grid-template-columns: 30px 30px; 20 grid-auto-rows: 30px; 21 align-items: start; 22 justify-items: start; 23 border: 3px solid blue; 24 writing-mode: vertical-rl; 25 direction: ltr; 26 margin-left: 50px; 27 } 28 span { 29 border: 1px solid; 30 background: lime; 31 } 32 pre { 33 writing-mode: vertical-rl; 34 direction: ltr; 35 float: left; 36 } 37 </style> 38 </head> 39 <body> 40 41 <div class="grid" style="margin-left:0"> 42 <span>a</span> 43 <span>IAmReallyWideAndTheBorderShouldSurroundMe</span> 44 </div> 45 46 <pre>The border shouldn't shrink-wrap the wide text below, due to definite "height" values:</pre> 47 <div class="grid"> 48 <span>a</span> 49 <span style="height: 130%">IAmReallyWideButIHaveADefiniteHeightSoIOverflow</span> 50 <span>c</span> 51 <span style="height: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> 52 <span style="height: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span> 53 <span style="height: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span> 54 </div> 55 56 <pre>Now the same tests for 'width':</pre> 57 58 <div class="grid" style="margin-bottom:50px;"> 59 <span>a</span> 60 <span style="font-size:72px">IAmReallyTall</span> 61 <span>c</span> 62 <span>d</span> 63 </div> 64 65 <pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre> 66 <div class="grid"> 67 <span>a</span> 68 <span style="font-size:72px; width:10%">IAmReallyTall</span> 69 <span>c</span> 70 <span style="font-size:72px; width:10px">SameHere</span> 71 <span style="font-size:72px; width:40px">SameHere</span> 72 </div> 73 74 </body> 75 </html>