<!DOCTYPE html>
<style>
.container {
    border: 2px solid blue;
    width: 100px;
    height: 100px;
}
.contents {
    display:contents;
}
#innercontainer {
    display:content;
}
#test1:hover { color: green }
#test2:hover span { color: green  }
#test3:active { color: green }
#test4:active span { color: green  }
</style>
<div class=container>
<div id=test1 class=contents>
Text should turn green on hover.
</div>
</div>
<div class=container>
<div id=test2 class=contents>
<span>
Text should turn green on hover.
</spans>
</div>
</div>
<div class=container>
<div id=test3 class=contents>
Text should turn green on mouse down.
</div>
</div>
<div class=container>
<div id=test4 class=contents>
<span>
Text should turn green on mouse down.
</spans>
</div>
</div>
<div id=log></div>

<script>
function test(testId, activate) {
    const testElement = document.getElementById(testId);
    eventSender.mouseMoveTo(testElement.parentNode.offsetLeft + 5, testElement.parentNode.offsetTop + 5);
    if (activate)
        eventSender.mouseDown();
    const verifyElement = testElement.firstElementChild ? testElement.firstElementChild : testElement;
    const pass = getComputedStyle(verifyElement, null).color == 'rgb(0, 128, 0)';
    log.innerHTML += `${testId} ${pass ? "PASS" : "FAIL"}<br>`;
    if (activate)
        eventSender.mouseUp();
}

if (window.testRunner) {
    testRunner.dumpAsText();
    test('test1');
    test('test2');
    test('test3', true);
    test('test4', true);
}
</script>