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.html (2004B)

      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</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-003-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  width: 60px;
     18  grid-template-columns: 30px 30px;
     19  grid-auto-rows: 30px;
     20  align-items: start;
     21  justify-items: start;
     22  border: 3px solid blue;
     23 }
     24 span {
     25  border: 1px solid;
     26  background: lime;
     27 }
     28 </style>
     29 </head>
     30 <body>
     31 
     32 <div class="grid">
     33  <span>a</span>
     34  <span>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">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%">IAmReallyTall</span>
     60  <span>c</span>
     61  <span style="font-size:72px; height:10px">SameHere</span>
     62  <span style="font-size:72px; height:40px">SameHere</span>
     63 </div>
     64 
     65 </body>
     66 </html>