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