зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1855164 [wpt PR 42176] - Implement form-sizing behavior for <select>, a=testonly
Automatic update from web-platform-tests Implement form-sizing behavior for <select> * Drop down: The width depends on the selected OPTION label, instead of the maximum width of all OPTION labels. * List box: The height depends on the total height of OPTION labels, instead of the 'size' attribute value. They have zero content height if there are no OPTIONs. Bug: 1447058 Change-Id: I16cfb423a8caa776e2c6df1b0bd1bf82413c1447 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4893426 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Kent Tamura <tkent@chromium.org> Cr-Commit-Position: refs/heads/main@{#1201354} -- wpt-commits: 04bf14e2cbd9eb6b060fa3aa552a6136ece25e46 wpt-pr: 42176
This commit is contained in:
Kent Tamura
moz-wptsync-bot
Родитель
43d2de1595
Коммит
c829d1d459
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/9251">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
<style>
|
||||
.disable-default {
|
||||
form-sizing: normal;
|
||||
}
|
||||
</style>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
const container = document.querySelector('#container');
|
||||
const DISABLE = 'class="disable-default"';
|
||||
|
||||
// Tests for drop-down box ====================================================
|
||||
|
||||
test(() => {
|
||||
const s = '<select>><option>1<option>quick brown<option>fox</select>';
|
||||
container.innerHTML = s + s;
|
||||
container.lastElementChild.style.formSizing = 'normal';
|
||||
const widthForContent1 = container.lastElementChild.offsetWidth;
|
||||
assert_greater_than(container.firstElementChild.offsetWidth,
|
||||
widthForContent1);
|
||||
container.lastElementChild.selectedIndex = 1;
|
||||
const widthForContentQuickBrown = container.lastElementChild.offsetWidth;
|
||||
assert_greater_than(widthForContentQuickBrown, widthForContent1);
|
||||
}, 'dropdown: The width should depend on the selected OPTION');
|
||||
|
||||
test(() => {
|
||||
container.innerHTML = '<select><option>foo<option>quick brown fox</select>';
|
||||
const select = container.firstElementChild;
|
||||
const initialWidth = select.offsetWidth;
|
||||
select.style.formSizing = 'normal';
|
||||
assert_less_than(select.offsetWidth, initialWidth);
|
||||
select.style.formSizing = 'auto';
|
||||
assert_equals(select.offsetWidth, initialWidth);
|
||||
}, 'dropdown: Change the form-sizing value dynamically');
|
||||
|
||||
// Tests for list box =========================================================
|
||||
|
||||
// Some paltforms don't support list box rendering.
|
||||
container.innerHTML = '<select></select><select multiple></select>';
|
||||
if (container.firstElementChild.offsetHeight != container.lastElementChild.offsetHeight) {
|
||||
|
||||
test(() => {
|
||||
container.innerHTML = `<select multiple><option>fox</select>` +
|
||||
`<select multiple ${DISABLE}><option>fox</select>`;
|
||||
const former = container.firstElementChild;
|
||||
const latter = container.lastElementChild;
|
||||
const widthForOneItem = latter.offsetWidth;
|
||||
const heightForOneItem = latter.offsetHeight;
|
||||
assert_equals(former.offsetWidth, widthForOneItem);
|
||||
assert_greater_than(former.offsetHeight, heightForOneItem);
|
||||
|
||||
latter.add(new Option('quick brown'));
|
||||
assert_greater_than(latter.offsetWidth, widthForOneItem);
|
||||
assert_greater_than(latter.offsetHeight, heightForOneItem);
|
||||
}, 'listbox: The size depend on the content');
|
||||
|
||||
test(() => {
|
||||
container.innerHTML = `<select size="4"></select><select size="4" ${DISABLE}></select>`;
|
||||
const former = container.firstElementChild;
|
||||
const latter = container.lastElementChild;
|
||||
const widthForZeroItem = latter.offsetWidth;
|
||||
const heightForZeroItem = latter.offsetHeight;
|
||||
assert_equals(former.offsetWidth, widthForZeroItem);
|
||||
assert_greater_than(former.offsetHeight, heightForZeroItem);
|
||||
|
||||
latter.add(new Option('quick brown'));
|
||||
assert_greater_than(latter.offsetWidth, widthForZeroItem);
|
||||
assert_greater_than(latter.offsetHeight, heightForZeroItem);
|
||||
}, 'listbox: The size attribute value is ignored');
|
||||
|
||||
test(() => {
|
||||
container.innerHTML = '<select multiple><option>foo<option>quick brown fox</select>';
|
||||
const select = container.firstElementChild;
|
||||
const initialHeight = select.offsetHeight;
|
||||
select.style.formSizing = 'normal';
|
||||
assert_less_than(select.offsetHeight, initialHeight);
|
||||
select.style.formSizing = 'auto';
|
||||
assert_equals(select.offsetHeight, initialHeight);
|
||||
}, 'listbox: Change the form-sizing value dynamically');
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
Загрузка…
Ссылка в новой задаче