<!DOCTYPE html>
<style>
[attr] div {
    color: red;
}
[attr] .baz {
    color: blue;
}
</style>

<div id="a"></div>

<script>
onload = function() {
    document.body.offsetTop;

    var foo = document.createElement("div");
    foo.id = "foo";
    foo.innerHTML = "<div id=bar><div id=baz>This should be blue.</div></div>";

    // Append foo but not attach it.
    a.appendChild(foo);

    // Schedule invalidation on bar which sets childNeedsStyleInvalidation on foo.
    bar.setAttribute("attr", "attr");

    // Remove from the tree and clear all invalidation bits, but foo still has them
    // since it's not in the tree.
    foo.remove();
    document.body.offsetTop;

    // Add foo back and attach it.
    a.appendChild(foo);
    document.body.offsetTop;

    // Schedule invalidation, but it won't get above foo since the bits are
    // incorrectly set.
    baz.className = "baz";
};
</script>