input-range-inline-size.html (1529B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Setting inline-size/min-inline-size/max-inline-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.inlineSize = "10px"; 27 const inlineSize = () => { 28 return writingMode == "horizontal-tb" ? getComputedStyle(input).width : getComputedStyle(input).height; 29 }; 30 assert_equals(inlineSize(), "10px", "inline-size applies"); 31 input.style.maxInlineSize = "8px"; 32 assert_equals(inlineSize(), "8px", "max-inline-size applies"); 33 input.style.minInlineSize = "15px"; 34 assert_equals(inlineSize(), "15px", "min-inline-size applies"); 35 }, `writing-mode: ${writingMode}`); 36 } 37 </script> 38 </body> 39 </html>