1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
  
     | 
    
      <!DOCTYPE html>
<html lang='en'>
<head>
 <title>coords-dom-04-f-manual.svg</title>
 <meta charset='utf-8'>
</head>
<body>
 <h1>Source SVG: coords-dom-04-f-manual.svg</h1>
<svg id="svg-root" width="100%" height="100%"
  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" onload="test()">
  <!--======================================================================-->
  <!--=  Copyright 2008 World Wide Web Consortium, (Massachusetts          =-->
  <!--=  Institute of Technology, European Research Consortium for         =-->
  <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
  <!--=  All Rights Reserved.                                              =-->
  <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  <!--======================================================================-->
  
  <title id="test-title">$RCSfile: coords-dom-04-f.svg,v $</title>
  <defs>
    <font-face
      font-family="SVGFreeSansASCII"
      unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
      </font-face-src>
    </font-face>
  </defs>
  <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
	<defs>
		<style>
			#test-body-content rect { stroke: black; }
		</style>
		<script type="text/ecmascript"><![CDATA[
		var pos = { "x": 20, "y": 40 };
		var subtestCounter = 1;
		var passed = true;
		
		function toString(m)
		{	
			var decimals = 0;
			return m.a.toFixed(decimals) + "," + 
				   m.b.toFixed(decimals) + "," + 
				   m.c.toFixed(decimals) + "," + 
				   m.d.toFixed(decimals) + "," + 
				   m.e.toFixed(decimals) + "," + 
				   m.f.toFixed(decimals);
		}
		function referenceEqual(m1,ref,eps)
		{
			return (Math.abs(m1.a-ref[0]) < eps &&
					Math.abs(m1.b-ref[1]) < eps &&
					Math.abs(m1.c-ref[2]) < eps &&
					Math.abs(m1.d-ref[3]) < eps &&
					Math.abs(m1.e-ref[4]) < eps &&
					Math.abs(m1.f-ref[5]) < eps);
		}
		function assertEquals(m, ref, eps)
		{
			var result = document.createElementNS("http://www.w3.org/2000/svg", "text");
			var resultrect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
			result.setAttribute("x", pos.x);
			result.setAttribute("y", pos.y);
			resultrect.setAttribute("fill", "lime");
			resultrect.setAttribute("width", 15);
			resultrect.setAttribute("height", 15);
			resultrect.setAttribute("y", pos.y-15);
			
			if(referenceEqual(m, ref, eps))
			{	
				result.textContent = "Passed subtest #" + subtestCounter;
			}
			else
			{
				passed = false;
				result.textContent = "Failed subtest #" + subtestCounter + ". Expected " + ref + " but got " + toString(m);
			}
			pos.y += 20;
			subtestCounter++;
			var results = document.getElementById("subteststatus");
			results.appendChild(resultrect)
			results.appendChild(result);
		}
		
		function test()
		{
			eps = 0.005; // "close enough"
			r = document.getElementById("r");
			t1 = r.transform.baseVal.getItem(0);
			t2 = r.transform.baseVal.getItem(1);
			
			// check that matrices are as specified in the markup
			assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
			assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
			// consolidate
			tfm = r.transform.baseVal.consolidate();
			
			// check that the consolidation is ok
			assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
			
			// check that t1 and t2 were not affected by the consolidation
			assertEquals(t1.matrix, [1, 0, 0, 1, 10, 10], eps);
			assertEquals(t2.matrix, [0, 1, -1, 0, 0, 0], eps);
			
			// check that modifying t1 has no effect on the consolidated transform
			t1.setTranslate(10,200);
			assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
			assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
			
			// check that modifying t2 has no effect on the consolidated transform
			t2.setRotate(-90, 0, 0);
			assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
			assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 10], eps);
			
			// check that modifying the consolidated transform has no effect on the t1 and t2 transforms
			tfm.matrix.f = 400;
			assertEquals(tfm.matrix, [0, 1, -1, 0, 10, 400], eps);
			assertEquals(t1.matrix, [1, 0, 0, 1, 10, 200], eps);
			assertEquals(t2.matrix, [0, -1, 1, 0, 0, 0], eps);
		
			document.getElementById("status").setAttributeNS(null, "fill", passed ? "lime" : "red");
			document.getElementById("scriptstatus").textContent = "Scripting enabled";
		}
	
	]]></script>
	</defs>
	<g transform="translate(20 -10)">
		<g id="subteststatus" transform="translate(0,40)">
			<rect id="status" y="5" width="15" height="15" fill="red"/>
			<text id="scriptstatus" y="20" x="20" >Scripting disabled</text>
		</g>
	
		<polyline id="r" fill="none" stroke="green" display="none" transform="translate(10 10) rotate(90)" points="0 0 30 40 80 -20" stroke-width="10"/>
	</g>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.5 $</text>
  </g>
  <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
  <!-- comment out this watermark once the test is approved --><!--
  <g id="draft-watermark">
    <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
    <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
      text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
  </g>-->
</svg>
</body>
</html>
 
     |