option-element-constructor.html (4617B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Option element constructor</title> 4 <link rel="author" title="Alex Pearson" href="mailto:alex@alexpear.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/#the-option-element"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <div id="parent"> 10 <div id="child" tabindex="0"></div> 11 </div> 12 13 <body> 14 <script> 15 "use strict"; 16 17 test(() => { 18 const option = new Option(); 19 20 assert_true(option instanceof HTMLOptionElement); 21 22 assert_false(option.hasChildNodes()); 23 assert_false(option.hasAttribute("value")); 24 assert_false(option.hasAttribute("selected")); 25 assert_false(option.selected); 26 27 assert_equals(option.textContent, ""); 28 assert_equals(option.value, ""); 29 }, "Option constructor with no arguments"); 30 31 test(() => { 32 const option = new Option(false, false); 33 34 assert_true(option instanceof HTMLOptionElement); 35 36 assert_true(option.hasChildNodes()); 37 assert_equals(option.childNodes.length, 1); 38 assert_equals(option.childNodes[0].nodeType, Node.TEXT_NODE); 39 assert_equals(option.childNodes[0].data, "false"); 40 assert_equals(option.getAttribute("value"), "false"); 41 assert_false(option.hasAttribute("selected")); 42 assert_false(option.selected); 43 44 assert_equals(option.textContent, "false"); 45 assert_equals(option.value, "false"); 46 }, "Option constructor with falsy arguments"); 47 48 test(() => { 49 const option = new Option("text", "value"); 50 51 assert_true(option.hasChildNodes()); 52 assert_equals(option.childNodes.length, 1); 53 assert_equals(option.childNodes[0].nodeType, Node.TEXT_NODE); 54 assert_equals(option.childNodes[0].data, "text"); 55 assert_equals(option.getAttribute("value"), "value"); 56 assert_false(option.hasAttribute("selected")); 57 assert_false(option.selected); 58 59 assert_equals(option.textContent, "text"); 60 assert_equals(option.value, "value"); 61 }, "Option constructor creates HTMLOptionElement with specified text and value"); 62 63 test(() => { 64 const notSelected = new Option("text", "value", false); 65 const selected = new Option("text", "value", true); 66 67 assert_false(notSelected.hasAttribute("selected")); 68 assert_equals(notSelected.getAttribute("selected"), null); 69 assert_false(notSelected.selected); 70 71 assert_equals(selected.getAttribute("selected"), ""); 72 assert_false(selected.selected); 73 }, "Option constructor handles selectedness correctly when specified with defaultSelected only"); 74 75 test(() => { 76 const notSelected = new Option("text", "value", true, false); 77 const selected = new Option("text", "value", false, true); 78 79 assert_equals(notSelected.selected, false); 80 assert_equals(selected.selected, true); 81 }, "Option constructor handles selectedness correctly, even when incongruous with defaultSelected"); 82 83 test(() => { 84 const option = new Option(undefined, undefined); 85 86 assert_false(option.hasChildNodes()); 87 assert_false(option.hasAttribute("value")); 88 89 assert_equals(option.textContent, ""); 90 assert_equals(option.value, ""); 91 }, "Option constructor treats undefined text and value correctly"); 92 93 test(() => { 94 const option = new Option("", ""); 95 96 assert_false(option.hasChildNodes()); 97 assert_true(option.hasAttribute("value")); 98 99 assert_equals(option.textContent, ""); 100 assert_equals(option.value, ""); 101 }, "Option constructor treats empty text and value correctly"); 102 103 test(() => { 104 const option = new Option("text", "value", 0, ""); 105 106 assert_false(option.hasAttribute("selected")); 107 assert_false(option.selected); 108 }, "Option constructor treats falsy selected and defaultSelected correctly"); 109 110 test(() => { 111 const option = new Option("text", "value", {}, 1); 112 113 assert_true(option.hasAttribute("selected")); 114 assert_true(option.selected); 115 }, "Option constructor treats truthy selected and defaultSelected correctly"); 116 117 test(() => { 118 const option = new Option("text", "value", false, true); 119 120 assert_false(option.hasAttribute("selected")); 121 assert_true(option.selected); 122 123 option.setAttribute("selected", ""); 124 assert_true(option.selected); 125 126 option.removeAttribute("selected"); 127 assert_false(option.selected); 128 }, "Option constructor does not set dirtiness (so, manipulating the selected content attribute still updates the " + 129 "selected IDL attribute)"); 130 131 test(function() { 132 var option = new Option(); 133 assert_equals(Object.getPrototypeOf(option), HTMLOptionElement.prototype); 134 }, "Prototype of object created with named constructor"); 135 </script>