hover-first-letter-sibling.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
    #hovered { width: 100px; height: 100px; background-color: orange }
    #hovered::first-letter { color: lime }
    #hovered:hover { background-color: green }
    #hovered:hover + div #target { background-color: green }
</style>
<div id="hovered">
    <div></div>
    <div></div>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="target">This text, and the orange square, should have a green background when the orange square is hovered.</div>
</div>
<script>
description("Sibling invalidation with :hover and ::first-letter");

function hoverElement(element) {
    eventSender.mouseMoveTo(0, 0);
    document.body.offsetLeft; // force layout.
    var x = element.offsetLeft + 1;
    var y = element.offsetTop + 1;
    eventSender.mouseMoveTo(x, y);
}

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

shouldBe("getComputedStyle(target).backgroundColor", "transparent");

shouldBeDefined("window.eventSender");

if (window.eventSender)
    hoverElement(hovered);

// Recalc #hovered (1), its subtree (2) due to ::first-letter, and #target (1).
// In total: 4.
if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "4");

shouldBe("getComputedStyle(target).backgroundColor", "green");

</script>
chromium/third_party/blink/web_tests/fast/css/invalidation/hover-first-letter-sibling.html
