107 lines
3.8 KiB
HTML
107 lines
3.8 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">
|
|
<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>
|