Basic CSS transforms.
authortbah <tavmjong@free.fr>
Thu, 08 Mar 2012 14:32:33 +0100
changeset 1 61fd7fcf935d
parent 0 e76c1b682e70
child 2 5c6bb6615ae4
Basic CSS transforms.
contributors/tavmjong/incoming/transforms-basic-001-prefixed.svg
contributors/tavmjong/incoming/transforms-basic-001-ref.svg
contributors/tavmjong/incoming/transforms-basic-001.svg
contributors/tavmjong/incoming/transforms-basic-002-prefixed.svg
contributors/tavmjong/incoming/transforms-basic-002-ref.svg
contributors/tavmjong/incoming/transforms-basic-002.svg
contributors/tavmjong/incoming/transforms-basic-003-prefixed.svg
contributors/tavmjong/incoming/transforms-basic-003.svg
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-001-prefixed.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,172 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+      <link rel="reviewer"
+	    title="NAME_OF_REVIEWER"
+	    href="mailto:EMAIL OR http://CONTACT_PAGE" />
+      <!-- YYYY-MM-DD -->
+      <link rel="help"
+	    href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+      <link rel="match"  href="transforms-basic-001-ref.svg" />
+      <meta name="flags" content="namespace svg" />
+      <meta name="assert" content="Uses CSS to transform boxes. No red should be seen."/>
+    </head>
+  </d:SVGTestCase>
+
+  <style id="test-style" type="text/css">
+      .translate {
+        -webkit-transform: translate(25px,30px);
+           -moz-transform: translate(25px,30px);
+            -ms-transform: translate(25px,30px);
+             -o-transform: translate(25px,30px);
+                transform: translate(25px,30px);
+      }
+      
+      .rotate {
+        -webkit-transform: rotate(30deg);
+           -moz-transform: rotate(30deg);
+            -ms-transform: rotate(30deg);
+             -o-transform: rotate(30deg);
+                transform: rotate(30deg);
+      }
+      
+      .rotate2 {
+        -webkit-transform: rotate(30deg, -25px, -10px);
+           -moz-transform: rotate(30deg, -25px, -10px);
+            -ms-transform: rotate(30deg, -25px, -10px);
+             -o-transform: rotate(30deg, -25px, -10px);
+                transform: rotate(30deg, -25px, -10px);
+      }
+      
+      .scale {
+        -webkit-transform: scale( 0.5, 1.5 );
+           -moz-transform: scale( 0.5, 1.5 );
+            -ms-transform: scale( 0.5, 1.5 );
+             -o-transform: scale( 0.5, 1.5 );
+                transform: scale( 0.5, 1.5 );
+      }
+      
+      .skewx {
+        -webkit-transform: skewX( 30deg );
+           -moz-transform: skewX( 30deg );
+            -ms-transform: skewX( 30deg );
+             -o-transform: skewX( 30deg );
+                transform: skewX( 30deg );
+      }
+      
+      .skewy {
+        -webkit-transform: skewY( 30deg );
+           -moz-transform: skewY( 30deg );
+            -ms-transform: skewY( 30deg );
+             -o-transform: skewY( 30deg );
+                transform: skewY( 30deg );
+      }
+  </style>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: red; }
+    .test { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="translate(25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="test">
+	<use class="translate" xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="rotate(30)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="rotate(30,-25,-10)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate2" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="scale(0.5,1.5)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="scale" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="skewX(30)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewx" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="skewY(30)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewy" xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-001-ref.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,94 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+    </head>
+  </d:SVGTestCase>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="translate(25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="rotate(30)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="rotate(30,-25,-10)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="scale(0.5,1.5)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="skewX(30)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="skewY(30)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-001.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,131 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+      <link rel="reviewer"
+	    title="NAME_OF_REVIEWER"
+	    href="mailto:EMAIL OR http://CONTACT_PAGE" />
+      <!-- YYYY-MM-DD -->
+      <link rel="help"
+	    href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+      <link rel="match"  href="transforms-basic-001-ref.svg" />
+      <meta name="flags" content="namespace svg" />
+      <meta name="assert" content="Uses CSS to transform boxes. No red should be seen."/>
+    </head>
+  </d:SVGTestCase>
+
+  <style id="test-style" type="text/css">
+    .translate { transform: translate( 25px, 30px );     }
+    .rotate    { transform: rotate( 30deg );             }
+    .rotate2   { transform: rotate(30deg, -25px, -10px); }
+    .scale     { transform: scale( 0.5, 1.5 );           }
+    .skewx     { transform: skewX( 30deg );              }
+    .skewy     { transform: skewY( 30deg );              }
+  </style>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: red; }
+    .test { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="translate(25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="test">
+	<use class="translate" xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="rotate(30)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="rotate(30,-25,-10)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate2" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="scale(0.5,1.5)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="scale" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="skewX(30)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewx" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="skewY(30)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewy" xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-002-prefixed.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,173 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic via Matrix</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+      <link rel="reviewer"
+	    title="NAME_OF_REVIEWER"
+	    href="mailto:EMAIL OR http://CONTACT_PAGE" />
+      <!-- YYYY-MM-DD -->
+      <link rel="help"
+	    href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+      <link rel="match"  href="transforms-basic-002-ref.svg" />
+      <meta name="flags" content="namespace svg" />
+      <meta name="assert" content="Uses CSS to transform boxes. No red should be seen."/>
+    </head>
+  </d:SVGTestCase>
+
+  <style id="test-style" type="text/css">
+      .translate {
+        -webkit-transform: matrix(1,0,0,1,25,30);
+           -moz-transform: matrix(1,0,0,1,25,30);
+            -ms-transform: matrix(1,0,0,1,25,30);
+             -o-transform: matrix(1,0,0,1,25,30);
+                transform: matrix(1,0,0,1,25,30);
+      }
+      
+      .rotate {
+        -webkit-transform: matrix(0.8660254,0.5,-0.5,0.8660254,0,0);
+           -moz-transform: matrix(0.8660254,0.5,-0.5,0.8660254,0,0);
+            -ms-transform: matrix(0.8660254,0.5,-0.5,0.8660254,0,0);
+             -o-transform: matrix(0.8660254,0.5,-0.5,0.8660254,0,0);
+                transform: matrix(0.8660254,0.5,-0.5,0.8660254,0,0);
+      }
+      
+      .rotate2 {
+        -webkit-transform: matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254);
+           -moz-transform: matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254);
+            -ms-transform: matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254);
+             -o-transform: matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254);
+                transform: matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254);
+      }
+      
+      .scale {
+        -webkit-transform: matrix(0.5,0,0,1.5,0,0);
+           -moz-transform: matrix(0.5,0,0,1.5,0,0);
+            -ms-transform: matrix(0.5,0,0,1.5,0,0);
+             -o-transform: matrix(0.5,0,0,1.5,0,0);
+                transform: matrix(0.5,0,0,1.5,0,0);
+      }
+      
+      .skewx {
+        -webkit-transform: matrix(1,0,0.57735027,1,0,0);
+           -moz-transform: matrix(1,0,0.57735027,1,0,0);
+            -ms-transform: matrix(1,0,0.57735027,1,0,0);
+             -o-transform: matrix(1,0,0.57735027,1,0,0);
+                transform: matrix(1,0,0.57735027,1,0,0);
+      }
+      
+      .skewy {
+        -webkit-transform: matrix(1,0.57735027,0,1,0,0);
+           -moz-transform: matrix(1,0.57735027,0,1,0,0);
+            -ms-transform: matrix(1,0.57735027,0,1,0,0);
+             -o-transform: matrix(1,0.57735027,0,1,0,0);
+                transform: matrix(1,0.57735027,0,1,0,0);
+      }
+      
+  </style>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: red; }
+    .test { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic via Matrix</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0,1,25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="test">
+	<use class="translate" xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate2" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.5,0,0,1.5,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="scale" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0.57735027,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewx" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0.57735027,0,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewy" xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-002-ref.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,94 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic via Matrix</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+    </head>
+  </d:SVGTestCase>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic via Matrix</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0,1,25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.5,0,0,1.5,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0.57735027,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0.57735027,0,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-002.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,131 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic via Matrix</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+      <link rel="reviewer"
+	    title="NAME_OF_REVIEWER"
+	    href="mailto:EMAIL OR http://CONTACT_PAGE" />
+      <!-- YYYY-MM-DD -->
+      <link rel="help"
+	    href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+      <link rel="match"  href="transforms-basic-001-ref.svg" />
+      <meta name="flags" content="namespace svg" />
+      <meta name="assert" content="Uses CSS to transform boxes. No red should be seen."/>
+    </head>
+  </d:SVGTestCase>
+
+  <style id="test-style" type="text/css">
+    .translate { transform: matrix(1,0,0,1,25,30);                                     }
+    .rotate    { transform: matrix(0.8660254,0.5,-0.5,0.8660254,0,0);                  }
+    .rotate2   { transform: matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254); }
+    .scale     { transform: matrix(0.5,0,0,1.5,0,0);                                   }
+    .skewx     { transform: matrix(1,0,0.57735027,1,0,0);                              }
+    .skewy     { transform: matrix(1,0.57735027,0,1,0,0);                              }
+  </style>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: red; }
+    .test { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic via Matrix</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0,1,25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="test">
+	<use class="translate" xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate2" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.5,0,0,1.5,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="scale" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0.57735027,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewx" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0.57735027,0,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewy" xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-003-prefixed.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,174 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic via 3D Matrix</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+      <link rel="reviewer"
+	    title="NAME_OF_REVIEWER"
+	    href="mailto:EMAIL OR http://CONTACT_PAGE" />
+      <!-- YYYY-MM-DD -->
+      <link rel="help"
+	    href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+      <link rel="match"  href="transforms-basic-002-ref.svg" />
+      <meta name="flags" content="namespace svg" />
+      <meta name="assert" content="Uses CSS to transform boxes. No red should be seen."/>
+    </head>
+  </d:SVGTestCase>
+
+  <style id="test-style" type="text/css">
+
+      .translate {
+        -webkit-transform: matrix3d(1,0,0,0,  0,1,0,0,  0,0,1,0,  25,30,0,1);
+           -moz-transform: matrix3d(1,0,0,0,  0,1,0,0,  0,0,1,0,  25,30,0,1);
+            -ms-transform: matrix3d(1,0,0,0,  0,1,0,0,  0,0,1,0,  25,30,0,1);
+             -o-transform: matrix3d(1,0,0,0,  0,1,0,0,  0,0,1,0,  25,30,0,1);
+                transform: matrix3d(1,0,0,0,  0,1,0,0,  0,0,1,0,  25,30,0,1);
+      }
+      
+      .rotate {
+        -webkit-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0,  0,0,0,1);
+           -moz-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0,  0,0,0,1);
+            -ms-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0,  0,0,0,1);
+             -o-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0,  0,0,0,1);
+                transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0,  0,0,0,1);
+      }
+      
+      .rotate2 {
+        -webkit-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0, -8.3493649,11.160254,0,1);
+           -moz-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0, -8.3493649,11.160254,0,1);
+            -ms-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0, -8.3493649,11.160254,0,1);
+             -o-transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0, -8.3493649,11.160254,0,1);
+                transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0, -8.3493649,11.160254,0,1);
+      }
+      
+      .scale {
+        -webkit-transform: matrix3d(0.5,0,0,0,  0,1.5,0,0,  0,0,1,0,  0,0,0,1);
+           -moz-transform: matrix3d(0.5,0,0,0,  0,1.5,0,0,  0,0,1,0,  0,0,0,1);
+            -ms-transform: matrix3d(0.5,0,0,0,  0,1.5,0,0,  0,0,1,0,  0,0,0,1);
+             -o-transform: matrix3d(0.5,0,0,0,  0,1.5,0,0,  0,0,1,0,  0,0,0,1);
+                transform: matrix3d(0.5,0,0,0,  0,1.5,0,0,  0,0,1,0,  0,0,0,1);
+      }
+      
+      .skewx {
+        -webkit-transform: matrix3d(1,0,0,0,  0.57735027,1,0,0,  0,0,1,0,  0,0,0,1);
+           -moz-transform: matrix3d(1,0,0,0,  0.57735027,1,0,0,  0,0,1,0,  0,0,0,1);
+            -ms-transform: matrix3d(1,0,0,0,  0.57735027,1,0,0,  0,0,1,0,  0,0,0,1);
+             -o-transform: matrix3d(1,0,0,0,  0.57735027,1,0,0,  0,0,1,0,  0,0,0,1);
+                transform: matrix3d(1,0,0,0,  0.57735027,1,0,0,  0,0,1,0,  0,0,0,1);
+      }
+      
+      .skewy {
+        -webkit-transform: matrix3d(1,0.57735027,0,0,  0,1,0,0,  0,0,1,0,  0,0,0,1);
+           -moz-transform: matrix3d(1,0.57735027,0,0,  0,1,0,0,  0,0,1,0,  0,0,0,1);
+            -ms-transform: matrix3d(1,0.57735027,0,0,  0,1,0,0,  0,0,1,0,  0,0,0,1);
+             -o-transform: matrix3d(1,0.57735027,0,0,  0,1,0,0,  0,0,1,0,  0,0,0,1);
+                transform: matrix3d(1,0.57735027,0,0,  0,1,0,0,  0,0,1,0,  0,0,0,1);
+      }
+      
+  </style>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: red; }
+    .test { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic via 3D Matrix</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0,1,25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="test">
+	<use class="translate" xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate2" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.5,0,0,1.5,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="scale" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0.57735027,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewx" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0.57735027,0,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewy" xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/incoming/transforms-basic-003.svg	Thu Mar 08 14:32:33 2012 +0100
@@ -0,0 +1,131 @@
+<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">
+  <d:SVGTestCase xmlns:d="http://www.w3.org/2012/03/svg/testsuite/description/"
+		 xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+      <title>CSS Transforms: Basic via 3D Matrix</title>
+      <link rel="author"
+	    title="Tavmjong Bah"
+	    href="mailto:[email protected]"/>
+      <link rel="reviewer"
+	    title="NAME_OF_REVIEWER"
+	    href="mailto:EMAIL OR http://CONTACT_PAGE" />
+      <!-- YYYY-MM-DD -->
+      <link rel="help"
+	    href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+      <link rel="match"  href="transforms-basic-002-ref.svg" />
+      <meta name="flags" content="namespace svg" />
+      <meta name="assert" content="Uses CSS to transform boxes. No red should be seen."/>
+    </head>
+  </d:SVGTestCase>
+
+  <style id="test-style" type="text/css">
+    .translate { transform: matrix3d(1,0,0,0,  0,1,0,0,  0,0,1,0,  25,30,0,1);        }
+    .rotate    { transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0,  0,0,0,1); }
+    .rotate2   { transform: matrix3d(0.8660254,0.5,0,0,  -0.5,0.8660254,0,0,  0,0,1,0, -8.3493649,11.160254,0,1); }
+    .scale     { transform: matrix3d(0.5,0,0,0,  0,1.5,0,0,  0,0,1,0,  0,0,0,1);      }
+    .skewx     { transform: matrix3d(1,0,0,0,  0.57735027,1,0,0,  0,0,1,0,  0,0,0,1); }
+    .skewy     { transform: matrix3d(1,0.57735027,0,0,  0,1,0,0,  0,0,1,0,  0,0,0,1); }
+  </style>
+
+  <style type="text/css">
+    .orig { fill: none; stroke-width: 2; stroke: gray; }
+    .ref  { fill: none; stroke-width: 2; stroke: red; }
+    .test { fill: none; stroke-width: 2; stroke: green; }
+  </style>
+
+  <defs>
+    <rect id="basic" x="-25" y="-10" width="50" height="20"/>
+  </defs>
+
+  <text id="title" x="240" y="50" style="fill:black; font-size:24px; text-anchor:middle;">CSS Transforms: Basic via 3D Matrix</text>
+
+  <g id="test-body-content">
+
+    <!-- TRANSLATE -->
+    <g transform="translate(120,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0,1,25,30)">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="test">
+	<use class="translate" xlink:href="#basic"/>
+      </g>
+    </g>
+
+    <!-- ROTATE -->
+    <g transform="translate(240,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- ROTATE w/ Optional Position-->
+    <g transform="translate(360,100)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.8660254,0.5,-0.5,0.8660254,-8.3493649,11.160254)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="rotate2" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- Scale -->
+    <g transform="translate(120,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(0.5,0,0,1.5,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="scale" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewX -->
+    <g transform="translate(240,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0,0.57735027,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewx" xlink:href="#basic" />
+      </g>
+    </g>
+
+    <!-- SkewY -->
+    <g transform="translate(360,220)">
+      <g class="orig">
+	<use xlink:href="#basic"/>
+      </g>
+      <g class="ref" transform="matrix(1,0.57735027,0,1,0,0)">
+	<use xlink:href="#basic" />
+      </g>
+      <g class="test">
+	<use class="skewy" xlink:href="#basic" />
+      </g>
+    </g>
+
+  </g>
+
+  <rect id="test-frame"
+	x="0.5" y="0.5" width="479" height="359"
+	fill="none" stroke="black"/>
+
+</svg>