tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

grid-auto-min-sizing-intrinsic-003-ref.html (2000B)

      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>Reference: min-width|min-height:auto</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  width: 60px;
     16  grid-template-columns: 30px 30px;
     17  grid-auto-rows: 30px;
     18  align-items: start;
     19  justify-items: start;
     20  border: 3px solid blue;
     21 }
     22 span {
     23  border: 1px solid;
     24  background: lime;
     25  min-width:0;
     26  min-height:0;
     27 }
     28 </style>
     29 </head>
     30 <body>
     31 
     32 <div class="grid">
     33  <span>a</span>
     34  <span style="width:max-content">IAmReallyWideAndTheBorderShouldSurroundMe</span>
     35 </div>
     36 
     37 <pre>The border shouldn't shrink-wrap the wide text below, due to definite "width" values:</pre>
     38 <div class="grid">
     39  <span>a</span>
     40  <span style="width: 130%">IAmReallyWideButIHaveADefiniteWidthSoIOverflow</span>
     41  <span>c</span>
     42  <span style="width: 50px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
     43  <span style="width: 20px">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span><span></span>
     44  <span style="width: 20px; grid-column:span 2;">SameHereeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
     45 </div>
     46 
     47 <pre>Now the same tests for 'height':</pre>
     48 
     49 <div class="grid" style="margin-bottom:50px;">
     50  <span>a</span>
     51  <span style="font-size:72px;width:max-content;height:max-content">IAmReallyTall</span>
     52  <span>c</span>
     53  <span>d</span>
     54 </div>
     55 
     56 The border shouldn't shrink-wrap the text vertically below, due to definite "height" values:
     57 <div class="grid">
     58  <span>a</span>
     59  <span style="font-size:72px; height:10%;width:max-content">IAmReallyTall</span>
     60  <span>c</span>
     61  <span style="font-size:72px; height:10px;width:max-content">SameHere</span>
     62  <span style="font-size:72px; height:40px;width:max-content">SameHere</span>
     63 </div>
     64 
     65 </body>
     66 </html>