| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>valueMissing property on the input[type=radio] element</title> |
| <meta content="text/html; charset=UTF-8" http-equiv="content-type"> |
| <meta content="valueMissing property on the input[type=radio] element" name="description"> |
| <link href="https://html.spec.whatwg.org/multipage/#dom-validitystate-valuemissing" rel="help"> |
| <link href="https://html.spec.whatwg.org/multipage/#radio-button-state-(type%3Dradio)%3Asuffering-from-being-missing" rel="help"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div id="log"></div> |
| |
| <form style="display: none"> |
| <input type="radio" name="group1" id="radio1"> |
| <input type="radio" name="group1" id="radio2"> |
| |
| <input type="radio" name="group2" required id="radio3"> |
| <input type="radio" name="group2" id="radio4"> |
| |
| <input type="radio" name="group3" required checked id="radio5"> |
| <input type="radio" name="group3" id="radio6"> |
| |
| <input type="radio" name="group4" required id="radio7"> |
| <input type="radio" name="group4" checked id="radio8"> |
| <input type="radio" name="group4" id="radio9"> |
| |
| <input type="radio" name="group5" required disabled id="radio10"> |
| <input type="radio" name="group5" id="radio11"> |
| |
| <input type="radio" name="group6" required checked disabled id="radio12"> |
| <input type="radio" name="group6" id="radio13"> |
| </form> |
| |
| <script type="text/javascript"> |
| var cases = [ |
| { |
| name: "The required attribute is not set", |
| group: ["radio1", "radio2"], |
| expected: false |
| }, |
| { |
| name: "One of the radios is required, but none checked", |
| group: ["radio3", "radio4"], |
| expected: true |
| }, |
| { |
| name: "One of the radios is required and checked", |
| group: ["radio5", "radio6"], |
| expected: false |
| }, |
| { |
| name: "One of the radios is required and another one is checked", |
| group: ["radio7", "radio8", "radio9"], |
| expected: false |
| }, |
| { |
| name: "One of the radios is required and disabled, but none checked", |
| group: ["radio10", "radio11"], |
| expected: true |
| }, |
| { |
| name: "One of the radios is required, checked and disabled", |
| group: ["radio12", "radio13"], |
| expected: false |
| } |
| ]; |
| |
| for (var info of cases) { |
| test(function () { |
| for (var id of info.group) { |
| var radio = document.getElementById(id); |
| |
| assert_class_string(radio.validity, "ValidityState", |
| "HTMLInputElement.validity must be a ValidityState instance"); |
| |
| if (info.expected) { |
| assert_true(radio.validity.valueMissing, |
| "The " + id + ".validity.valueMissing should be true"); |
| } else { |
| assert_false(radio.validity.valueMissing, |
| "The " + id + ".validity.valueMissing should be false"); |
| } |
| } |
| }, info.name); |
| } |
| </script> |
| </body> |
| </html> |