Moved from incoming to submitted.
authortbah <tavmjong@free.fr>
Sun, 17 Jun 2012 04:01:34 +0200
changeset 24 489dc31dce46
parent 23 123791e61c1a
child 25 830fa5ae230a
Moved from incoming to submitted.
contributors/tavmjong/submitted/transforms-basic-001-prefixed.svg
contributors/tavmjong/submitted/transforms-basic-001-ref.svg
contributors/tavmjong/submitted/transforms-basic-001.svg
contributors/tavmjong/submitted/transforms-basic-002-prefixed.svg
contributors/tavmjong/submitted/transforms-basic-002-ref.svg
contributors/tavmjong/submitted/transforms-basic-002.svg
contributors/tavmjong/submitted/transforms-basic-003-prefixed.svg
contributors/tavmjong/submitted/transforms-basic-003-ref.svg
contributors/tavmjong/submitted/transforms-basic-003.svg
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-001-prefixed.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -0,0 +1,171 @@
+<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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+    <html:link rel="help"
+	  href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+    <html:link rel="match"  href="transforms-basic-001-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">Uses CSS to transform boxes. No red should be seen.</desc>
+  </g>
+
+  <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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-001-ref.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -0,0 +1,97 @@
+<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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+  </g>
+
+  <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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-001.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -0,0 +1,130 @@
+<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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+    <html:link rel="help"
+	  href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+    <html:link rel="match"  href="transforms-basic-001-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">Uses CSS to transform boxes. No red should be seen.</desc>
+  </g>
+
+  <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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-002-prefixed.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic via Matrix</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+    <html:link rel="help"
+	  href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+    <html:link rel="match"  href="transforms-basic-002-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">Uses CSS to transform boxes. No red should be seen.</desc>
+  </g>
+
+  <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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-002-ref.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -0,0 +1,97 @@
+<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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic via Matrix</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+  </g>
+
+  <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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-002.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -0,0 +1,130 @@
+<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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic via Matrix</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+    <html:link rel="help"
+	  href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+    <html:link rel="match"  href="transforms-basic-002-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">Uses CSS to transform boxes. No red should be seen.</desc>
+  </g>
+
+  <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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-003-prefixed.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic via 3D Matrix</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+    <html:link rel="help"
+	  href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+    <html:link rel="match"  href="transforms-basic-002-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">Uses CSS to transform boxes. No red should be seen.</desc>
+  </g>
+
+  <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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-003-ref.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -0,0 +1,97 @@
+<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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic via 3D Matrix</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+  </g>
+
+  <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 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>
+
+    <!-- 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>
+
+</svg>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contributors/tavmjong/submitted/transforms-basic-003.svg	Sun Jun 17 04:01:34 2012 +0200
@@ -0,0 +1,130 @@
+<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"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <g id="testmeta">
+    <title>CSS Transforms: Basic via 3D Matrix</title>
+    <html:link rel="copyright"
+          href="http://www.w3.org/Graphics/SVG/Test/Copyright"/>
+    <html:link rel="license"
+          href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/>
+    <html:link rel="author"
+	  title="Tavmjong Bah"
+	  href="mailto:[email protected]"/>
+    <html:link rel="reviewer"
+	  title="NAME_OF_REVIEWER"
+	  href="mailto:EMAIL OR http://CONTACT_PAGE" />
+    <!-- YYYY-MM-DD -->
+    <html:link rel="help"
+	  href="http://www.w3.org/TR/2012/WD-css3-transforms-20120228/"/>
+    <html:link rel="match"  href="transforms-basic-002-ref.svg" />
+    <metadata class="flags">namespace svg</metadata>
+    <desc class="assert">Uses CSS to transform boxes. No red should be seen.</desc>
+  </g>
+
+  <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>
+
+</svg>