xy-getcomputedstyle.html | Explore in Territory

<!doctype html>
<html>
<title>Test computed style on x and y properties</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32">
	<defs>
		<circle id="circle" cx="50" cy="60" r="32"/>
	</defs>
	<rect class="test" x="37px" y="50%" width="100" height="100"/>
	<use class="test" x="17" y="51mm" xlink:href="#circle"/>
	<svg class="test" x="22%" y="4cm" width="100" height="100"/>
	<mask class="test" x="15pc" y="27pt"/>
	<image class="test" y="57"/>
	<foreignObject class="test" x="32%" y="1"/>
</svg>
<script>
	var elms = document.querySelectorAll(".test");
	var attrs = [ "x", "y" ];
	var expected = [ 
		[ "37px", "50%" ],
		[ "17px", "192.756px" ],
		[ "22%", "151.181px" ],
		[ "240px", "36px" ],
		[ "0px", "57px" ],
		[ "32%", "1px" ],
	];

	function runTestsWithZoom(zoomLevel) {
		document.querySelector("svg").setAttribute("style", "zoom: " + zoomLevel);
		for (var i = 0; i < elms.length; i++) {
			var style = getComputedStyle(elms[i]);
			for (var j = 0; j < attrs.length; j++) {
				test(function() {
					assert_equals(style.getPropertyValue(attrs[j]), expected[i][j]);
				}, "zoom=" + zoomLevel + ": " + elms[i].localName + " getPropertyValue(" + attrs[j] + ")");
				test(function() {
					assert_equals(style[attrs[j]], expected[i][j]);
				}, "zoom=" + zoomLevel + ": " +elms[i].localName + " style." + attrs[j]);
			}
		}
	}

	runTestsWithZoom(1);
	runTestsWithZoom(2);
</script>
</html>
chromium/third_party/blink/web_tests/svg/zoom/xy-getcomputedstyle.html
