<!DOCTYPE html>
<html>
<head>
  <style>
  #test {
    font: "ahem";
    font-size: 50px;
    display: block;
    color: red;
  }
  a:hover #test {
    color: rgb(0, 255, 0);
  }
  </style>
</head>
<body>
  <div id="container">
  <a href="#">
    <span id="test">This text should be green when hovered.</span>
  </a>
</div>
</body>

<script src="../../resources/js-test-pre.js"></script>
<script>
  if (window.testRunner) {
    description("Hover should work for :display block elements")
    var test = document.getElementById('test');
    var container = document.getElementById('container');
    test.offsetTop;
    eventSender.mouseMoveTo(50, container.offsetTop + 25)
    test.offsetTop;
    shouldBeEqualToString("getComputedStyle(test, null).color", 'rgb(0, 255, 0)')
    container.parentNode.removeChild(container); // clean up after ourselves.
  }
  successfullyParsed = true;
</script>
<script src="../../resources/js-test-post.js"></script>