option-disabled-invalid-nesting.html (1836B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/pull/11790#issuecomment-3404807465"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <select> 8 <optgroup disabled> 9 <option></option> 10 <datalist></datalist> 11 </optgroup> 12 </select> 13 14 <script> 15 test(() => { 16 const optionContainer = document.querySelector('option'); 17 assert_true(optionContainer.matches(':disabled'), 18 'Valid option without nesting should be disabled.'); 19 20 const nestedInOption = document.createElement('option'); 21 optionContainer.appendChild(nestedInOption); 22 assert_false(nestedInOption.matches(':disabled'), 23 'Option nested in option should not inherit disabledness.'); 24 25 const parentOptgroup = document.querySelector('optgroup'); 26 const childOptgroup = document.createElement('optgroup'); 27 parentOptgroup.appendChild(childOptgroup); 28 const nestedInOptgroup = document.createElement('option'); 29 childOptgroup.appendChild(nestedInOptgroup); 30 assert_false(nestedInOptgroup.matches(':disabled'), 31 'Option nested in doubly nested optgroups should not inherit disabledness.'); 32 33 const hr = document.createElement('hr'); 34 parentOptgroup.appendChild(hr); 35 const nestedInHr = document.createElement('option'); 36 hr.appendChild(nestedInHr); 37 assert_false(nestedInHr.matches(':disabled'), 38 'Option nested in hr should not inherit disabledness.'); 39 40 const datalist = document.querySelector('datalist'); 41 const nestedInDatalist = document.createElement('option'); 42 datalist.appendChild(nestedInDatalist); 43 assert_false(nestedInDatalist.matches(':disabled'), 44 'Option nested in datalist should not inherit disabledness.'); 45 }, 'options should not inherit disabledness when nested in invalid elements.'); 46 </script>