<!DOCTYPE html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta charset="utf-8">
<title>Test for validity of disconnected radio buttons</title>
</head>
<body>
<input type="radio" name="group" id="radio1" required />
<input type="radio" name="group" id="radio2" checked />
<form>
<input type="radio" name="group" id="radio3" required />
<input type="radio" name="group" id="radio4" checked />
</form>
<script>
test(() => {
const radio1 = document.getElementById("radio1");
const radio2 = document.getElementById("radio2");
assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
radio2.remove();
assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
radio1.checked = true;
radio2.required = true;
assert_false(radio2.validity.valueMissing, "Element should not suffer from value missing");
const radio3 = document.getElementById("radio3");
const radio4 = document.getElementById("radio4");
assert_false(radio3.validity.valueMissing, "Element should not suffer from value missing");
radio4.remove();
assert_true(radio3.validity.valueMissing, "Element should suffer from value missing");
radio3.checked = true;
assert_true(radio4.checked, "Element should remain checked");
assert_false(radio3.validity.valueMissing, "Element should not suffer from value missing");
document.querySelector("form").appendChild(radio2);
assert_false(radio3.checked, "Element should be unchecked");
assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
}, "Removed elements are moved into separate radio groups.");
test(() => {
const container = document.createElement("div");
const radio = document.createElement("input");
radio.type = "radio";
radio.name = "group";
radio.id = "radio5";
radio.required = true;
container.appendChild(radio);
assert_true(radio.validity.valueMissing, "Element should suffer from value missing");
const outerContainer = document.createElement("div");
const outerRadio = document.createElement("input");
outerRadio.type = "radio";
outerRadio.name = "group";
outerRadio.id = "radio6";
outerRadio.checked = true;
outerContainer.appendChild(outerRadio);
outerContainer.appendChild(container);
assert_false(radio.validity.valueMissing, "Element should not suffer from value missing");
container.remove();
assert_true(radio.validity.valueMissing, "Element should suffer from value missing");
}, "Disconnected radio buttons should be contained by their tree root.");
test(() => {
const radioParent = document.createElement("input");
radioParent.type = "radio";
radioParent.name = "group";
radioParent.id = "radio-parent";
radioParent.required = true;
assert_true(radioParent.validity.valueMissing, "Element should suffer from value missing");
const radioChild = document.createElement("input");
radioChild.type = "radio";
radioChild.name = "group";
radioChild.id = "radio-child";
radioChild.checked = true;
assert_false(radioChild.validity.valueMissing, "Element should not suffer from value missing");
radioParent.appendChild(radioChild);
assert_false(radioChild.validity.valueMissing, "Element should not suffer from value missing");
assert_false(radioParent.validity.valueMissing, "Element should not suffer from value missing");
radioParent.checked = true;
assert_false(radioChild.checked, "Element should no longer be checked");
}, "Disconnected radio buttons can serve as radio group containers.");
test(() => {
const shadowHost = document.createElement("div");
const root = shadowHost.attachShadow({mode: "open"});
const container = document.createElement("div");
container.appendChild(shadowHost);
const radio1 = document.createElement("input");
radio1.type = "radio";
radio1.name = "group";
radio1.required = true;
const radio2 = document.createElement("input");
radio2.type = "radio";
radio2.name = "group";
radio2.checked = true;
const radio3 = document.createElement("input");
radio3.type = "radio";
radio3.name = "group";
radio3.required = true;
root.appendChild(radio1);
container.appendChild(radio3);
assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
assert_true(radio3.validity.valueMissing, "Element should suffer from value missing");
root.appendChild(radio2);
assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
assert_true(radio3.validity.valueMissing, "Element should suffer from value missing");
}, "Shadow roots in disconnected trees can serve as radio group containers.");
test(() => {
const svgRoot = document.createElementNS("http://www.w3.org/2000/svg", "g")
const htmlContainer = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
svgRoot.appendChild(htmlContainer);
const radio1 = document.createElement("input");
radio1.type = "radio";
radio1.name = "group";
radio1.required = true;
const radio2 = document.createElement("input");
radio2.type = "radio";
radio2.name = "group";
radio2.checked = true;
htmlContainer.appendChild(radio1);
assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
htmlContainer.appendChild(radio2);
assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
radio1.checked = true;
assert_false(radio2.checked, "Element should no longer be checked");
}, "Non-HTML elements in disconnected trees can serve as radio group containers.");
test(() => {
const fragment = document.createDocumentFragment();
const radio1 = document.createElement("input");
radio1.type = "radio";
radio1.name = "group";
radio1.required = true;
const radio2 = document.createElement("input");
radio2.type = "radio";
radio2.name = "group";
radio2.checked = true;
fragment.appendChild(radio1);
assert_true(radio1.validity.valueMissing, "Element should suffer from value missing");
fragment.appendChild(radio2);
assert_false(radio1.validity.valueMissing, "Element should not suffer from value missing");
radio1.checked = true;
assert_false(radio2.checked, "Element should no longer be checked");
}, "Disconnected document fragments can serve as radio group containers.");
</script>
</body>
</html>
Codebase Browser
chromium