tor-browser

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

range-percent-intrinsic-size-2a-ref.html (2196B)

      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: INPUT type=range percent intrinsic block-size</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959">
     10  <style>
     11 html,body {
     12  color:black; background-color:white; font:16px/1 monospace;
     13 }
     14 
     15 input { margin: 2px; }
     16 
     17 input.b {
     18  min-height: 0;
     19  background: lime;
     20 }
     21 
     22 input.mb {
     23  min-height: 0;
     24  max-height: 100%;
     25  background: lime;
     26 }
     27 
     28 div {
     29  display: inline-block;
     30  border:1px solid;
     31 }
     32 
     33 .grid {
     34  display: inline-grid;
     35  grid: auto / min-content;
     36  place-items: start;
     37 }
     38 
     39 </style></head><body>
     40 
     41 <div style="height:30px"><div>
     42  <input type="range" class="b" orient="vertical">
     43 </div></div>
     44 
     45 <div class="grid" style="grid: min-content / auto">
     46  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
     47  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
     48 </div>
     49 
     50 <div class="grid" style="grid: minmax(min-content,30px) / auto">
     51  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
     52  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
     53 </div>
     54 
     55 <div class="grid" style="grid: 30px / auto">
     56  <input type="range" class="b" orient="vertical" style="height:15px">
     57 </div>
     58 
     59 <div class="grid" style="grid: 30px / auto">
     60  <input type="range" class="b" orient="vertical" style="height:15px">
     61 </div>
     62 
     63 <br>
     64 <br>
     65 
     66 <div style="height:30px"><div>
     67  <input type="range" class="mb" orient="vertical">
     68 </div></div>
     69 
     70 <div class="grid" style="grid: minmax(min-content,30px) / auto">
     71  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
     72  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
     73 </div>
     74 
     75 <div class="grid" style="grid: 30px / auto">
     76  <input type="range" class="b" orient="vertical" style="height:15px">
     77 </div>
     78 
     79 <div class="grid" style="grid: 30px / auto">
     80  <input type="range" class="b" orient="vertical" style="height:15px">
     81 </div>
     82 
     83 </body></html>