| <!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> |
