--- /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:tavmjong@free.fr"/>
+ <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:tavmjong@free.fr"/>
+ </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:tavmjong@free.fr"/>
+ <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:tavmjong@free.fr"/>
+ <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:tavmjong@free.fr"/>
+ </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:tavmjong@free.fr"/>
+ <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:tavmjong@free.fr"/>
+ <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:tavmjong@free.fr"/>
+ <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>