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/select-size-scrolling-and-sizing.optional.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Test <select> size attribute scroll progression and sizing</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<select size="5"></select>
<script>
const select = document.querySelector("select");
for (let i = 0; i < 100; i++) {
const option = document.createElement("option");
option.textContent = `Option ${i + 1}`;
select.appendChild(option);
}
for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
if (!CSS.supports(`writing-mode: ${writingMode}`))
continue;
const scrollBlockAxis = (() => {
switch (writingMode) {
case "horizontal-tb":
return "scrollTop";
case "vertical-lr":
case "sideways-lr":
case "vertical-rl":
case "sideways-rl":
return "scrollLeft";
}
})();
const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop";
const isHorizontal = writingMode === "horizontal-tb";
const clientBlock = isHorizontal ? "clientHeight" : "clientWidth";
const clientInline = isHorizontal ? "clientWidth" : "clientHeight";
const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth";
const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight";
const select = document.querySelector("select");
test(t => {
select.scrollTop = select.scrollLeft = 0;
select.style.writingMode = writingMode;
t.add_cleanup(() => {
select.removeAttribute("style");
select.scrollTop = select.scrollLeft = 0;
});
assert_true(
select[scrollBlock] > select[clientBlock],
"select should be scrollable in block axis"
);
assert_equals(
select[scrollInline], select[clientInline],
"select should not be scrollable in inline axis"
);
assert_equals(
select[scrollBlockAxis], 0,
`scrolling is initially at block start for writing-mode: ${writingMode}`
);
const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
select[scrollBlockAxis] = 100;
if (!isReversedBlockFlowDirection) {
assert_true(
select[scrollBlockAxis] > 0,
`Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}`
);
} else {
assert_equals(
select[scrollBlockAxis], 0,
`Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}`
);
}
select[scrollBlockAxis] = -100;
if (isReversedBlockFlowDirection) {
assert_true(
select[scrollBlockAxis] < 0,
`Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}`
);
} else {
assert_equals(
select[scrollBlockAxis], 0,
`Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}`
);
}
select[scrollInlineAxis] = 100;
assert_equals(
select[scrollInlineAxis], 0,
`setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}`
);
select[scrollInlineAxis] = -100;
assert_equals(
select[scrollInlineAxis], 0,
`setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}`
);
}, `select[size][style="writing-mode: ${writingMode}"] scrolls correctly`);
test(t => {
select.style.writingMode = writingMode;
t.add_cleanup(() => {
select.removeAttribute("style");
select.size = 5;
});
let prevBlockSize = select[clientBlock];
let prevInlineSize = select[clientInline];
select.size = 10;
assert_true(
select[clientBlock] > prevBlockSize,
`${clientBlock} increased when increasing size`
);
assert_equals(
select[clientInline], prevInlineSize,
`${clientInline} did not change when increasing size`
);
prevBlockSize = select[clientBlock];
prevInlineSize = select[clientInline];
select.size = 8;
assert_true(
select[clientBlock] < prevBlockSize,
`${clientBlock} decreased when decreasing size`
);
assert_equals(
select[clientInline], prevInlineSize,
`${clientInline} did not change when decreasing size`
);
}, `select[size][style="writing-mode: ${writingMode}"] sizing works correctly`);
};
</script>