tor-browser

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

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

      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 block-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-2a-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.b {
     21  height: 50%;
     22  min-height: min-content;
     23  background: lime;
     24 }
     25 
     26 input.mb {
     27  max-height: 50%;
     28  min-height: min-content;
     29  background: lime;
     30 }
     31 
     32 input.b.min-auto, input.mb.min-auto {
     33  min-height: auto;
     34 }
     35 
     36 div {
     37  display: inline-block;
     38  border:1px solid;
     39 }
     40 
     41 .grid {
     42  display: inline-grid;
     43  grid: auto / min-content;
     44  place-items: start;
     45 }
     46 
     47 </style></head><body>
     48 
     49 <div style="height:30px"><div>
     50  <input type="range" class="b" orient="vertical">
     51 </div></div>
     52 
     53 <div class="grid" style="grid: min-content / auto">
     54  <input type="range" class="b" orient="vertical">
     55 </div>
     56 
     57 <div class="grid" style="grid: minmax(min-content,30px) / auto">
     58  <input type="range" class="b" orient="vertical">
     59 </div>
     60 
     61 <div class="grid" style="grid: minmax(auto,30px) / auto">
     62  <input type="range" class="b" orient="vertical">
     63 </div>
     64 
     65 <div class="grid" style="grid: minmax(auto,30px) / auto">
     66  <input type="range" class="b min-auto" orient="vertical">
     67 </div>
     68 
     69 <br>
     70 <br>
     71 
     72 <div style="height:30px"><div>
     73  <input type="range" class="mb" orient="vertical">
     74 </div></div>
     75 
     76 <div class="grid" style="grid: minmax(min-content,30px) / auto">
     77  <input type="range" class="mb" orient="vertical">
     78 </div>
     79 
     80 <div class="grid" style="grid: minmax(auto,30px) / auto">
     81  <input type="range" class="mb" orient="vertical">
     82 </div>
     83 
     84 <div class="grid" style="grid: minmax(auto,30px) / auto">
     85  <input type="range" class="mb min-auto" orient="vertical">
     86 </div>
     87 
     88 </body></html>