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>