chromium/src/third_party/blink/web_tests/external/wpt/html/semantics/forms/the-select-element/select-selectedOptions.html - manifest_repos/chromium_src - Git at Google

 <!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>
	<!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>