<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
input { background-color: transparent }
#inputOptional:optional,
#inputRequired:required {
    background-color: green
}

input + div {
    color: pink
}
</style>
<input id="inputOptional" required></input>
<div>
    <div></div>
    <div></div>
</div>
<input id="inputRequired"></input>
<div>
    <div></div>
    <div></div>
</div>
<script>
description("Use descendant invalidation sets for :required and :optional pseudo classes.")

var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";

shouldBe("getComputedStyle(inputOptional, '').backgroundColor", "transparent");
document.body.offsetTop; // Force recalc.
inputOptional.removeAttribute("required");
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(inputOptional, '').backgroundColor", "green");

shouldBe("getComputedStyle(inputRequired, '').backgroundColor", "transparent");
document.body.offsetTop; // Force recalc.
inputRequired.setAttribute("required", "");
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(inputRequired, '').backgroundColor", "green");

</script>