Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLSelectElement.selectedOptions</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<select id="select-none-selected">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="select-one-selected">
<option>One</option>
<option selected>Two</option>
<option>Three</option>
</select>
<select multiple id="multiple-select-none-selected">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select multiple id="multiple-select-two-selected">
<option>One</option>
<option selected>Two</option>
<option selected>Three</option>
</select>
<select id="select-named-selected">
<option>One</option>
<option>Two</option>
<option id="named-option" selected>Three</option>
</select>
<select id="invalid-select">
<option selected>One</option>
<option selected>Two</option>
<option>Three</option>
</select>
<select id="select-same-object">
<option>One</option>
<option selected>Two</option>
<option>Three</option>
</select>
<select multiple id="select-same-object-change">
<option selected>One</option>
<option selected>Two</option>
<option selected>Three</option>
</select>
<script>
"use strict";
test(() => {
const select = document.getElementById("select-none-selected");
assert_array_equals(select.selectedOptions, [select.children[0]]);
assert_equals(select.selectedOptions.length, 1);
}, ".selectedOptions with no selected option");
test(() => {
const select = document.getElementById("select-one-selected");
assert_array_equals(select.selectedOptions, [select.children[1]]);
assert_equals(select.selectedOptions.length, 1);
}, ".selectedOptions with one selected option");
test(() => {
const select = document.getElementById("multiple-select-none-selected");
assert_equals(select.selectedOptions.item(0), null);
assert_equals(select.selectedOptions.length, 0);
}, ".selectedOptions using the 'multiple' attribute with no selected options");
test(() => {
const select = document.getElementById("multiple-select-two-selected");
assert_equals(select.selectedOptions.item(0), select.children[1]);
assert_equals(select.selectedOptions.item(1), select.children[2]);
assert_equals(select.selectedOptions.length, 2);
}, ".selectedOptions using the 'multiple' attribute with two selected options");
// "A select element whose multiple attribute is not specified must not have
// more than one descendant option element with its selected attribute set."
// "If two or more option elements in the select element's list of options
// have their selectedness set to true, set the selectedness of all but
// the last option element with its selectedness set to true in the list of
// options in tree order to false."
test(() => {
const select = document.getElementById("invalid-select");
assert_array_equals(select.selectedOptions, [select.children[1]]);
assert_equals(select.selectedOptions.length, 1);
}, ".selectedOptions without the 'multiple' attribute but " +
"more than one selected option should return the last one");
test(() => {
const select = document.getElementById("select-named-selected");
assert_equals(select.selectedOptions.constructor, HTMLCollection);
assert_equals(select.selectedOptions.namedItem("named-option"), select.children[2]);
}, ".selectedOptions should return `HTMLCollection` instance");
test(() => {
const select = document.getElementById("select-same-object");
const selectAgain = document.getElementById("select-same-object");
assert_equals(select.selectedOptions, selectAgain.selectedOptions);
}, ".selectedOptions should always return the same value - [SameObject]");
test(() => {
const select = document.getElementById("select-same-object-change");
const before = select.selectedOptions;
assert_equals(before.length, 3);
select.selectedOptions[1].selected = false;
const after = select.selectedOptions;
assert_equals(before, after);
assert_equals(before.length, 2);
assert_equals(after.length, 2);
}, ".selectedOptions should return the same object after selection changes - [SameObject]");
</script>
</body>
</html>