<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#p { color: red }
#p::first-line { color: green }
#p::first-letter { background-color: lime; }
#p:hover { text-transform: lowercase }
</style>
<p id="p">Hover me.</p>
<script>
var green = "rgb(0, 128, 0)";
test(() => {
assert_equals(getComputedStyle(p, '::first-letter').color, green);
}, 'before :hover');
test(() => {
if (eventSender)
eventSender.mouseMoveTo(p.offsetLeft + 1, p.offsetTop + 1);
assert_equals(getComputedStyle(p, '::first-letter').color, green);
}, 'after :hover');
</script>