select-parsing.html (5170B)
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 7 <body> 8 9 <select class=test 10 data-description='<div>s, <button>s, and <datalist>s should be allowed in <select>' 11 data-expect=' 12 <div>div 1</div> 13 <button>button</button> 14 <div>div 2</div> 15 <datalist> 16 <option>option</option> 17 </datalist> 18 <div>div 3</div> 19 '> 20 <div>div 1</div> 21 <button>button</button> 22 <div>div 2</div> 23 <datalist> 24 <option>option</option> 25 </datalist> 26 <div>div 3</div> 27 </select> 28 29 <select class=test 30 data-description='</select> should close <button>' 31 data-expect='<button>button</button>'> 32 <button>button 33 </select> 34 35 <select class=test 36 data-description='</select> should close <datalist>' 37 data-expect='<datalist>datalist</datalist>'> 38 <datalist>datalist 39 </select> 40 41 <select id=nested1 class=test 42 data-description='<select> in <button> in <select> should remove inner <select>' 43 data-expect='<button></button>'> 44 <button> 45 <select id=expectafter1></select> 46 <div id=expectafter1b></div> 47 </button> 48 </select> 49 50 <select id=nested2 class=test 51 data-description='<select> in <select><button><div> should remove inner <select>' 52 data-expect='<button><div></div></button>'> 53 <button> 54 <div> 55 <select id=expectafter2> 56 </select> 57 58 <select 59 id=nested3 60 class=test 61 data-description='JS added nested <select> should be ignored' 62 data-expect='<option>The Initial Option</option>' 63 > 64 <option>The Initial Option</option> 65 </select> 66 67 <select 68 id=nested4 69 class=test 70 data-description='JS added nested <select>s should be ignored' 71 data-expect='<option>The Initial Option</option>' 72 > 73 <option>The Initial Option</option> 74 </select> 75 76 <select class=test 77 data-description='Divs and imgs should be allowed as direct children of select and within options without a datalist' 78 data-expect=' 79 <div> 80 <option><img>option</option> 81 </div>'> 82 <div> 83 <option><img>option</option> 84 </div> 85 </select> 86 87 <select class=test 88 data-description='Input tags should not parse inside select instead of closing the select' 89 data-expect=''> 90 <input> 91 </select> 92 93 <select class=test 94 data-description='textarea tags should parse inside select instead of closing the select' 95 data-expect='<textarea></textarea>'> 96 <textarea></textarea> 97 </select> 98 99 <select class=test 100 data-description='Input tags should parse inside select if nested in another tag' 101 data-expect='<div><input></div>'> 102 <div> 103 <input> 104 </div> 105 </select> 106 107 <select class=test 108 data-description='Input tags should close select when directly inside an <option>' 109 data-expect='<option></option>'> 110 <option> 111 <input> 112 </option> 113 </select> 114 115 <div id=afterlast> 116 keep this div after the last test case 117 </div> 118 119 <script> 120 function removeWhitespace(t) { 121 return t.replace(/\s/g,''); 122 } 123 document.querySelectorAll('select.test').forEach(s => { 124 assert_true(!!s.dataset.description.length); 125 test(() => { 126 // The document.body check here and in the other tests is to make sure that a 127 // previous test case didn't leave the HTML parser open on another element. 128 assert_equals(s.parentNode, document.body); 129 assert_equals(removeWhitespace(s.innerHTML),removeWhitespace(s.dataset.expect)); 130 },s.dataset.description) 131 }); 132 133 test(() => { 134 assert_equals(document.getElementById('afterlast').parentNode, document.body); 135 }, 'The last test should not leave any tags open after parsing'); 136 137 test(() => { 138 const outerSelect = document.getElementById('nested1'); 139 const innerSelect = document.getElementById('expectafter1'); 140 const nextDiv = document.getElementById('expectafter1b'); 141 assert_true(!!outerSelect); 142 assert_equals(innerSelect, null,'Nested select should be removed'); 143 assert_equals(outerSelect.nextElementSibling, nextDiv,'Subsequent content is there too'); 144 }, 'Nested selects should be retained 1'); 145 146 test(() => { 147 const outerSelect = document.getElementById('nested2'); 148 const innerSelect = document.getElementById('expectafter2'); 149 assert_true(!!outerSelect); 150 assert_equals(innerSelect, null,'Nested select should be pushed out as the next sibling'); 151 }, 'Nested selects should be retained 2'); 152 153 test(() => { 154 assert_true(!!nested3); 155 nested3.innerHTML = '<select id="ignored"><option>The New Option</option></select>'; 156 157 const ignored = document.getElementById('ignored'); 158 assert_equals(ignored, null); 159 160 assert_equals(nested3.innerHTML, '<option>The New Option</option>'); 161 }, 'JS added nested select should be ignored'); 162 163 test(() => { 164 assert_true(!!nested4); 165 nested4.innerHTML = '<select id="ignore1"><select id="ignore2"><option>The New Option</option></select></select>'; 166 167 const ignored1 = document.getElementById('ignored1'); 168 assert_equals(ignored1, null); 169 const ignored2 = document.getElementById('ignored2'); 170 assert_equals(ignored2, null); 171 172 assert_equals(nested4.innerHTML, '<option>The New Option</option>'); 173 }, 'JS added nested selects should be ignored'); 174 </script>