select-selectedOptions.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/select-selectedOptions.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>HTMLSelectElement.selectedOptions</title>

<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#dom-select-selectedoptions">

<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."

// - https://html.spec.whatwg.org/multipage/forms.html#the-option-element:the-select-element-6

// "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."

// - https://html.spec.whatwg.org/multipage/forms.html#the-select-element:the-option-element-21

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>