input-range-block-size.html (1516B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Setting block-size/min-block-size/max-block-size on input[type=range] should be honored.</title> 5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 6 <link rel="help" href="https://drafts.csswg.org/css-writing-modes/"> 7 </head> 8 <body> 9 <input type="range" id="input"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script> 13 const writingModes = [ 14 "horizontal-tb", 15 "vertical-lr", 16 "vertical-rl", 17 "sideways-lr", 18 "sideways-rl", 19 ]; 20 for (let writingMode of writingModes) { 21 test(t => { 22 t.add_cleanup(() => { 23 input.style = ""; 24 }); 25 input.style.writingMode = writingMode; 26 input.style.blockSize = "10px"; 27 const blockSize = () => { 28 return writingMode == "horizontal-tb" ? getComputedStyle(input).height : getComputedStyle(input).width; 29 }; 30 assert_equals(blockSize(), "10px", "block-size applies"); 31 input.style.maxBlockSize = "8px"; 32 assert_equals(blockSize(), "8px", "max-block-size applies"); 33 input.style.minBlockSize = "15px"; 34 assert_equals(blockSize(), "15px", "min-block-size applies"); 35 }, `writing-mode: ${writingMode}`); 36 } 37 </script> 38 </body> 39 </html>