field-sizing-select.html (3627B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-ui-4/#field-sizing"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <style> 7 .disable-default { 8 field-sizing: content; 9 } 10 </style> 11 <div id="container"></div> 12 <script> 13 const container = document.querySelector('#container'); 14 const DISABLE = 'class="disable-default"'; 15 16 // Tests for drop-down box ==================================================== 17 18 test(() => { 19 const s = '<select>><option>1<option>quick brown<option>fox</select>'; 20 container.innerHTML = s + s; 21 container.lastElementChild.style.fieldSizing = 'content'; 22 const widthForContent1 = container.lastElementChild.offsetWidth; 23 assert_greater_than(container.firstElementChild.offsetWidth, 24 widthForContent1); 25 container.lastElementChild.selectedIndex = 1; 26 const widthForContentQuickBrown = container.lastElementChild.offsetWidth; 27 assert_greater_than(widthForContentQuickBrown, widthForContent1); 28 }, 'dropdown: The width should depend on the selected OPTION'); 29 30 test(() => { 31 container.innerHTML = '<select><option>foo<option>quick brown fox</select>'; 32 const select = container.firstElementChild; 33 const initialWidth = select.offsetWidth; 34 select.style.fieldSizing = 'content'; 35 assert_less_than(select.offsetWidth, initialWidth); 36 select.style.fieldSizing = 'fixed'; 37 assert_equals(select.offsetWidth, initialWidth); 38 }, 'dropdown: Change the field-sizing value dynamically'); 39 40 // Tests for list box ========================================================= 41 42 // Some paltforms don't support list box rendering. 43 container.innerHTML = '<select></select><select multiple></select>'; 44 if (container.firstElementChild.offsetHeight != container.lastElementChild.offsetHeight) { 45 46 test(() => { 47 container.innerHTML = `<select multiple><option>fox</select>` + 48 `<select multiple ${DISABLE}><option>fox</select>`; 49 const former = container.firstElementChild; 50 const latter = container.lastElementChild; 51 const widthForOneItem = latter.offsetWidth; 52 const heightForOneItem = latter.offsetHeight; 53 assert_equals(former.offsetWidth, widthForOneItem); 54 assert_greater_than(former.offsetHeight, heightForOneItem); 55 56 latter.add(new Option('quick brown')); 57 assert_greater_than(latter.offsetWidth, widthForOneItem); 58 assert_greater_than(latter.offsetHeight, heightForOneItem); 59 }, 'listbox: The size depend on the content'); 60 61 test(() => { 62 container.innerHTML = `<select size="4"></select><select size="4" ${DISABLE}></select>`; 63 const former = container.firstElementChild; 64 const latter = container.lastElementChild; 65 const widthForZeroItem = latter.offsetWidth; 66 const heightForZeroItem = latter.offsetHeight; 67 assert_equals(former.offsetWidth, widthForZeroItem); 68 assert_greater_than(former.offsetHeight, heightForZeroItem); 69 70 latter.add(new Option('quick brown')); 71 assert_greater_than(latter.offsetWidth, widthForZeroItem); 72 assert_greater_than(latter.offsetHeight, heightForZeroItem); 73 }, 'listbox: The size attribute value is ignored'); 74 75 test(() => { 76 container.innerHTML = '<select multiple><option>foo<option>quick brown fox</select>'; 77 const select = container.firstElementChild; 78 const initialHeight = select.offsetHeight; 79 select.style.fieldSizing = 'content'; 80 assert_less_than(select.offsetHeight, initialHeight); 81 select.style.fieldSizing = 'fixed'; 82 assert_equals(select.offsetHeight, initialHeight); 83 }, 'listbox: Change the field-sizing value dynamically'); 84 85 } 86 </script> 87 </body>