tor-browser

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

range-percent-intrinsic-size-1.html (3358B)

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