Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 8 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/select-parsing.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<select class=test
data-description='<div>s, <button>s, and <datalist>s should be allowed in <select>'
data-expect='
<div>div 1</div>
<button>button</button>
<div>div 2</div>
<datalist>
<option>option</option>
</datalist>
<div>div 3</div>
'>
<div>div 1</div>
<button>button</button>
<div>div 2</div>
<datalist>
<option>option</option>
</datalist>
<div>div 3</div>
</select>
<select class=test
data-description='</select> should close <button>'
data-expect='<button>button</button>'>
<button>button
</select>
<select class=test
data-description='</select> should close <datalist>'
data-expect='<datalist>datalist</datalist>'>
<datalist>datalist
</select>
<select id=nested1 class=test
data-description='<select> in <button> in <select> should remove inner <select>'
data-expect='<button></button>'>
<button>
<select id=expectafter1></select>
<div id=expectafter1b></div>
</button>
</select>
<select id=nested2 class=test
data-description='<select> in <select><button><div> should remove inner <select>'
data-expect='<button><div></div></button>'>
<button>
<div>
<select id=expectafter2>
</select>
<select class=test
data-description='Divs and imgs should be allowed as direct children of select and within options without a datalist'
data-expect='
<div>
<option><img>option</option>
</div>'>
<div>
<option><img>option</option>
</div>
</select>
<select class=test
data-description='Input tags should parse inside select instead of closing the select'
data-expect='<input>'>
<input>
</select>
<select class=test
data-description='textarea tags should parse inside select instead of closing the select'
data-expect='<textarea></textarea>'>
<textarea></textarea>
</select>
<div id=afterlast>
keep this div after the last test case
</div>
<script>
function removeWhitespace(t) {
return t.replace(/\s/g,'');
}
document.querySelectorAll('select.test').forEach(s => {
assert_true(!!s.dataset.description.length);
test(() => {
// The document.body check here and in the other tests is to make sure that a
// previous test case didn't leave the HTML parser open on another element.
assert_equals(s.parentNode, document.body);
assert_equals(removeWhitespace(s.innerHTML),removeWhitespace(s.dataset.expect));
},s.dataset.description)
});
test(() => {
assert_equals(document.getElementById('afterlast').parentNode, document.body);
}, 'The last test should not leave any tags open after parsing');
test(() => {
const outerSelect = document.getElementById('nested1');
const innerSelect = document.getElementById('expectafter1');
const nextDiv = document.getElementById('expectafter1b');
assert_true(!!outerSelect);
assert_equals(innerSelect, null,'Nested select should be removed');
assert_equals(outerSelect.nextElementSibling, nextDiv,'Subsequent content is there too');
}, 'Nested selects should be retained 1');
test(() => {
const outerSelect = document.getElementById('nested2');
const innerSelect = document.getElementById('expectafter2');
assert_true(!!outerSelect);
assert_equals(innerSelect, null,'Nested select should be pushed out as the next sibling');
}, 'Nested selects should be retained 2');
</script>