empty-pseudo.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
:empty { background-color: green }
#empty + div, #not-empty + div { color: pink }
</style>
<div id="empty"></div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="notEmpty"><div id="child"></div></div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
description("Use descendant invalidation set for :empty pseudo class.")

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

shouldBe("getComputedStyle(empty, '').backgroundColor", "green");

empty.offsetTop; // force recalc
empty.appendChild(document.createElement("div"));

if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");

shouldBe("getComputedStyle(empty, '').backgroundColor", "transparent");

shouldBe("getComputedStyle(notEmpty, '').backgroundColor", "transparent");

notEmpty.offsetTop; // force recalc
notEmpty.removeChild(child);

if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");

shouldBe("getComputedStyle(notEmpty, '').backgroundColor", "green");
</script>
chromium/third_party/blink/web_tests/fast/css/invalidation/empty-pseudo.html
