<!DOCTYPE html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        svg { width: 200px; height: 100px; }
        a div { width: 200px; height: 100px; background-color: yellow; }
    </style>
</head>
<body>
    <a href="#" class="icon-link">
        <svg>
            <defs>
                <rect id="blue-rectangle" width="200" height="100" style="fill:#00f;" />
            </defs>
            <use xlink:href="#blue-rectangle"></use>
        </svg>
        <div></div>
    </a>

    <div class="log"></div>

    <script>
        var expected = null;

        if (window.testRunner)
            testRunner.dumpAsText();

        function clickAt(x, y, expectedElement)
        {
            expected = expectedElement;
            if (window.eventSender) {
                eventSender.mouseMoveTo(x, y);
                eventSender.mouseDown();
                eventSender.mouseUp();
            }
            expected = null;
        }

        document.querySelector("a").addEventListener("click", function(event) {
            var result = "";
            if (event.target == expected)
                result = "PASS - " + event.target + " was clicked.";
            else
                result = "FAIL - expected " + expected + " but got " + event.target + ".";
            document.querySelector('.log').innerHTML += result + '<br />';
            event.preventDefault();
        }, false);

        clickAt(50, 50, document.querySelector("use"));
        clickAt(50, 130, document.querySelector("a div"));
    </script>
</body>