<!DOCTYPE html>
<html>
<head>
<script src="resources/link-highlight-helper.js"></script>
<link rel="stylesheet" type="text/css" href="resources/link-highlight-style.css">
<style>
.myDiv {
    will-change:transform;
    position:relative;
    z-index:0;
    top:-10px;
    background-color:blue
}
</style>
</head>
<body onload="runTest();" style="overflow: hidden">
<span style="cursor: pointer;position:relative;z-index:1" class="opaqueHighlight">
  <span id="targetLink" style="visibility: hidden" class="mySpan">TEST</span>
</span>
<div class="myDiv">Div to overlap to ensure compositing</div>
<script>
function runTest() {
    useMockHighlight();

    var clientRect = document.getElementById('targetLink').getBoundingClientRect();
    x = (clientRect.left + clientRect.right) / 2;
    y = (clientRect.top + clientRect.bottom) / 2;

    if (window.testRunner)
        testRunner.waitUntilDone();

    if (window.eventSender) {
        eventSender.gestureShowPress(x, y);
        window.setTimeout(function() { testRunner.notifyDone(); }, 0);
    } else {
        debug("This test requires DumpRenderTree.");
        debug("This test makes sure that a link highlight on a composited" +
              ", inline element that doesn't draw content does not crash" +
              "http://crbug.com/322591");
        debug("This test is successful if it doesn't crash and there's a green rectangle below.");
    }
}
</script>
</body>
</html>