diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/widgets/field-sizing-select.html')
-rw-r--r-- | testing/web-platform/tests/html/rendering/widgets/field-sizing-select.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/widgets/field-sizing-select.html b/testing/web-platform/tests/html/rendering/widgets/field-sizing-select.html new file mode 100644 index 0000000000..d55898105e --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/field-sizing-select.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#field-sizing"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<style> +.disable-default { + field-sizing: content; +} +</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.fieldSizing = 'content'; + 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.fieldSizing = 'content'; + assert_less_than(select.offsetWidth, initialWidth); + select.style.fieldSizing = 'fixed'; + assert_equals(select.offsetWidth, initialWidth); +}, 'dropdown: Change the field-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.fieldSizing = 'content'; + assert_less_than(select.offsetHeight, initialHeight); + select.style.fieldSizing = 'fixed'; + assert_equals(select.offsetHeight, initialHeight); + }, 'listbox: Change the field-sizing value dynamically'); + +} +</script> +</body> |