selectedcontent.html (7130B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9799"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <style> 10 select, ::picker(select) { 11 appearance: base-select; 12 } 13 </style> 14 15 <form> 16 <select> 17 <button> 18 <selectedcontent></selectedcontent> 19 </button> 20 <option class=one value=one> 21 <span class=one>span</span> one 22 </option> 23 <option class=two value=two> 24 <span class=two>span</span> two 25 </option> 26 </select> 27 </form> 28 29 <script> 30 promise_test(async () => { 31 const optionOne = document.querySelector('option.one'); 32 const optionTwo = document.querySelector('option.two'); 33 const selectedcontent = document.querySelector('selectedcontent'); 34 const select = document.querySelector('select'); 35 const spanTwo = document.querySelector('span.two'); 36 const form = document.querySelector('form'); 37 const button = document.querySelector('button'); 38 39 assert_equals(selectedcontent.innerHTML, optionOne.innerHTML, 40 'The innerHTML of <selectedcontent> should initially match the innerHTML of the selected <option>.'); 41 42 select.value = 'two'; 43 assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML, 44 'The innerHTML of <selectedcontent> should change after the selected option is changed.'); 45 46 let oldInnerHTML = optionTwo.innerHTML; 47 spanTwo.textContent = 'new span'; 48 assert_equals(selectedcontent.innerHTML, oldInnerHTML, 49 '<selectedcontent> should not respond to <option> text content changes.'); 50 51 spanTwo.appendChild(document.createElement('div')); 52 assert_equals(selectedcontent.innerHTML, oldInnerHTML, 53 '<selectedcontent> should not respond to new elements being added to descendants of <option>.'); 54 55 spanTwo.setAttribute('data-foo', 'bar'); 56 assert_equals(selectedcontent.innerHTML, oldInnerHTML, 57 '<selectedcontent> should not respond to attributes being added to descendants of <option>.'); 58 59 select.value = select.value; 60 assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML, 61 '<selectedcontent> should be updated in response to re-assigning select.value.'); 62 63 spanTwo.firstElementChild.remove(); 64 select.selectedIndex = select.selectedIndex; 65 assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML, 66 '<selectedcontent> should be updated in response to re-assigning select.selectedIndex.'); 67 68 form.reset(); 69 assert_equals(select.value, 'one', 70 'form.reset() should change the selects value to one.'); 71 assert_equals(selectedcontent.innerHTML, optionOne.innerHTML, 72 'The innerHTML of <selectedcontent> should be updated in response to a form reset.'); 73 74 await test_driver.bless(); 75 select.showPicker(); 76 await test_driver.click(optionTwo); 77 assert_equals(select.value, 'two', 78 'Clicking on another option should change select.value.'); 79 assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML, 80 'Clicking on an option element should update the <selectedcontent>.'); 81 82 selectedcontent.remove(); 83 assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML, 84 'Removing the <selectedcontent> from the <select> should not make it clear its contents.'); 85 button.appendChild(selectedcontent); 86 assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML, 87 'Re-inserting the <selectedcontent> should make it update its contents.'); 88 89 optionTwo.remove(); 90 assert_equals(selectedcontent.innerHTML, optionOne.innerHTML, 91 'The innerHTML of <selectedcontent> should be updated in response to selected <option> removal.'); 92 optionOne.remove(); 93 assert_equals(selectedcontent.innerHTML, '', 94 'The content of <selectedcontent> should be cleared if there is no selected <option>.'); 95 }, 'The <selectedcontent> element should reflect the HTML contents of the selected <option>.'); 96 </script> 97 98 <select id=select2> 99 <button> 100 <selectedcontent></selectedcontent> 101 </button> 102 <option class=one>one</option> 103 <option class=two>two</option> 104 <option class=three>three</option> 105 </select> 106 107 <script> 108 promise_test(async () => { 109 const select = document.getElementById('select2'); 110 const button = select.querySelector('button'); 111 const selectedcontent = select.querySelector('selectedcontent'); 112 assert_equals(selectedcontent.textContent, 'one', 113 'selectedcontent should initially be one.'); 114 115 const selectedcontent2 = document.createElement('selectedcontent'); 116 button.appendChild(selectedcontent2); 117 select.value = 'two'; 118 assert_equals(selectedcontent.textContent, 'two', 119 'First selectedcontent should be kept up to date.'); 120 assert_equals(selectedcontent2.textContent, '', 121 'Second selectedcontent should not be kept up to date.'); 122 123 button.insertBefore(selectedcontent2, selectedcontent); 124 select.value = 'one'; 125 assert_equals(selectedcontent.textContent, '', 126 'Second selectedcontent in tree order should be cleared after another is inserted.'); 127 assert_equals(selectedcontent2.textContent, 'one', 128 'First selectedcontent in tree order should be kept up to date.'); 129 130 selectedcontent.textContent = 'two'; 131 selectedcontent.remove(); 132 assert_equals(selectedcontent.textContent, 'two', 133 'selectedcontent should not have its children modified after removal.'); 134 135 select.value = 'three'; 136 assert_equals(selectedcontent2.textContent, 'three', 137 'Remaining selectedcontent should be kept up to date.'); 138 assert_equals(selectedcontent.textContent, 'two', 139 'Removed selectedcontent should not be kept up to date.'); 140 141 button.insertBefore(selectedcontent, selectedcontent2); 142 assert_equals(selectedcontent.textContent, 'three', 143 'Inserted selectedcontent should be updated if it is the first in tree order.'); 144 assert_equals(selectedcontent2.textContent, '', 145 'Second selectedcontent in tree order should be cleared when another is inserted.'); 146 147 selectedcontent.remove(); 148 assert_equals(selectedcontent2.textContent, 'three', 149 'Remaining selectedcontent should be updated when first in tree order is removed.'); 150 }, 'When there are multiple <selectedcontent> elements, only the one in tree order should be kept up to date.'); 151 152 promise_test(async () => { 153 const select = document.createElement('select'); 154 select.innerHTML = '<option>one</option><option>two</option>'; 155 const button = document.createElement('button'); 156 select.appendChild(button); 157 158 const selectedcontent = document.createElement('selectedcontent'); 159 button.appendChild(selectedcontent); 160 assert_equals(selectedcontent.textContent, '', 161 '<selectedcontent> should not be updated when appending to a disconnected select.'); 162 163 select.value = 'two'; 164 assert_equals(selectedcontent.textContent, '', 165 '<selectedcontent> should not be updated when changing value of a disconnected select.'); 166 167 document.body.appendChild(select); 168 assert_equals(selectedcontent.textContent, 'two', 169 '<selectedcontent> should be updated when <select> is connected to the document.'); 170 }, '<seletedcontent> behavior in disconnected <select>.'); 171 </script>