field-sizing-select-contain-size.html (2056B)
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 .contain { 11 contain: size; 12 } 13 </style> 14 <div id="container"></div> 15 <script> 16 const container = document.querySelector('#container'); 17 const DISABLE = 'class="disable-default"'; 18 19 // Tests for drop-down box ==================================================== 20 21 test(() => { 22 const s = '<select class="contain">><option>1<option>quick brown<option>fox</select>'; 23 container.innerHTML = s + s; 24 container.lastElementChild.style.fieldSizing = 'content'; 25 const widthForContent1 = container.lastElementChild.offsetWidth; 26 assert_greater_than_equal(container.firstElementChild.offsetWidth, 27 widthForContent1); 28 container.lastElementChild.selectedIndex = 1; 29 const widthForContentQuickBrown = container.lastElementChild.offsetWidth; 30 assert_equals(widthForContentQuickBrown, widthForContent1); 31 }, 'dropdown: The width should not depend on the selected OPTION when contain:size is set'); 32 33 // Tests for list box ========================================================= 34 35 // Some platforms don't support list box rendering. 36 container.innerHTML = '<select></select><select multiple></select>'; 37 if (container.firstElementChild.offsetHeight != container.lastElementChild.offsetHeight) { 38 test(() => { 39 container.innerHTML = `<select class="contain" multiple><option>fox</select>` + 40 `<select class="contain disable-default" multiple><option>fox</select>`; 41 const former = container.firstElementChild; 42 const latter = container.lastElementChild; 43 const widthForOneItem = latter.offsetWidth; 44 assert_equals(former.offsetWidth, widthForOneItem); 45 46 latter.add(new Option('quick brown')); 47 assert_equals(latter.offsetWidth, widthForOneItem); 48 }, 'listbox: The width should not depend on content when contain:size is set'); 49 } 50 </script> 51 </body>