<!DOCTYPE html>
<html>
<head>
<title>This test ensures all elements are highlighted in a multielement <a> when the text is clicked</title>
<script src="resources/link-highlight-helper.js"></script>
<link rel="stylesheet" type="text/css" href="resources/link-highlight-style.css">
</head>
<body onload="runTest();">
<div style="will-change: transform; padding: 20px;">
  <a id="targetLink">
    <font id="beforeTarget">Before Text</font><img id="imgTarget" width="320" height="240" src="resources/dice.png"><font id="afterTarget">After Text!</font>
  </a>
</div>
<script>
function runTest() {
    createHighlight(imgTarget);
    // The united rect of beforeTarget and afterTarget also covers the descent
    // part of the image.
    var rect = beforeTarget.getBoundingClientRect();
    rect.width = afterTarget.getBoundingClientRect().right - rect.left;
    createHighlightRect(rect);
}
</script>
</script>
</body>
</html>