--- a/contributors/tavmjong/incoming/transforms-basic-001-prefixed.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,171 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-001-ref.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,97 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-001.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,130 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-002-prefixed.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,172 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-002-ref.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,97 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-002.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,130 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-003-prefixed.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,173 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-003-ref.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,97 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
--- a/contributors/tavmjong/incoming/transforms-basic-003.svg Sun Jun 17 04:01:34 2012 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,130 +0,0 @@
-<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:tavmjong@free.fr"/>
- <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>
