| <!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"> |
| <input type="radio" name="group1" id="radio4"> |
| <input type="radio" name="group1" id="radio5"> |
| </div> |
| <div style="display:none;"> |
| <!-- Without renderer --> |
| <input type="radio" name="group2" id="radio6"> |
| <input type="radio" name="group2" id="radio7"> |
| <input type="radio" name="group2" id="radio8"> |
| <input type="radio" name="group2" id="radio9"> |
| <input type="radio" name="group2" id="radio10"> |
| </div> |
| </body> |
| <script> |
| |
| description('Verify that we do not invalidate more than needed to satisfy :indeterminate'); |
| let allInputs = document.querySelectorAll("input"); |
| |
| function elementsNeedingStyleRecalc() { |
| let elementsRequiringNeedStyleRecalc = [] |
| for (let inputElement of allInputs) { |
| let needsStyleRecalc = window.internals.nodeNeedsStyleRecalc(inputElement); |
| if (needsStyleRecalc) |
| elementsRequiringNeedStyleRecalc.push(inputElement.id); |
| } |
| return elementsRequiringNeedStyleRecalc; |
| } |
| |
| 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; |
| } |
| |
| // Force a layout to ensure we don't have dirty styles. |
| var offsetTop = document.documentElement.offsetTop; |
| |
| // Initial state. |
| shouldBe("elementsNeedingStyleRecalc()", '[]'); |
| shouldBe("elementsWithIndeterminateStyle()", '["radio1", "radio2", "radio3", "radio4", "radio5", "radio6", "radio7", "radio8", "radio9", "radio10"]'); |
| shouldBe("checkedElements()", '[]'); |
| |
| // Check radio3. All the group1 require style recalc. |
| debug("Check radio3"); |
| document.getElementById("radio3").checked = true; |
| shouldBe("elementsNeedingStyleRecalc()", '["radio1", "radio2", "radio3", "radio4", "radio5"]'); |
| shouldBe("elementsWithIndeterminateStyle()", '["radio6", "radio7", "radio8", "radio9", "radio10"]'); |
| shouldBe("checkedElements()", '["radio3"]'); |
| |
| // Check radio8. All the group1 require style recalc. |
| debug("Check radio8"); |
| document.getElementById("radio8").checked = true; |
| shouldBe("elementsNeedingStyleRecalc()", '["radio6", "radio7", "radio8", "radio9", "radio10"]'); |
| shouldBe("elementsWithIndeterminateStyle()", '[]'); |
| shouldBe("checkedElements()", '["radio3", "radio8"]'); |
| |
| // Checking radio4, we should not need to invalidate anything but the two modified elements. |
| debug("Check radio4"); |
| document.getElementById("radio4").checked = true; |
| shouldBe("elementsNeedingStyleRecalc()", '["radio3", "radio4"]'); |
| shouldBe("elementsWithIndeterminateStyle()", '[]'); |
| shouldBe("checkedElements()", '["radio4", "radio8"]'); |
| |
| // Checking radio9, we should not need to invalidate anything but the two modified elements. |
| debug("Check radio9"); |
| document.getElementById("radio9").checked = true; |
| shouldBe("elementsNeedingStyleRecalc()", '["radio8", "radio9"]'); |
| shouldBe("elementsWithIndeterminateStyle()", '[]'); |
| shouldBe("checkedElements()", '["radio4", "radio9"]'); |
| |
| // 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> |
