| <!doctype html> |
| <meta charset=utf-8> |
| <title></title> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <input type="radio" name="group" id="lightRadio1"> |
| <input type="radio" name="group" id="lightRadio2"> |
| <div id="host"></div> |
| <script> |
| |
| test(() => { |
| var lightRadio1 = document.getElementById("lightRadio1"); |
| var lightRadio2 = document.getElementById("lightRadio2"); |
| |
| var host = document.getElementById("host"); |
| var sr = host.attachShadow({mode: "closed"}); |
| var shadowRadio1 = document.createElement("input"); |
| shadowRadio1.name = "group"; |
| shadowRadio1.id = "shadowRadio1"; |
| shadowRadio1.type = "radio"; |
| sr.appendChild(shadowRadio1); |
| var shadowRadio2 = document.createElement("input"); |
| shadowRadio2.name = "group"; |
| shadowRadio2.id = "shadowRadio2"; |
| shadowRadio2.type = "radio"; |
| sr.appendChild(shadowRadio2); |
| |
| assert_false(lightRadio1.checked); |
| assert_false(lightRadio2.checked); |
| assert_false(shadowRadio1.checked); |
| assert_false(shadowRadio2.checked); |
| |
| lightRadio1.click(); |
| assert_true(lightRadio1.checked); |
| assert_false(lightRadio2.checked); |
| assert_false(shadowRadio1.checked); |
| assert_false(shadowRadio2.checked); |
| |
| lightRadio2.click(); |
| assert_false(lightRadio1.checked); |
| assert_true(lightRadio2.checked); |
| assert_false(shadowRadio1.checked); |
| assert_false(shadowRadio2.checked); |
| |
| shadowRadio1.click(); |
| assert_false(lightRadio1.checked); |
| assert_true(lightRadio2.checked); |
| assert_true(shadowRadio1.checked); |
| assert_false(shadowRadio2.checked); |
| |
| shadowRadio2.click(); |
| assert_false(lightRadio1.checked); |
| assert_true(lightRadio2.checked); |
| assert_false(shadowRadio1.checked); |
| assert_true(shadowRadio2.checked); |
| |
| // Ensure radio groups work even when modifying shadow DOM. |
| shadowRadio2.remove(); |
| sr.appendChild(shadowRadio2); |
| shadowRadio2.click(); |
| assert_false(lightRadio1.checked); |
| assert_true(lightRadio2.checked); |
| assert_false(shadowRadio1.checked); |
| assert_true(shadowRadio2.checked); |
| |
| shadowRadio1.click(); |
| assert_false(lightRadio1.checked); |
| assert_true(lightRadio2.checked); |
| assert_true(shadowRadio1.checked); |
| assert_false(shadowRadio2.checked); |
| }, "input type=radio elements should form a group inside shadow DOM."); |
| |
| </script> |