149 lines
5.7 KiB
HTML
149 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
input {
|
|
background-color: rgb(1, 2, 3);
|
|
}
|
|
:indeterminate {
|
|
background-color: rgb(4, 5, 6);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="with-renderer">
|
|
<!-- With renderer -->
|
|
<input type="radio" name="group1" id="radio1">
|
|
<input type="radio" name="group1" id="radio2">
|
|
<input type="radio" name="group1" id="radio3">
|
|
<span>
|
|
<input type="radio" name="group1" id="radio4">
|
|
<input type="radio" name="group1" id="radio5">
|
|
</span>
|
|
</div>
|
|
<div style="display:none;">
|
|
<!-- Without renderer -->
|
|
<input type="radio" name="group2" id="radio6">
|
|
<span>
|
|
<input type="radio" name="group2" id="radio7">
|
|
<input type="radio" name="group2" id="radio8">
|
|
</span>
|
|
<input type="radio" name="group2" id="radio9">
|
|
<input type="radio" name="group2" id="radio10">
|
|
</div>
|
|
</body>
|
|
<script>
|
|
|
|
description('Verify we invalidate radio button groups to match :indeterminate when a button is checked/unchecked');
|
|
let allInputs = document.querySelectorAll("input");
|
|
|
|
function elementsWithIndeterminateStyle() {
|
|
let elements = [];
|
|
for (let inputElement of allInputs) {
|
|
let backgroundColor = getComputedStyle(inputElement).backgroundColor;
|
|
if (backgroundColor === "rgb(4, 5, 6)")
|
|
elements.push(inputElement.id);
|
|
}
|
|
return elements;
|
|
}
|
|
|
|
function checkedElements() {
|
|
let elements = [];
|
|
for (let inputElement of allInputs) {
|
|
if (inputElement.checked)
|
|
elements.push(inputElement.id);
|
|
}
|
|
return elements;
|
|
}
|
|
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio2", "radio3", "radio4", "radio5", "radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '[]');
|
|
|
|
debug("Check radio3");
|
|
document.getElementById("radio3").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio3"]');
|
|
|
|
debug("Check radio8");
|
|
document.getElementById("radio8").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '[]');
|
|
shouldBe("checkedElements()", '["radio3", "radio8"]');
|
|
|
|
debug("Check radio4");
|
|
document.getElementById("radio4").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '[]');
|
|
shouldBe("checkedElements()", '["radio4", "radio8"]');
|
|
|
|
debug("Check radio9");
|
|
document.getElementById("radio9").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '[]');
|
|
shouldBe("checkedElements()", '["radio4", "radio9"]');
|
|
|
|
debug("Uncheck radio4");
|
|
document.getElementById("radio4").checked = false;
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio2", "radio3", "radio4", "radio5"]');
|
|
shouldBe("checkedElements()", '["radio9"]');
|
|
|
|
debug("Uncheck radio9");
|
|
document.getElementById("radio9").checked = false;
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio2", "radio3", "radio4", "radio5", "radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '[]');
|
|
|
|
debug("Check radio1");
|
|
document.getElementById("radio1").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio1"]');
|
|
|
|
debug("Check radio2");
|
|
document.getElementById("radio2").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio2"]');
|
|
|
|
debug("Remove radio3 from its group");
|
|
document.getElementById("radio3").name = "";
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio3", "radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio2"]');
|
|
|
|
debug("Remove radio6 from its group");
|
|
document.getElementById("radio6").name = "";
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio3", "radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio2"]');
|
|
|
|
debug("Remove radio2 from its group");
|
|
document.getElementById("radio2").name = "";
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio3", "radio4", "radio5", "radio6", "radio7", "radio8", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio2"]');
|
|
|
|
debug("Check radio7");
|
|
document.getElementById("radio7").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio3", "radio4", "radio5", "radio6"]');
|
|
shouldBe("checkedElements()", '["radio2", "radio7"]');
|
|
|
|
debug("Check radio8");
|
|
document.getElementById("radio8").checked = true;
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio3", "radio4", "radio5", "radio6"]');
|
|
shouldBe("checkedElements()", '["radio2", "radio8"]');
|
|
|
|
debug("Remove radio9 from its group");
|
|
document.getElementById("radio9").name = "";
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio3", "radio4", "radio5", "radio6", "radio9"]');
|
|
shouldBe("checkedElements()", '["radio2", "radio8"]');
|
|
|
|
debug("Remove radio8 from its group");
|
|
document.getElementById("radio8").name = "";
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio3", "radio4", "radio5", "radio6", "radio7", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio2", "radio8"]');
|
|
|
|
debug("Remove radio7 from its group");
|
|
document.getElementById("radio7").name = "";
|
|
shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio3", "radio4", "radio5", "radio6", "radio7", "radio9", "radio10"]');
|
|
shouldBe("checkedElements()", '["radio2", "radio8"]');
|
|
|
|
|
|
// Hide the elements to make the results prettier.
|
|
document.getElementById("with-renderer").style.display = "none";
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|