grid-auto-min-sizing-intrinsic-004-ref.html (2215B)
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 <style type="text/css"> 11 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 float: left; 16 width: 60px; 17 grid-template-columns: 30px 30px; 18 grid-auto-rows: 30px; 19 align-items: start; 20 justify-items: start; 21 border: 3px solid blue; 22 writing-mode: vertical-rl; 23 direction: ltr; 24 margin-left: 50px; 25 } 26 span { 27 border: 1px solid; 28 background: lime; 29 min-width:0; 30 min-height:0; 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 style="height:max-content">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;height:max-content;width:max-content">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%;height:max-content">IAmReallyTall</span> 69 <span>c</span> 70 <span style="font-size:72px; width:10px;height:max-content">SameHere</span> 71 <span style="font-size:72px; width:40px;height:max-content">SameHere</span> 72 </div> 73 74 </body> 75 </html>