tor-browser

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

range-percent-intrinsic-size-1-ref.html (3269B)

      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 inline-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.i {
     18  min-width: 0;
     19  background: lime;
     20 }
     21 
     22 input.mi {
     23  min-width: 0;
     24  max-width: 100%;
     25  width: max-content;
     26  background: lime;
     27 }
     28 
     29 .n {
     30  -webkit-appearance: none;
     31 }
     32 
     33 div {
     34  display: inline-block;
     35  border:1px solid;
     36 }
     37 
     38 .grid {
     39  display: inline-grid;
     40  grid: auto / min-content;
     41  place-items: start;
     42 }
     43 
     44 .outerFlex {
     45  display: flex;
     46  width: 100px;
     47  border: 1px solid black;
     48 }
     49 .innerFlex {
     50  display: grid;
     51  border: 1px solid pink;
     52 }
     53 .innerFlex > input {
     54  min-width: 0;
     55  justify-self: stretch;
     56  background: yellow;
     57  -moz-appearance: none;
     58  -webkit-appearance: none;
     59 }
     60 
     61 </style></head><body>
     62 
     63 <div style="width:30px"><div style="width:28px">
     64  <input type="range" class="i" style="width:14px; margin-right:0">
     65 </div></div>
     66 
     67 <div style="width:200px"><div style="">
     68  <input type="range" class="i" style="max-width:50%">
     69 </div></div>
     70 
     71 <div class="grid" style="grid-template-columns:30px">
     72  <input type="range" class="i" style="width:15px">
     73 </div>
     74 
     75 <div class="grid" style="grid-template-columns:30px">
     76  <input type="range" class="i" style="width:15px">
     77 </div>
     78 
     79 <div class="grid" style="grid-template-columns:30px">
     80  <input type="range" class="i min-auto" style="width:15px">
     81 </div>
     82 
     83 <div style="width:30px"><div style="width:28px;">
     84  <input type="range" class="i n" style="width:14px; margin-right:0">
     85 </div></div>
     86 
     87 <div class="grid" style="grid-template-columns:30px">
     88  <input type="range" class="i n" style="width:15px">
     89 </div>
     90 
     91 <div class="grid" style="grid-template-columns:30px">
     92  <input type="range" class="i n" style="width:15px">
     93 </div>
     94 
     95 <div class="grid" style="grid-template-columns:30px">
     96  <input type="range" class="i n min-auto" style="width:15px">
     97 </div>
     98 
     99 <br>
    100 <br>
    101 
    102 <div style="width:30px"><div>
    103  <input type="range" class="mi">
    104 </div></div>
    105 
    106 <div class="grid">
    107  <input type="range" class="mi">
    108 </div>
    109 
    110 <div class="grid" style="grid-template-columns:minmax(min-content,30px)">
    111  <input type="range" class="mi">
    112 </div>
    113 
    114 <div class="grid" style="grid-template-columns:minmax(auto,30px)">
    115  <input type="range" class="mi">
    116 </div>
    117 
    118 <div style="width:30px"><div>
    119  <input type="range" class="mi n">
    120 </div></div>
    121 
    122 <div style="width:30px"><div style="width:max-content">
    123  <input type="range" class="mi n" style="width:50%">
    124 </div></div>
    125 
    126 <div class="grid">
    127  <input type="range" class="mi n">
    128 </div>
    129 
    130 <div class="grid" style="grid-template-columns:minmax(min-content,30px)">
    131  <input type="range" class="mi n">
    132 </div>
    133 
    134 <div class="grid" style="grid-template-columns:minmax(auto,30px)">
    135  <input type="range" class="mi n">
    136 </div>
    137 
    138 <div class="grid" style="width:30px; grid-template-columns:15px">
    139  <input type="range" class="mi n min-auto">
    140 </div>
    141 
    142 <br>
    143 <br>
    144 
    145 <div class="outerFlex">
    146  <div class="innerFlex">
    147    <input type="range">
    148  </div>
    149  abc
    150 </div>
    151 
    152 </body></html>