range-percent-intrinsic-size-2b-ref.html (2327B)
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 n" 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: min-content / 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 <br> 73 <br> 74 75 <div style="height:30px"><div> 76 <input type="range" class="mb n" orient="vertical"> 77 </div></div> 78 79 <div class="grid" style="grid: min-content / auto"> 80 <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1"> 81 <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1"> 82 </div> 83 84 <div class="grid" style="grid: 30px / auto"> 85 <input type="range" class="b" orient="vertical" style="height:15px"> 86 </div> 87 88 <div class="grid" style="grid: 30px / auto"> 89 <input type="range" class="b" orient="vertical" style="height:15px"> 90 </div> 91 92 </body></html>