selectedcontentelement-attr.tentative.html (2537B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/openui/open-ui/issues/1063"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <select style="appearance:base-select"> 8 <option class=one value=one>one<span>span</span></option> 9 <option class=two value=two>two<span>span</span></option> 10 </select> 11 <selectedcontent id=myselectedcontent></selectedcontent> 12 13 <script> 14 promise_test(async () => { 15 const select = document.querySelector('select'); 16 const selectedcontent = document.querySelector('selectedcontent'); 17 const optionOne = document.querySelector('option.one'); 18 const optionTwo = document.querySelector('option.two'); 19 20 select.setAttribute('selectedcontentelement', 'myselectedcontent'); 21 assert_equals(selectedcontent.innerHTML, optionOne.innerHTML, 22 'Setting the selectedcontentelement attribute via setAttribute should synchronously assign the contents of <selectedcontent>.'); 23 24 select.removeAttribute('selectedcontentelement'); 25 assert_equals(selectedcontent.innerHTML, '', 26 'Removing the selectedcontentelement attribute via removeAttribute should synchronously clear the contents of the <selectedcontent>.'); 27 28 select.selectedContentElement = selectedcontent; 29 assert_equals(selectedcontent.innerHTML, optionOne.innerHTML, 30 'Setting the selectedcontentelement attribute via IDL should synchronously assign the contents of <selectedcontent>.'); 31 32 select.selectedContentElement = null; 33 assert_equals(selectedcontent.innerHTML, '', 34 'Removing the selectedcontentelement attribute via IDL should synchronously clear the contents of the <selectedcontent>.'); 35 36 select.selectedContentElement = selectedcontent; 37 assert_equals(selectedcontent.innerHTML, optionOne.innerHTML, 38 'Re-setting the selectedcontentelement attribute via IDL should synchronously assign the contents of <selectedcontent>.'); 39 40 let oldInnerHTML = optionOne.innerHTML; 41 optionOne.querySelector('span').remove(); 42 await new Promise(queueMicrotask); 43 assert_equals(selectedcontent.innerHTML, oldInnerHTML, 44 'Mutating the selected <option> should not update the <selectedcontent> contents.'); 45 46 select.value = 'two'; 47 assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML, 48 'Changing which <option> is selected should synchronously update the <selectedcontent> contents.'); 49 }, 'The selectedcontentelement attribute should set up an association between a select and a selectedcontent.'); 50 </script>