Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-writing-modes/forms/input-range-block-size.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>Setting block-size/min-block-size/max-block-size on input[type=range] should be honored.</title>
</head>
<body>
<input type="range" id="input">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const writingModes = [
"horizontal-tb",
"vertical-lr",
"vertical-rl",
"sideways-lr",
"sideways-rl",
];
for (let writingMode of writingModes) {
test(t => {
t.add_cleanup(() => {
input.style = "";
});
input.style.writingMode = writingMode;
input.style.blockSize = "10px";
const blockSize = () => {
return writingMode == "horizontal-tb" ? getComputedStyle(input).height : getComputedStyle(input).width;
};
assert_equals(blockSize(), "10px", "block-size applies");
input.style.maxBlockSize = "8px";
assert_equals(blockSize(), "8px", "max-block-size applies");
input.style.minBlockSize = "15px";
assert_equals(blockSize(), "15px", "min-block-size applies");
}, `writing-mode: ${writingMode}`);
}
</script>
</body>
</html>