tor-browser

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

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


      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 .n {
     29  -webkit-appearance: none;
     30 }
     31 
     32 div {
     33  display: inline-block;
     34  border:1px solid;
     35 }
     36 
     37 .grid {
     38  display: inline-grid;
     39  grid: auto / min-content;
     40  place-items: start;
     41 }
     42 input[orient="vertical"] {
     43  -webkit-appearance: slider-vertical;
     44  -webkit-appearance: range;
     45  appearance: auto;
     46 }
     47 
     48 </style></head><body>
     49 
     50 <div style="height:30px"><div>
     51  <input type="range" class="b" orient="vertical">
     52 </div></div>
     53 
     54 <div class="grid" style="grid: min-content / auto">
     55  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
     56  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
     57 </div>
     58 
     59 <div class="grid" style="grid: minmax(min-content,30px) / auto">
     60  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
     61  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
     62 </div>
     63 
     64 <div class="grid" style="grid: 30px / auto">
     65  <input type="range" class="b" orient="vertical" style="height:15px">
     66 </div>
     67 
     68 <div class="grid" style="grid: 30px / auto">
     69  <input type="range" class="b" orient="vertical" style="height:15px">
     70 </div>
     71 
     72 <div style="height:30px"><div>
     73  <input type="range" class="b n" orient="vertical">
     74 </div></div>
     75 
     76 <div class="grid" style="grid: min-content / auto">
     77  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
     78  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
     79 </div>
     80 
     81 <div class="grid" style="grid: minmax(min-content,30px) / auto">
     82  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
     83  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
     84 </div>
     85 
     86 <div class="grid" style="grid: 30px / auto">
     87  <input type="range" class="b" orient="vertical" style="height:15px">
     88 </div>
     89 
     90 <div class="grid" style="grid: 30px / auto">
     91  <input type="range" class="b" orient="vertical" style="height:15px">
     92 </div>
     93 
     94 <br>
     95 <br>
     96 
     97 <div style="height:30px"><div>
     98  <input type="range" class="mb" orient="vertical">
     99 </div></div>
    100 
    101 <div class="grid" style="grid: min-content / auto">
    102  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
    103  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
    104 </div>
    105 
    106 <div class="grid" style="grid: minmax(min-content,30px) / auto">
    107  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
    108  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
    109 </div>
    110 
    111 <div class="grid" style="grid: 30px / auto">
    112  <input type="range" class="b" orient="vertical" style="height:15px">
    113 </div>
    114 
    115 <div class="grid" style="grid: 30px / auto">
    116  <input type="range" class="b" orient="vertical" style="height:15px">
    117 </div>
    118 
    119 <div style="height:30px"><div>
    120  <input type="range" class="mb n" orient="vertical">
    121 </div></div>
    122 
    123 <div class="grid" style="grid: min-content / auto">
    124  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
    125  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
    126 </div>
    127 
    128 <div class="grid" style="grid: minmax(min-content,30px) / auto">
    129  <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
    130  <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
    131 </div>
    132 
    133 <div class="grid" style="grid: 30px / auto">
    134  <input type="range" class="b" orient="vertical" style="height:15px">
    135 </div>
    136 
    137 <div class="grid" style="grid: 30px / auto">
    138  <input type="range" class="b" orient="vertical" style="height:15px">
    139 </div>
    140 
    141 </body></html>