use-event-retargeting.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/svg/custom/use-event-retargeting.html
