mirror of
https://github.com/fergalmoran/ladybird.git
synced 2026-01-06 08:36:15 +00:00
4408581ee0
Currently the `<select>` dropdown IPC uses the option value attr to find which option is selected. This won't work when options don't have values or when multiple options have the same value. Also the `SelectItem` contained so weird recursive structures that are impossible to create with HTML. So I refactored `SelectItem` as a variant, and gave the options a unique id. The id is send back to `HTMLSelectElement` so it can find out exactly which option element is selected.
79 lines
2.7 KiB
HTML
79 lines
2.7 KiB
HTML
<script src="include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
let testCounter = 1;
|
|
function testPart(part) {
|
|
println(`${testCounter++}. ${JSON.stringify(part())}`);
|
|
}
|
|
|
|
// 1. Get select value of unedited
|
|
testPart(() => {
|
|
const select = document.createElement('select');
|
|
// FIXME: Remove selected attribute (currently this is needed because the children are not loaded to select first item in test run)
|
|
select.innerHTML = `
|
|
<option value="one" selected>One</option>
|
|
<option value="two">Two</option>
|
|
<option value="three">Three</option>
|
|
`;
|
|
return select.value;
|
|
});
|
|
|
|
// 2. Get select selectedIndex
|
|
testPart(() => {
|
|
const select = document.createElement('select');
|
|
// FIXME: Remove selected attribute (currently this is needed because the children are not loaded to select first item in test run)
|
|
select.innerHTML = `
|
|
<option value="one" selected>One</option>
|
|
<option value="two">Two</option>
|
|
<option value="three">Three</option>
|
|
`;
|
|
return select.selectedIndex;
|
|
});
|
|
|
|
// 3. Get select value of selectedIndex
|
|
testPart(() => {
|
|
const select = document.createElement('select');
|
|
select.innerHTML = `
|
|
<option value="one">One</option>
|
|
<option value="two">Two</option>
|
|
<option value="three">Three</option>
|
|
`;
|
|
select.selectedIndex = 1;
|
|
return select.value;
|
|
});
|
|
|
|
// 4. Get select length
|
|
testPart(() => {
|
|
const select = document.createElement('select');
|
|
select.innerHTML = `
|
|
<option value="one">One</option>
|
|
<option value="two">Two</option>
|
|
<option value="three">Three</option>
|
|
`;
|
|
return select.length;
|
|
});
|
|
|
|
// 5. Get select value of init selected
|
|
testPart(() => {
|
|
const select = document.createElement('select');
|
|
select.innerHTML = `
|
|
<option value="one">One</option>
|
|
<option value="two">Two</option>
|
|
<option value="three" selected>Three</option>
|
|
`;
|
|
return select.value;
|
|
});
|
|
|
|
// 6. Get select value without option values
|
|
testPart(() => {
|
|
const select = document.createElement('select');
|
|
select.innerHTML = `
|
|
<option>One</option>
|
|
<option>Two</option>
|
|
<option selected>Three</option>
|
|
`;
|
|
return select.value;
|
|
});
|
|
});
|
|
</script>
|