range-percent-intrinsic-size-2.html (3577B)
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-2-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 .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 input[orient="vertical"] { 51 -webkit-appearance: slider-vertical; 52 -webkit-appearance: range; 53 appearance: auto; 54 } 55 56 </style></head><body> 57 58 <div style="height:30px"><div> 59 <input type="range" class="b" orient="vertical"> 60 </div></div> 61 62 <div class="grid" style="grid: min-content / auto"> 63 <input type="range" class="b" orient="vertical"> 64 </div> 65 66 <div class="grid" style="grid: minmax(min-content,30px) / auto"> 67 <input type="range" class="b" orient="vertical"> 68 </div> 69 70 <div class="grid" style="grid: minmax(auto,30px) / auto"> 71 <input type="range" class="b" orient="vertical"> 72 </div> 73 74 <div class="grid" style="grid: minmax(auto,30px) / auto"> 75 <input type="range" class="b min-auto" orient="vertical"> 76 </div> 77 78 <div style="height:30px"><div> 79 <input type="range" class="b n" orient="vertical"> 80 </div></div> 81 82 <div class="grid" style="grid: min-content / auto"> 83 <input type="range" class="b n" orient="vertical"> 84 </div> 85 86 <div class="grid" style="grid: minmax(min-content,30px) / auto"> 87 <input type="range" class="b n" orient="vertical"> 88 </div> 89 90 <div class="grid" style="grid: minmax(auto,30px) / auto"> 91 <input type="range" class="b n" orient="vertical"> 92 </div> 93 94 <div class="grid" style="grid: minmax(auto,30px) / auto"> 95 <input type="range" class="b n min-auto" orient="vertical"> 96 </div> 97 98 99 <br> 100 <br> 101 102 <div style="height:30px"><div> 103 <input type="range" class="mb" orient="vertical"> 104 </div></div> 105 106 <div class="grid" style="grid: min-content / auto"> 107 <input type="range" class="mb" orient="vertical"> 108 </div> 109 110 <div class="grid" style="grid: minmax(min-content,30px) / auto"> 111 <input type="range" class="mb" orient="vertical"> 112 </div> 113 114 <div class="grid" style="grid: minmax(auto,30px) / auto"> 115 <input type="range" class="mb" orient="vertical"> 116 </div> 117 118 <div class="grid" style="grid: minmax(auto,30px) / auto"> 119 <input type="range" class="mb min-auto" orient="vertical"> 120 </div> 121 122 123 <div style="height:30px"><div> 124 <input type="range" class="mb n" orient="vertical"> 125 </div></div> 126 127 <div class="grid" style="grid: min-content / auto"> 128 <input type="range" class="mb n" orient="vertical"> 129 </div> 130 131 <div class="grid" style="grid: minmax(min-content,30px) / auto"> 132 <input type="range" class="mb n" orient="vertical"> 133 </div> 134 135 <div class="grid" style="grid: minmax(auto,30px) / auto"> 136 <input type="range" class="mb n" orient="vertical"> 137 </div> 138 139 <div class="grid" style="grid: minmax(auto,30px) / auto"> 140 <input type="range" class="mb n min-auto" orient="vertical"> 141 </div> 142 143 144 </body></html>