| <!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,expectedElm) |
| { |
| expected = expectedElm; |
| 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> |
