chromium/src/third_party/blink/web_tests/svg/dynamic-updates/SVG-dynamic-css-transform.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
 <html>
 <head>
 <script src="resources/SVGTestCase.js"></script>
 <script src="../../resources/js-test.js"></script>
 <style type="text/css" media="screen">
   .column {
     margin: 10px;
     display: inline-block;
     vertical-align: top;
   }
   .container {
     position: relative;
     height: 200px;
     width: 200px;
     margin: 10px;
     background-color: silver;
     border: 1px solid black;
   }
   #wrapper {
       position: relative;
       top: 0;
       left: 0;
       height: 60px;
       width: 60px;
       -webkit-transform-origin: top left; /* to match SVG */
   }
 </style>
 </head>
 <body>
 <div class="column">
   <div class="container">
     <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
       <rect id="rect1" x="0" y="0" height="60" width="60" fill="green"/>
     </svg>
   </div>
   <div class="container">
     <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
       <rect id="rect2" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
     </svg>
   </div>
 </div>
 <div class="column">
   <div class="container">
     <svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
       <rect id="rect3" x="0" y="0" height="60" width="60" fill="green"/>
     </svg>
   </div>
   <div class="container">
     <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
       <rect id="rect4" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
     </svg>
   </div>
 </div>
 <div class="column">
   <div class="container">
     <div id="wrapper">
       <svg id="svg3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
         <rect id="rect5" x="0" y="0" height="60" width="60" fill="green"/>
       </svg>
     </div>
   </div>
 </div>
 <h1>SVG 1.1 dynamic update tests</h1>
 <p id="description"></p>
 <p>Also, to pass the test, the rectangles should be rotated with 45deg</p>
 <div id="console"></div>
 <script>
 // [Expected rendering result] 'Test passed' message - and a series of PASS messages

 description("Tests dynamic updates of the '-webkit-transform' on SVG element");
 //createSVGTestCase();

 function dumpRect(r) {
   return "[" + r.x
         + " " + r.y
         + " " + r.width
         + " " + r.height
         + "]";
 }

 function dumpMatrix(matrix) {
   return "[" + matrix.a.toFixed(1)
         + " " + matrix.b.toFixed(1)
         + " " + matrix.c.toFixed(1)
         + " " + matrix.d.toFixed(1)
         + " " + matrix.e.toFixed(1)
         + " " + matrix.f.toFixed(1)
         + "]";
 }

 function dumpTransform(transform) {
   var transformTypes = {
     "0": "SVG_TRANSFORM_UNKNOWN",
     "1": "SVG_TRANSFORM_MATRIX",
     "2": "SVG_TRANSFORM_TRANSLATE",
     "3": "SVG_TRANSFORM_SCALE",
     "4": "SVG_TRANSFORM_ROTATE",
     "5": "SVG_TRANSFORM_SKEWX",
     "6": "SVG_TRANSFORM_SKEWY"
   };

   return "type=" + transformTypes[transform.type] + " matrix=" + dumpMatrix(transform.matrix);
 }

 var rect1 = document.getElementById("rect1");
 var rect2 = document.getElementById("rect2");
 var rect3 = document.getElementById("rect3");
 var rect4 = document.getElementById("rect4");
 var rect5 = document.getElementById("rect5");

 var wrapper = document.getElementById("wrapper");

 debug("");
 debug("Transform via style attribute");
 rect1.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");

 shouldBeEqualToString("rect1.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 shouldBeEqualToString("dumpMatrix(rect1.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "dumpMatrix(rect1.getCTM())");
 shouldBe("rect1.transform.baseVal.numberOfItems", "0");
 shouldBeNull("rect1.getAttribute('transform')");


 shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[0.0 1.0 -1.0 0.0 1000.0 1000.0]");
 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");

 rect2.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");

 shouldBeEqualToString("rect2.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "dumpMatrix(rect2.getCTM())");
 shouldBe("rect2.transform.baseVal.numberOfItems", "2");
 shouldBeEqualToString("rect2.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
 shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
 shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");

 debug("");
 debug("Transform via CSS");
 rect3.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";

 shouldBeEqualToString("rect3.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 shouldBeEqualToString("dumpMatrix(rect3.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "dumpMatrix(rect3.getCTM())");
 shouldBe("rect3.transform.baseVal.numberOfItems", "0");
 shouldBeNull("rect3.getAttribute('transform')");


 shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");

 rect4.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";

 shouldBeEqualToString("rect4.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
 shouldBeEqualToString("dumpMatrix(rect4.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "dumpMatrix(rect4.getCTM())");
 shouldBe("rect4.transform.baseVal.numberOfItems", "2");
 shouldBeEqualToString("rect4.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
 shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
 shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");

 debug("");
 debug("Transform on wrapper div");
 wrapper.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";
 shouldBeEqualToString("rect5.style.transform", "");
 shouldBeEqualToString("dumpMatrix(rect5.getCTM())", "[1.0 0.0 0.0 1.0 0.0 0.0]");
 shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
 shouldBe("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "dumpMatrix(rect5.getCTM())");
 shouldBe("rect5.transform.baseVal.numberOfItems", "0");
 shouldBeNull("rect5.getAttribute('transform')");

 debug("");
 var successfullyParsed = true;
 afterTest();
 </script>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
	<html>
	<head>
	<script src="resources/SVGTestCase.js"></script>
	<script src="../../resources/js-test.js"></script>
	<style type="text/css" media="screen">
	.column {
	margin: 10px;
	display: inline-block;
	vertical-align: top;
	}
	.container {
	position: relative;
	height: 200px;
	width: 200px;
	margin: 10px;
	background-color: silver;
	border: 1px solid black;
	}
	#wrapper {
	position: relative;
	top: 0;
	left: 0;
	height: 60px;
	width: 60px;
	-webkit-transform-origin: top left; /* to match SVG */
	}
	</style>
	</head>
	<body>
	<div class="column">
	<div class="container">
	<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
	<rect id="rect1" x="0" y="0" height="60" width="60" fill="green"/>
	</svg>
	</div>
	<div class="container">
	<svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
	<rect id="rect2" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
	</svg>
	</div>
	</div>
	<div class="column">
	<div class="container">
	<svg id="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
	<rect id="rect3" x="0" y="0" height="60" width="60" fill="green"/>
	</svg>
	</div>
	<div class="container">
	<svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
	<rect id="rect4" x="0" y="0" height="60" width="60" fill="green" transform="translate(1000, 1000) rotate(90)"/>
	</svg>
	</div>
	</div>
	<div class="column">
	<div class="container">
	<div id="wrapper">
	<svg id="svg3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="width:200px; height:200px;">
	<rect id="rect5" x="0" y="0" height="60" width="60" fill="green"/>
	</svg>
	</div>
	</div>
	</div>
	<h1>SVG 1.1 dynamic update tests</h1>
	<p id="description"></p>
	<p>Also, to pass the test, the rectangles should be rotated with 45deg</p>
	<div id="console"></div>
	<script>
	// [Expected rendering result] 'Test passed' message - and a series of PASS messages

	description("Tests dynamic updates of the '-webkit-transform' on SVG element");
	//createSVGTestCase();

	function dumpRect(r) {
	return "[" + r.x
	+ " " + r.y
	+ " " + r.width
	+ " " + r.height
	+ "]";
	}

	function dumpMatrix(matrix) {
	return "[" + matrix.a.toFixed(1)
	+ " " + matrix.b.toFixed(1)
	+ " " + matrix.c.toFixed(1)
	+ " " + matrix.d.toFixed(1)
	+ " " + matrix.e.toFixed(1)
	+ " " + matrix.f.toFixed(1)
	+ "]";
	}

	function dumpTransform(transform) {
	var transformTypes = {
	"0": "SVG_TRANSFORM_UNKNOWN",
	"1": "SVG_TRANSFORM_MATRIX",
	"2": "SVG_TRANSFORM_TRANSLATE",
	"3": "SVG_TRANSFORM_SCALE",
	"4": "SVG_TRANSFORM_ROTATE",
	"5": "SVG_TRANSFORM_SKEWX",
	"6": "SVG_TRANSFORM_SKEWY"
	};

	return "type=" + transformTypes[transform.type] + " matrix=" + dumpMatrix(transform.matrix);
	}

	var rect1 = document.getElementById("rect1");
	var rect2 = document.getElementById("rect2");
	var rect3 = document.getElementById("rect3");
	var rect4 = document.getElementById("rect4");
	var rect5 = document.getElementById("rect5");

	var wrapper = document.getElementById("wrapper");

	debug("");
	debug("Transform via style attribute");
	rect1.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");

	shouldBeEqualToString("rect1.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
	shouldBeEqualToString("dumpMatrix(rect1.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBe("dumpMatrix(new WebKitCSSMatrix(rect1.style.transform))", "dumpMatrix(rect1.getCTM())");
	shouldBe("rect1.transform.baseVal.numberOfItems", "0");
	shouldBeNull("rect1.getAttribute('transform')");


	shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[0.0 1.0 -1.0 0.0 1000.0 1000.0]");
	shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");

	rect2.setAttribute("style", "transform: translate(100px, 25px) scale(2) rotate(45deg)");

	shouldBeEqualToString("rect2.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
	shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBe("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "dumpMatrix(rect2.getCTM())");
	shouldBe("rect2.transform.baseVal.numberOfItems", "2");
	shouldBeEqualToString("rect2.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
	shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
	shouldBeEqualToString("dumpTransform(rect2.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");

	debug("");
	debug("Transform via CSS");
	rect3.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";

	shouldBeEqualToString("rect3.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
	shouldBeEqualToString("dumpMatrix(rect3.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBe("dumpMatrix(new WebKitCSSMatrix(rect3.style.transform))", "dumpMatrix(rect3.getCTM())");
	shouldBe("rect3.transform.baseVal.numberOfItems", "0");
	shouldBeNull("rect3.getAttribute('transform')");


	shouldBeEqualToString("dumpMatrix(rect2.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect2.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");

	rect4.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";

	shouldBeEqualToString("rect4.style.transform", "translate(100px, 25px) scale(2) rotate(45deg)");
	shouldBeEqualToString("dumpMatrix(rect4.getCTM())", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "[1.4 1.4 -1.4 1.4 100.0 25.0]");
	shouldBe("dumpMatrix(new WebKitCSSMatrix(rect4.style.transform))", "dumpMatrix(rect4.getCTM())");
	shouldBe("rect4.transform.baseVal.numberOfItems", "2");
	shouldBeEqualToString("rect4.getAttribute('transform')", "translate(1000, 1000) rotate(90)");
	shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(0))", "type=SVG_TRANSFORM_TRANSLATE matrix=[1.0 0.0 0.0 1.0 1000.0 1000.0]");
	shouldBeEqualToString("dumpTransform(rect4.transform.baseVal.getItem(1))", "type=SVG_TRANSFORM_ROTATE matrix=[0.0 1.0 -1.0 0.0 0.0 0.0]");

	debug("");
	debug("Transform on wrapper div");
	wrapper.style.transform = "translate(100px, 25px) scale(2) rotate(45deg)";
	shouldBeEqualToString("rect5.style.transform", "");
	shouldBeEqualToString("dumpMatrix(rect5.getCTM())", "[1.0 0.0 0.0 1.0 0.0 0.0]");
	shouldBeEqualToString("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "[1.0 0.0 0.0 1.0 0.0 0.0]");
	shouldBe("dumpMatrix(new WebKitCSSMatrix(rect5.style.transform))", "dumpMatrix(rect5.getCTM())");
	shouldBe("rect5.transform.baseVal.numberOfItems", "0");
	shouldBeNull("rect5.getAttribute('transform')");

	debug("");
	var successfullyParsed = true;
	afterTest();
	</script>
	</body>
	</html>