mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-03-16 22:10:32 +00:00
Add W3C SVG 1.2 Tiny test suite
This commit is contained in:
Juriy Zaytsev
parent
1893b691c5
commit
ea4e1e3a9c
3202 changed files with 228538 additions and 8 deletions
|
|
@ -277,14 +277,11 @@
|
|||
* @method _initWrapperElement
|
||||
*/
|
||||
_initWrapperElement: function (width, height) {
|
||||
var wrapperProperties = {
|
||||
className: 'canvas_container',
|
||||
style: {
|
||||
width: width + 'px',
|
||||
height: height + 'px'
|
||||
}
|
||||
};
|
||||
var wrapper = Element.wrap(this.getElement(), 'div', wrapperProperties);
|
||||
var wrapper = Element.wrap(this.getElement(), 'div', { className: 'canvas_container' });
|
||||
wrapper.setStyle({
|
||||
width: width + 'px',
|
||||
height: height + 'px'
|
||||
});
|
||||
this._makeElementUnselectable(wrapper);
|
||||
this.wrapper = wrapper;
|
||||
},
|
||||
|
|
|
|||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-02-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-02-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-02-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-02-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="udom-traitaccess-207-t.html">udom-traitaccess-207-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-03-t.html">→ animate-elem-03-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-02-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-02-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-02-t" src="../png/animate-elem-02-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test 'additive' and 'accumulate' attributes.</p>
|
||||
<p>
|
||||
The four pictures show the effect with the four possible combinations of 'additive' (either 'replace' or 'sum') and
|
||||
'accumulate' (either 'none' or 'sum'). Because two animations are animating the height, the effects of 'additive' and
|
||||
'accumulate' are sometimes different than when there is only a single animation.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="udom-traitaccess-207-t.html">udom-traitaccess-207-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-03-t.html">→ animate-elem-03-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-03-t.html
Executable file
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-03-t.html
Executable file
|
|
@ -0,0 +1,90 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-03-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-03-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-02-t.html">animate-elem-02-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-04-t.html">→ animate-elem-04-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-03-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-03-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-03-t" src="../png/animate-elem-03-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test inheritance of animated properties.</p>
|
||||
<p>
|
||||
Three colored text strings appear. All three are inside of the same 'g' element. The 'g' element has its 'font-size'
|
||||
animated from 30 to 40, and its 'fill' from #00f (blue) to #070 (green).
|
||||
</p>
|
||||
<p>
|
||||
The first colored 'text' element has the font-size set, so the animation of the parent 'g' only affects the fill color.
|
||||
The second has the fill set and font-size set, so no inherited values are used. The font-size and fill color stay
|
||||
constant. The third colored 'text' element has neither of these properties specified and thus inherits both animated
|
||||
values - the fill color changes and the text grows in size.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-02-t.html">animate-elem-02-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-04-t.html">→ animate-elem-04-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-04-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-04-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-04-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-04-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-03-t.html">animate-elem-03-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-05-t.html">→ animate-elem-05-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-04-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-04-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-04-t" src="../png/animate-elem-04-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test different ways of defining a motion path.</p>
|
||||
<p>
|
||||
An animation moves a triangle along a path. Reference rectangles, lines and text are provided to help show what the
|
||||
correct behavior is. The red text shows the way that the motion path is specified.
|
||||
</p>
|
||||
<p>This animation uses the 'from' and 'to' attributes to define the motion path.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-03-t.html">animate-elem-03-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-05-t.html">→ animate-elem-05-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-05-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-05-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-05-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-05-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-04-t.html">animate-elem-04-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-06-t.html">→ animate-elem-06-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-05-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-05-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-05-t" src="../png/animate-elem-05-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test different ways of defining a motion path.</p>
|
||||
<p>
|
||||
An animation moves a triangle along a path. Reference rectangles, lines and text are provided to help show what
|
||||
the correct behavior is. The red text shows the way that the motion path is specified.
|
||||
</p>
|
||||
<p>This animation uses the 'values' attribute to define the motion path, with a linear calcMode.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-04-t.html">animate-elem-04-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-06-t.html">→ animate-elem-06-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-06-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-06-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-06-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-06-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-05-t.html">animate-elem-05-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-07-t.html">→ animate-elem-07-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-06-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-06-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-06-t" src="../png/animate-elem-06-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test different ways of defining a motion path.</p>
|
||||
<p>
|
||||
An animation moves a triangle along a path. Reference rectangles, lines and text are provided to help show what
|
||||
the correct behavior is. The red text shows the way that the motion path is specified.
|
||||
</p>
|
||||
<p>This animation uses the 'path' attribute to define the motion path.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-05-t.html">animate-elem-05-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-07-t.html">→ animate-elem-07-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-07-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-07-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-07-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-07-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-06-t.html">animate-elem-06-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-08-t.html">→ animate-elem-08-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-07-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-07-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-07-t" src="../png/animate-elem-07-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test different ways of defining a motion path.</p>
|
||||
<p>
|
||||
An animation moves a triangle along a path. Reference rectangles, lines and text are provided to help show what the
|
||||
correct behavior is. The red text shows the way that the motion path is specified.
|
||||
</p>
|
||||
<p>This animation uses the 'mpath' sub-element to define the motion path.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-06-t.html">animate-elem-06-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-08-t.html">→ animate-elem-08-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-08-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-08-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-08-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-08-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-07-t.html">animate-elem-07-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-09-t.html">→ animate-elem-09-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-08-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-08-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-08-t" src="../png/animate-elem-08-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test rotate='auto' and rotate='auto-reverse'.</p>
|
||||
<p>
|
||||
Two animations have been defined that move a triangle along a path. The first animation specifies rotate='auto',
|
||||
which causes the object to be rotated along the curve of the path. The second animation specifies rotate='auto-reverse',
|
||||
which causes the object to be flipped and then rotated along the curve of the path.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-07-t.html">animate-elem-07-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-09-t.html">→ animate-elem-09-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
93
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-09-t.html
Executable file
93
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-09-t.html
Executable file
|
|
@ -0,0 +1,93 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-09-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-09-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-08-t.html">animate-elem-08-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-10-t.html">→ animate-elem-10-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-09-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-09-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-09-t" src="../png/animate-elem-09-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test possible values for 'calcMode="discrete"'</p>
|
||||
<p>
|
||||
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the
|
||||
correct behavior is. The black text and ruler lines help show the sizes and movement of the rectangles over time.
|
||||
</p>
|
||||
<p>
|
||||
The discrete animations should show stair-stepping animations, with quantum-level jumps every two seconds in
|
||||
these tests. The linear animations change constantly with each keyframe to keyframe section, with the result
|
||||
that the change is faster when there is a larger change within a given amount of time. The paced animations
|
||||
change constantly over the entire animation, regardless of the values at particular keyframes. For
|
||||
calcMode='spline' in this test case, the initial rate of change is defined to be the same as linear, but the
|
||||
last jump has an ease-in/ease-out effect where the change is slower at the start and end but faster in the
|
||||
middle.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-08-t.html">animate-elem-08-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-10-t.html">→ animate-elem-10-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
88
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-10-t.html
Executable file
88
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-10-t.html
Executable file
|
|
@ -0,0 +1,88 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-10-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-10-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-09-t.html">animate-elem-09-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-11-t.html">→ animate-elem-11-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-10-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-10-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-10-t" src="../png/animate-elem-10-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test possible values for 'calcMode="linear"'</p>
|
||||
<p>
|
||||
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the
|
||||
correct behavior is. The black text and ruler lines help show the sizes and movement of the rectangles over time.
|
||||
</p>
|
||||
<p>
|
||||
The linear animations change constantly with each keyframe to keyframe section, with the result that the change
|
||||
is faster when there is a larger change within a given amount of time.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-09-t.html">animate-elem-09-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-11-t.html">→ animate-elem-11-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-11-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-11-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-11-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-11-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-10-t.html">animate-elem-10-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-12-t.html">→ animate-elem-12-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-11-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-11-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-11-t" src="../png/animate-elem-11-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test possible values for 'calcMode="paced"'</p>
|
||||
<p>
|
||||
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the
|
||||
correct behavior is. The black text and ruler lines help show the sizes and movement of the rectangles over time.
|
||||
</p>
|
||||
<p>The paced animations change constantly over the entire animation, regardless of the values at particular keyframes.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-10-t.html">animate-elem-10-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-12-t.html">→ animate-elem-12-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
88
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-12-t.html
Executable file
88
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-12-t.html
Executable file
|
|
@ -0,0 +1,88 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-12-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-12-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-11-t.html">animate-elem-11-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-13-t.html">→ animate-elem-13-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-12-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-12-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-12-t" src="../png/animate-elem-12-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test possible values for 'calcMode="spline"'</p>
|
||||
<p>
|
||||
Two animations have been defined. For each animation, ruler lines and text are provided to help show what the correct
|
||||
behavior is. The black text and ruler lines help show the sizes and movement of the rectangles over time.
|
||||
</p>
|
||||
<p>
|
||||
For calcMode='spline' in this test case, the initial rate of change is defined to be the same as linear, but the last
|
||||
jump has an ease-in/ease-out effect where the change is slower at the start and end but faster in the middle.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-11-t.html">animate-elem-11-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-13-t.html">→ animate-elem-13-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-13-t.html
Executable file
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-13-t.html
Executable file
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-13-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-13-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-12-t.html">animate-elem-12-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-14-t.html">→ animate-elem-14-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-13-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-13-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-13-t" src="../png/animate-elem-13-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test 'from', 'by', 'to' and 'values'</p>
|
||||
<p>
|
||||
Six animations have been defined. All six animations define the same simultaneous behavior, but use different
|
||||
combinations of attributes 'from', 'by', 'to' and 'values'. In all cases, from time 2 seconds to time 5 seconds,
|
||||
the rectangle should change from a width of 30 to a width of 300.
|
||||
</p>
|
||||
<p>The red text shows the attributes that were used for that particular animation.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-12-t.html">animate-elem-12-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-14-t.html">→ animate-elem-14-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-14-t.html
Executable file
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-14-t.html
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-14-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-14-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-13-t.html">animate-elem-13-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-15-t.html">→ animate-elem-15-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-14-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-14-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-14-t" src="../png/animate-elem-14-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test 'calcMode'=discrete</p>
|
||||
<p>One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The black text and ruler lines help show the size and movement of the rectangle over time.</p>
|
||||
<p>This test shows an animation with calcMode="discrete" (i.e., a jumping animation).</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-13-t.html">animate-elem-13-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-15-t.html">→ animate-elem-15-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-15-t.html
Executable file
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-15-t.html
Executable file
|
|
@ -0,0 +1,89 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-15-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-15-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-14-t.html">animate-elem-14-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-17-t.html">→ animate-elem-17-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-15-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-15-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-15-t" src="../png/animate-elem-15-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test 'calcMode'=paced</p>
|
||||
<p>
|
||||
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided to help show
|
||||
what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The black
|
||||
text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</p>
|
||||
<p>
|
||||
This test shows calcMode="paced" for an animation that has constant velocity, thus showing how 'values' and
|
||||
'keyTimes' are ignored.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-14-t.html">animate-elem-14-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-17-t.html">→ animate-elem-17-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-17-t.html
Executable file
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-17-t.html
Executable file
|
|
@ -0,0 +1,90 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-17-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-17-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-15-t.html">animate-elem-15-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-19-t.html">→ animate-elem-19-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-17-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-17-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-17-t" src="../png/animate-elem-17-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test 'calcMode'=spline</p>
|
||||
<p>
|
||||
One animation has been defined to animate the height of a rectangle. Ruler lines and text are provided to help
|
||||
show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes.
|
||||
The black text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</p>
|
||||
<p>
|
||||
This animation shows calcMode="spline". Between time 4 seconds and 8 seconds, the animation displays an
|
||||
ease-in/ease-out approach instead of a constant linear approach which would have been the case if calcMode had
|
||||
been linear instead.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-15-t.html">animate-elem-15-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-19-t.html">→ animate-elem-19-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-19-t.html
Executable file
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-19-t.html
Executable file
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-19-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-19-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-17-t.html">animate-elem-17-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-20-t.html">→ animate-elem-20-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-19-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-19-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-19-t" src="../png/animate-elem-19-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test 'calcMode'=linear</p>
|
||||
<p>
|
||||
One animation has been defined to animate the width of a rectangle. Ruler lines and text are provided to help show
|
||||
what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The black
|
||||
text and ruler lines help show the size and movement of the rectangle over time.
|
||||
</p>
|
||||
<p>This test shows an animation with calcMode="linear".</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-17-t.html">animate-elem-17-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-20-t.html">→ animate-elem-20-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
99
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-20-t.html
Executable file
99
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-20-t.html
Executable file
|
|
@ -0,0 +1,99 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-20-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-20-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-19-t.html">animate-elem-19-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-201-t.html">→ animate-elem-201-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-20-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-20-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-20-t" src="../png/animate-elem-20-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>A quick animation test.</p>
|
||||
<p>
|
||||
The assumption is that you will first click on "fade in" and then click on "fade out", each exactly once. The
|
||||
first time you select the link 'fade in', you should see a red square appearing, gradually and smoothly fading
|
||||
from white to red over the course of three seconds.
|
||||
</p>
|
||||
<p>
|
||||
The rendered picture should match the reference image, (except for possible variations in the labeling text
|
||||
(per CSS2 rules)) after activating the link on the fade-in button the first time and waiting three seconds for the
|
||||
animation to compete. The picture should remain looking the same way indefinitely, until another link is activated.
|
||||
</p>
|
||||
<p>
|
||||
With the second click on "fade in", however, the behavior might be different. In the case of having a first click
|
||||
on "fade in", waiting three seconds, and then immediately perform a first click on "fade out", waiting three seconds,
|
||||
and then immediately perform a second click on "fade in", you should see the following. After the first click on
|
||||
"fade in", the red square goes from white to red. After the first click on "fade out", the red square goes from red
|
||||
to white. After the second click on "fade in", however, the red square goes from white to red, and then goes back
|
||||
from red to white. This is because of the hyperlinking rules as they relate to resolved start times in the SMIL
|
||||
2.1 specification.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-19-t.html">animate-elem-19-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-201-t.html">→ animate-elem-201-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-201-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-201-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-201-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-201-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-20-t.html">animate-elem-20-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-202-t.html">→ animate-elem-202-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-201-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-201-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-201-t" src="../png/animate-elem-201-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Five orange rectangles have one animation each. When an
|
||||
animation is active it moves its orange rectangle from its
|
||||
left marker to its right marker. The active intervals
|
||||
are [1-2], [4-6] and [8-10].
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-20-t.html">animate-elem-20-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-202-t.html">→ animate-elem-202-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
92
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-202-t.html
Executable file
92
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-202-t.html
Executable file
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-202-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-202-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-201-t.html">animate-elem-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-203-t.html">→ animate-elem-203-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-202-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-202-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-202-t" src="../png/animate-elem-202-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Precision test for accumulative animateMotion.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearence of something
|
||||
red and that circles are not centered below the paths given in gray.
|
||||
</p>
|
||||
<p>
|
||||
Circles are moved along squares given with the path attribute,
|
||||
repeatDur and accumulate with a repeatDur of 30s and repetition.
|
||||
Different values for the rotate attribute are given too, this has no visible effect,
|
||||
because centered circles are moved.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-201-t.html">animate-elem-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-203-t.html">→ animate-elem-203-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
99
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-203-t.html
Executable file
99
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-203-t.html
Executable file
|
|
@ -0,0 +1,99 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-203-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-203-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-202-t.html">animate-elem-202-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-205-t.html">→ animate-elem-205-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-203-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-203-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-203-t" src="../png/animate-elem-203-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Precision test for additive animateMotion using,
|
||||
mpath element, path attribute, values, from-to.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearence of the red fill
|
||||
of the circle. A switch of the stroke of the circle from blue to gray indicates
|
||||
the end of the test at 30s.
|
||||
</p>
|
||||
<p>
|
||||
A circles is moved along some paths
|
||||
(two of them indicated in gray) with
|
||||
a duration of 30s using additive animateMotion.
|
||||
The superposition is no motion.
|
||||
The circle is positioned always at the bottom right.
|
||||
The colour of the circle switches from blue to gray after
|
||||
the animation is finished.
|
||||
If the red center of the circle becomes visible, an error is
|
||||
occured.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-202-t.html">animate-elem-202-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-205-t.html">→ animate-elem-205-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
116
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-205-t.html
Executable file
116
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-205-t.html
Executable file
|
|
@ -0,0 +1,116 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-205-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-205-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-203-t.html">animate-elem-203-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-206-t.html">→ animate-elem-206-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-205-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-205-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-205-t" src="../png/animate-elem-205-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Precision test for linear animateMotion with separated path fragments,
|
||||
mpath element, rotate auto.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearence of the red fill
|
||||
of the test circle. The circle has to follow exactly the paths given
|
||||
in gray.
|
||||
</p>
|
||||
<p>
|
||||
A linear animateMotion of a blue stroked square with a centered
|
||||
circle is compared with four animateMotion of a red square
|
||||
with a centered circle.
|
||||
The motion of the red square is following the
|
||||
combination of four animateMotion following on
|
||||
each other and is the same as the motion of the blue
|
||||
square, because the timing is choosen in such a way.
|
||||
Therefore the blue square covers always the red one
|
||||
completely.
|
||||
</p>
|
||||
<p>
|
||||
The path is given in gray. The red fill of the circle
|
||||
is always covered with the gray path.
|
||||
Eight gray stroked markers are lightened, when the circle
|
||||
is exactly above the marker. The red fill of the marker
|
||||
is exactly covered by the blue stroked circle.
|
||||
If something red gets visible, an error is occured
|
||||
and the animateMotion is not linear.
|
||||
</p>
|
||||
<p>
|
||||
The exact timing is calculated using an analytical
|
||||
integration of the path length of the sub paths
|
||||
(this is available for quadratic or linear curves).
|
||||
With this method the path position and the
|
||||
time can be determined as functions of the usual
|
||||
parametrisation of the used Bézier curves.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-203-t.html">animate-elem-203-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-206-t.html">→ animate-elem-206-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
94
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-206-t.html
Executable file
94
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-206-t.html
Executable file
|
|
@ -0,0 +1,94 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-206-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-206-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-205-t.html">animate-elem-205-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-207-t.html">→ animate-elem-207-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-206-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-206-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-206-t" src="../png/animate-elem-206-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Precision tests for animateMotion with animated mpath.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearence of something
|
||||
red and that circles are not centered below the paths given in gray.
|
||||
</p>
|
||||
<p>
|
||||
Blue rectangles and a red circles are moved along
|
||||
light blue paths with a duration of 30s. The paths itself are animated.
|
||||
This results in motions along the gray paths. The rectangles
|
||||
are aligned along the animated light blue paths.
|
||||
The circle is always covered by the path given in gray.
|
||||
If something red gets visible, an error is occured.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-205-t.html">animate-elem-205-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-207-t.html">→ animate-elem-207-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
116
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-207-t.html
Executable file
116
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-207-t.html
Executable file
|
|
@ -0,0 +1,116 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-207-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-207-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-206-t.html">animate-elem-206-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-209-t.html">→ animate-elem-209-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-207-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-207-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-207-t" src="../png/animate-elem-207-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Precision test for paced animateMotion with separated path fragments,
|
||||
mpath element, rotate auto.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearence of the red fill
|
||||
of the test circle. The circle has to follow exactly the paths given
|
||||
in gray.
|
||||
</p>
|
||||
<p>
|
||||
A paced animateMotion of a blue stroked square with a centered
|
||||
circle is compared with four animateMotion of a red square
|
||||
with a centered circle.
|
||||
The motion of the red square is following the
|
||||
combination of four animateMotion following on
|
||||
each other and is the same as the motion of the blue
|
||||
square, because the timing is choosen in such a way.
|
||||
Therefore the blue square covers always the red one
|
||||
completely.
|
||||
</p>
|
||||
<p>
|
||||
The path is given in gray. The red fill of the circle
|
||||
is always covered with the gray path.
|
||||
Eight gray stroked markers are lightened, when the circle
|
||||
is exactly above the marker. The red fill of the marker
|
||||
is exactly covered by the blue stroked circle.
|
||||
If something red gets visible, an error is occured
|
||||
and the animateMotion is not paced.
|
||||
</p>
|
||||
<p>
|
||||
The exact timing is calculated using an analytical
|
||||
integration of the path length of the sub paths
|
||||
(this is available for quadratic or linear curves).
|
||||
With this method the path position and the
|
||||
time can be determined as functions of the usual
|
||||
parametrization of the used Bézier curves.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-206-t.html">animate-elem-206-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-209-t.html">→ animate-elem-209-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
126
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-209-t.html
Executable file
126
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-209-t.html
Executable file
|
|
@ -0,0 +1,126 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-209-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-209-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-207-t.html">animate-elem-207-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-21-t.html">→ animate-elem-21-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-209-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-209-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-209-t" src="../png/animate-elem-209-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animate with values animate.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
Additionally set animations can be replaced by values animations too.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>values="0;a" additive="sum"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>set to="a"</td>
|
||||
<td>values="a" additive="replace" accumulate="none"</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space.)
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by animations applied to the attributes x, y, width, height
|
||||
of blue rectangles are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red rectangles. Additionally underlying dark red
|
||||
rectangles simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace. The blue rectangles cover all red rectangles. Therefore if something
|
||||
red gets visible, an error is occured. Because fill is always not set and therefore remove,
|
||||
the final value is only that of the set animation, not very interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-207-t.html">animate-elem-207-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-21-t.html">→ animate-elem-21-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
101
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-21-t.html
Executable file
101
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-21-t.html
Executable file
|
|
@ -0,0 +1,101 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-21-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-21-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-209-t.html">animate-elem-209-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-210-t.html">→ animate-elem-210-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-21-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-21-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-21-t" src="../png/animate-elem-21-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test for chained animations</p>
|
||||
<p>
|
||||
The assumption is that you will first click on "fade in" and then click on "fade out", each exactly once. The
|
||||
first time you select the link 'fade in', you should see a red square appearing, gradually and smoothly fading
|
||||
from white to red over the course of three seconds. This square is in front of and thus obscures the lower left
|
||||
circle, but is behind the upper right circle. The fill color of these circles is also animated, from white to grey.
|
||||
The animations are triggered by the start of the corresponding animation of the red square.
|
||||
</p>
|
||||
<p>
|
||||
The rendered picture should match the reference image, (except for possible variations in the labeling text
|
||||
(per CSS2 rules)) after activating the link on the fade-in button the first time and waiting three seconds for the
|
||||
animation to compete. The picture should remain looking the same way indefinitely, until another link is activated.
|
||||
</p>
|
||||
<p>
|
||||
With the second click on "fade in", however, the behavior might be different. In the case of having a first click
|
||||
on "fade in", waiting three seconds, and then immediately perform a first click on "fade out", waiting three seconds,
|
||||
and then immediately perform a second click on "fade in", you should see the following. After the first click on
|
||||
"fade in", the red square goes from zero to 100% opacity. After the first click on "fade out", the red square goes
|
||||
from red to white. After the second click on "fade in", however, the red square goes from white to red, and then
|
||||
goes back from red to white. This is because of the hyperlinking rules as they relate to resolved start times in
|
||||
the SMIL 2.1 specification.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-209-t.html">animate-elem-209-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-210-t.html">→ animate-elem-210-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-210-t.html
Executable file
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-210-t.html
Executable file
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-210-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-210-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-21-t.html">animate-elem-21-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-211-t.html">→ animate-elem-211-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-210-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-210-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-210-t" src="../png/animate-elem-210-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animateColor with values animateColor and animate.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animations. Therefore they have to be the same as the related values animation.
|
||||
Additionally set animations can be replaced by values animations too.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>values="0;a" additive="sum"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>set to="a"</td>
|
||||
<td>values="a" additive="replace" accumulate="none"</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. In the color space
|
||||
0 is represented by black, #000, #000000, rgb(0,0,0) etc. Addition is performed for each
|
||||
of the three components of the color vector separately.)
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by animations applied to fill properties
|
||||
of circles are compared with the related values animations including additive and
|
||||
cumulative hehaviour for the stroke of the same circles. Additionally underlying
|
||||
filled larger circles simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace. The fill of the background circle and stroke and fill of the smaller
|
||||
test circle centered in it are always exactly the same. Therefore if
|
||||
rings in each centered circle system with different color get visible, an error is occured.
|
||||
But each separated circle system representing one of 12 subtests can have another color.
|
||||
Because the fill attribute for animation is always not set and therefore remove,
|
||||
the final value is only that of the set animation, not very interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-21-t.html">animate-elem-21-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-211-t.html">→ animate-elem-211-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
120
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-211-t.html
Executable file
120
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-211-t.html
Executable file
|
|
@ -0,0 +1,120 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-211-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-211-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-210-t.html">animate-elem-210-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-212-t.html">→ animate-elem-212-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-211-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-211-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-211-t" src="../png/animate-elem-211-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animateMotion with values animateMotion.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<!--table>
|
||||
<tr>
|
||||
<th>used</th><th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td><td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td><td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td><td>values="0;a" additive="sum"
|
||||
</td>
|
||||
</tr>
|
||||
</table -->
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateMotion
|
||||
the '0' is no motion or is related to a translation given in coordinates: 0,0.)
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by are applied to animateMotion of different blue stroked
|
||||
paths and are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red paths. Additionally underlying dark red
|
||||
paths simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace. The blue paths cover all red paths. Therefore if something
|
||||
red gets visible, an error is occured. Because fill is always not set and therefore remove,
|
||||
the final value is the value at 2s given with a simple values animateMotion, not very
|
||||
interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-210-t.html">animate-elem-210-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-212-t.html">→ animate-elem-212-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-212-t.html
Executable file
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-212-t.html
Executable file
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-212-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-212-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-211-t.html">animate-elem-211-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-213-t.html">→ animate-elem-213-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-212-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-212-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-212-t" src="../png/animate-elem-212-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animateTransform rotate (around zero) with values animateTransform.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>
|
||||
values="0;a" additive="sum"
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateTransform
|
||||
the '0' is the same as the zero matrix, not the unity or identity matrix.
|
||||
For the rotate type this is a skew with an angle of 0.
|
||||
Deviating from SMIL 2 in SVG it is specified, that for animateTranform the animation
|
||||
effect has to be postmultiplied to the underlying value, if the animation is additive. Note
|
||||
that for two additive rotate angles a, b the resulting angle is not a+b but atan(tan(a)+tan(b)).
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by are applied to animateTransform of the rotate type
|
||||
of different blue stroked
|
||||
paths and are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red paths. Additionally underlying dark red
|
||||
paths simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace with animateMotion. The blue paths cover all red paths.
|
||||
Therefore if something red gets visible, an error is occured.
|
||||
Because fill is always not set and therefore remove,
|
||||
the final value is the value at 2s given with a simple values animateTransform, not very
|
||||
interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-211-t.html">animate-elem-211-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-213-t.html">→ animate-elem-213-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-213-t.html
Executable file
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-213-t.html
Executable file
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-213-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-213-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-212-t.html">animate-elem-212-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-214-t.html">→ animate-elem-214-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-213-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-213-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-213-t" src="../png/animate-elem-213-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animateTransform rotate with values animateTransform.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>
|
||||
values="0;a" additive="sum"
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateTransform
|
||||
the '0' is the same as the zero matrix, not the unity or identity matrix.
|
||||
For the rotate type this is a skew with an angle of 0.
|
||||
Deviating from SMIL 2 in SVG it is specified, that for animateTranform the animation
|
||||
effect has to be postmultiplied to the underlying value, if the animation is additive. Note
|
||||
that for two additive rotate angles a, b the resulting angle is not a+b but atan(tan(a)+tan(b)).
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by are applied to animateTransform of the rotate type
|
||||
of different blue stroked
|
||||
paths and are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red paths. Additionally underlying dark red
|
||||
paths simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace with animateMotion. The blue paths cover all red paths.
|
||||
Therefore if something red gets visible, an error is occured.
|
||||
Because fill is always not set and therefore remove,
|
||||
the final value is the value at 2s given with a simple values animateTransform, not very
|
||||
interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-212-t.html">animate-elem-212-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-214-t.html">→ animate-elem-214-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
130
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-214-t.html
Executable file
130
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-214-t.html
Executable file
|
|
@ -0,0 +1,130 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-214-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-214-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-213-t.html">animate-elem-213-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-215-t.html">→ animate-elem-215-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-214-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-214-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-214-t" src="../png/animate-elem-214-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animateTransform scale with values animateTransform.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>
|
||||
values="0;a" additive="sum"
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateTransform
|
||||
the '0' is the same as the zero matrix, not the unity or identity matrix.
|
||||
For the scale type this is a scaling with 0,0, this means no display if not added to another
|
||||
value. Deviating from SMIL 2 in SVG it is specified, that for animateTranform the animation
|
||||
effect has to be postmultiplied to the underlying value, if the animation is additive.)
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by are applied to animateTransform of the scale type
|
||||
of different blue stroked
|
||||
paths and are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red paths. Additionally underlying dark red
|
||||
paths simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace with animateMotion. The blue paths cover all red paths.
|
||||
Therefore if something red gets visible, an error is occured.
|
||||
Because fill is always not set and therefore remove,
|
||||
the final value is the value at 2s given with a simple values animateTransform, not very
|
||||
interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-213-t.html">animate-elem-213-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-215-t.html">→ animate-elem-215-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-215-t.html
Executable file
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-215-t.html
Executable file
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-215-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-215-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-214-t.html">animate-elem-214-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-216-t.html">→ animate-elem-216-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-215-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-215-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-215-t" src="../png/animate-elem-215-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Compare from-to, from-by and by animateTransform translate with values
|
||||
animateTransform and animateMotion.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>
|
||||
values="0;a" additive="sum"
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateTransform
|
||||
the '0' is the same as the zero matrix, not the unity or identity matrix.
|
||||
For the translate type this is a translation given in coordinates: 0,0.)
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by are applied to animateTransform of the translate type
|
||||
of different blue stroked
|
||||
paths and are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red paths. Additionally underlying dark red
|
||||
paths simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace with animateMotion. The blue paths cover all red paths.
|
||||
Therefore if something red gets visible, an error is occured.
|
||||
Because fill is always not set and therefore remove,
|
||||
the final value is the value at 2s given with a simple values animateTransform, not very
|
||||
interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-214-t.html">animate-elem-214-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-216-t.html">→ animate-elem-216-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-216-t.html
Executable file
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-216-t.html
Executable file
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-216-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-216-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-215-t.html">animate-elem-215-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-217-t.html">→ animate-elem-217-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-216-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-216-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-216-t" src="../png/animate-elem-216-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animateTransform skewX with values animateTransform.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>
|
||||
values="0;a" additive="sum"
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateTransform
|
||||
the '0' is the same as the zero matrix, not the unity or identity matrix.
|
||||
For the skewX type this is a skew with an angle of 0.
|
||||
Deviating from SMIL 2 in SVG it is specified, that for animateTranform the animation
|
||||
effect has to be postmultiplied to the underlying value, if the animation is additive. Note
|
||||
that for two additive skewX angles a, b the resulting angle is not a+b but atan(tan(a)+tan(b)).
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by are applied to animateTransform of the skewX type
|
||||
of different blue stroked
|
||||
paths and are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red paths. Additionally underlying dark red
|
||||
paths simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace with animateMotion. The blue paths cover all red paths.
|
||||
Therefore if something red gets visible, an error is occured.
|
||||
Because fill is always not set and therefore remove,
|
||||
the final value is the value at 2s given with a simple values animateTransform, not very
|
||||
interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-215-t.html">animate-elem-215-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-217-t.html">→ animate-elem-217-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-217-t.html
Executable file
131
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-217-t.html
Executable file
|
|
@ -0,0 +1,131 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-217-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-217-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-216-t.html">animate-elem-216-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-218-t.html">→ animate-elem-218-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-217-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-217-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-217-t" src="../png/animate-elem-217-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Compare from-to, from-by and by animateTransform skewY with values animateTransform.</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
SMIL 2 specifies, how from-to, from-by and by animations have to be converted into
|
||||
values animation. Therefore they have to be the same as the related values animation.
|
||||
The conversion is as follows:
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>used</th>
|
||||
<th>converted</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" to="b"</td>
|
||||
<td>values="a;b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>from="a" by="b"</td>
|
||||
<td>values="a;a+b"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>by="a"</td>
|
||||
<td>
|
||||
values="0;a" additive="sum"
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
(by and from-by animations have only a meaning, if values can be added somehow.
|
||||
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
||||
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
||||
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateTransform
|
||||
the '0' is the same as the zero matrix, not the unity or identity matrix.
|
||||
For the skewY type this is a skew with an angle of 0.
|
||||
Deviating from SMIL 2 in SVG it is specified, that for animateTranform the animation
|
||||
effect has to be postmultiplied to the underlying value, if the animation is additive. Note
|
||||
that for two additive skewY angles a, b the resulting angle is not a+b but atan(tan(a)+tan(b)).
|
||||
</p>
|
||||
<p>
|
||||
The from-to, from-by and by are applied to animateTransform of the skewY type
|
||||
of different blue stroked
|
||||
paths and are compared with the related values animations including additive and
|
||||
cumulative hehaviour for underlying red paths. Additionally underlying dark red
|
||||
paths simulate the same behaviour using always the defaults additive replace and
|
||||
accumulate replace with animateMotion. The blue paths cover all red paths.
|
||||
Therefore if something red gets visible, an error is occured.
|
||||
Because fill is always not set and therefore remove,
|
||||
the final value is the value at 2s given with a simple values animateTransform, not very
|
||||
interesting for the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-216-t.html">animate-elem-216-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-218-t.html">→ animate-elem-218-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
100
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-218-t.html
Executable file
100
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-218-t.html
Executable file
|
|
@ -0,0 +1,100 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-218-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-218-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-217-t.html">animate-elem-217-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-219-t.html">→ animate-elem-219-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-218-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-218-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-218-t" src="../png/animate-elem-218-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
xml:id or id? Identification of the element, that is target of an animation.
|
||||
For authors it is recommended not to use different for id and xml:id for the same
|
||||
element and not the same value for id in one element and the same value for
|
||||
xml:id in another element. This is done in this document only as a (stupid) test,
|
||||
not as an application.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red or no animation after 2s.
|
||||
</p>
|
||||
<p>
|
||||
Because for historical reasons, SVG tiny 1.2 has two fragment identifiers.
|
||||
It is recommended, that xml:id is used and not only id. As a consequence
|
||||
it is possible to have two different identifier values for one element.
|
||||
In such a case, id is skipped and only xml:id has to be choosen.
|
||||
|
||||
In this test the height of the blue rectangle is set to another value. This is compared
|
||||
with a set animation of another red rectangle, having the same value for xml:id and
|
||||
id. The blue rectangle has to cover always the red one. If something red is visible,
|
||||
an error is occured.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-217-t.html">animate-elem-217-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-219-t.html">→ animate-elem-219-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
105
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-219-t.html
Executable file
105
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-219-t.html
Executable file
|
|
@ -0,0 +1,105 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-219-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-219-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-218-t.html">animate-elem-218-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-22-t.html">→ animate-elem-22-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-219-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-219-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-219-t" src="../png/animate-elem-219-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Identify the attributeType and the priority of an animation.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
With the top triangle is tested, that the points attribute of a
|
||||
polygon is animated using attributeType auto or XML and
|
||||
is not animated if CSS is used, because there is no CSS property
|
||||
points applicable for the polygon element.
|
||||
</p>
|
||||
<p>
|
||||
The bottom triangles test the priority for an animation with
|
||||
attributeType CSS or auto over an XML animation, all for the
|
||||
stroke attribute. Even if the attributeType is completely ignored,
|
||||
the priority should still work for the bottom right triangle,
|
||||
because the priority is set here with a later begin.
|
||||
</p>
|
||||
<p>
|
||||
In all cases the coloring or positioning of elements is choosen in
|
||||
such a way, that normally not visible lower priority or not
|
||||
applicable animations are indicated with a red stroke,
|
||||
higher priority or applicable animations with a blue stroke
|
||||
or an animation in the blue range.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-218-t.html">animate-elem-218-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-22-t.html">→ animate-elem-22-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-22-t.html
Executable file
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-22-t.html
Executable file
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-22-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-22-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-219-t.html">animate-elem-219-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-221-t.html">→ animate-elem-221-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-22-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-22-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-22-t" src="../png/animate-elem-22-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test which verifies that the basic facilities of declarative animation are working.</p>
|
||||
<p>This test uses the following element : 'animate'</p>
|
||||
<p>The test is a nine second animation with no repeats. It shows a rectangle growing from small to big.</p>
|
||||
<p>
|
||||
The file includes various guides that can be used to verify the correctness of the animation. Outlines exist for
|
||||
the rectangle size and location at times 0s, 3s and 9s.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-219-t.html">animate-elem-219-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-221-t.html">→ animate-elem-221-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
92
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-221-t.html
Executable file
92
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-221-t.html
Executable file
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-221-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-221-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-22-t.html">animate-elem-22-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-222-t.html">→ animate-elem-222-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-221-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-221-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-221-t" src="../png/animate-elem-221-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Correct timing with begin, end, dur, fill, max.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
Simple from to animations for cx and cy of a blue stroked
|
||||
circle are stopped with max attributes.
|
||||
The gray path gives the correct trajectory.
|
||||
If the red center of the circle becomes visible, an error is
|
||||
occured.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-22-t.html">animate-elem-22-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-222-t.html">→ animate-elem-222-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
99
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-222-t.html
Executable file
99
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-222-t.html
Executable file
|
|
@ -0,0 +1,99 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-222-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-222-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-221-t.html">animate-elem-221-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-225-t.html">→ animate-elem-225-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-222-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-222-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-222-t" src="../png/animate-elem-222-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Correct timing with begin, end, dur, fill, min.
|
||||
</p>
|
||||
<p>
|
||||
The main indication for a failed test is the appearance of red.
|
||||
</p>
|
||||
<p>
|
||||
Simple from to animations for cx and cy of a blue stroked
|
||||
circle are used with begin, dur, end, fill and min attributes and
|
||||
correlated with syncbase values.
|
||||
This is compared with simple animateMotion with the
|
||||
same trajectory and timing.
|
||||
The related red circle is always
|
||||
covered by the blue stroke circle.
|
||||
The gray path gives the correct trajectory.
|
||||
</p>
|
||||
<p>
|
||||
The test is passed if the blue circle follows the defined path.
|
||||
If part of the red circle becomes visible, the test is failed.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-221-t.html">animate-elem-221-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-225-t.html">→ animate-elem-225-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
87
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-225-t.html
Executable file
87
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-225-t.html
Executable file
|
|
@ -0,0 +1,87 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-225-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-225-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-222-t.html">animate-elem-222-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-226-t.html">→ animate-elem-226-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-225-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-225-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-225-t" src="../png/animate-elem-225-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test verifies that error handling for the begin attribute is working.
|
||||
An error in the begin-value-list means that the attribute as a whole is in error, and
|
||||
that is the same as if the value was set to 'indefinite'.
|
||||
</p>
|
||||
<p>
|
||||
There should be three green rects visible. If any of them turns red the test has failed.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-222-t.html">animate-elem-222-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-226-t.html">→ animate-elem-226-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
109
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-226-t.html
Executable file
109
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-226-t.html
Executable file
|
|
@ -0,0 +1,109 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-226-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-226-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-225-t.html">animate-elem-225-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-227-t.html">→ animate-elem-227-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-226-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-226-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-226-t" src="../png/animate-elem-226-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
The test is passed if you see a large swirly blue image, outlined in green. Below,
|
||||
two smaller copies also outlined in green. Below that, a thick red outline that does
|
||||
not have an image inside it. All three blue images with green outlines animate over
|
||||
ten seconds, alternating between a blue and a pink image.
|
||||
The animations all finish at the same time and display the pink image thereafter.
|
||||
</p>
|
||||
<p>
|
||||
This tests the resolving of QNames in the attributeName attribute value. The
|
||||
attribute tested is href, in the XLink namespace.
|
||||
</p>
|
||||
<p>
|
||||
If an image is displayed on top of the red rectangle, or if the large image is not shown, or a
|
||||
purple image with 'FAIL' is shown rather than blue, the implementation is using <em>magic prefixes</em>
|
||||
and is only looking for the string 'xlink:href' rather than following the Namespaces in
|
||||
XML specification.
|
||||
</p>
|
||||
<p>
|
||||
If the right-most of the two small images animates but the left-most does not,
|
||||
the implementation is only handling animation elements that are a direct child of
|
||||
the element to be animated, and does not implement animation specified by an
|
||||
XLink href. In that case, the large image will not animate either, but this does
|
||||
not necessarily mean that namespace resolution is incorrect. (It does mean that
|
||||
the test is failed, however).
|
||||
</p>
|
||||
<p>
|
||||
If the two small images animate correctly but the large one does not, then
|
||||
resolution of QNames in the 'attributeName' attribute is not following the
|
||||
Namespaces in XML specification as required by the SVG specification.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-225-t.html">animate-elem-225-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-227-t.html">→ animate-elem-227-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
101
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-227-t.html
Executable file
101
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-227-t.html
Executable file
|
|
@ -0,0 +1,101 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-227-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-227-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-226-t.html">animate-elem-226-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-23-t.html">→ animate-elem-23-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-227-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-227-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-227-t" src="../png/animate-elem-227-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
|
||||
<p>
|
||||
Tests animateColor with the values currentColor, inherit and none. The test is
|
||||
passed if:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>the four circles at the left animate smoothly from yellow to green</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
the circle at the top right appears at 2.5 seconds
|
||||
(discrete animation), with a green fill
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
the circle at the bottom right (with a green fill)
|
||||
disappears at 2.5 seconds (discrete animation)
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-226-t.html">animate-elem-226-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-23-t.html">→ animate-elem-23-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-23-t.html
Executable file
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-23-t.html
Executable file
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-23-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-23-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-227-t.html">animate-elem-227-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-24-t.html">→ animate-elem-24-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-23-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-23-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-23-t" src="../png/animate-elem-23-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test which verifies that the basic facilities of declarative animation are working.</p>
|
||||
<p>This test uses the following elements : 'set', and 'animateColor</p>
|
||||
<p>The test is a nine second animation with no repeats. It shows a circle changing color from 3s to 9s.</p>
|
||||
<p>
|
||||
The file includes various guides that can be used to verify the correctness of the animation. Boxes on the left
|
||||
show the correct circle color values at times 3s, 6s and 9s.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-227-t.html">animate-elem-227-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-24-t.html">→ animate-elem-24-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-24-t.html
Executable file
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-24-t.html
Executable file
|
|
@ -0,0 +1,89 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-24-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-24-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-23-t.html">animate-elem-23-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-25-t.html">→ animate-elem-25-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-24-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-24-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-24-t" src="../png/animate-elem-24-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test which verifies that the basic facilities of declarative animation are working.</p>
|
||||
<p>This test uses the following elements : 'animateMotion' and 'animateTransform'</p>
|
||||
<p>
|
||||
The test is a nine second animation with no repeats. It shows the text string "It's alive" moving, rotating and
|
||||
growing from time 3s to 9s.
|
||||
</p>
|
||||
<p>
|
||||
The file includes various guides that can be used to verify the correctness of the animation. Pale blue guides
|
||||
exist for the text size, location and orientation at times 3s, 6s and 9s.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-23-t.html">animate-elem-23-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-25-t.html">→ animate-elem-25-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
88
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-25-t.html
Executable file
88
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-25-t.html
Executable file
|
|
@ -0,0 +1,88 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-25-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-25-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-24-t.html">animate-elem-24-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-26-t.html">→ animate-elem-26-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-25-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-25-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-25-t" src="../png/animate-elem-25-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test animation options for specifying the target attribute/property.</p>
|
||||
<p>
|
||||
The left-hand rectangle animates an XML attribute without specifying a value for 'attributeType'. The right-hand rectangle
|
||||
animates an XML attribute and does set 'attributeType' to 'XML'.
|
||||
</p>
|
||||
<p>
|
||||
The left rectangle animates its height from 100 to 50, starting at time 3 seconds and ending at 6 seconds. The right
|
||||
rectangle animates its height from 100 to 50, starting at time 6 seconds and ending at 9 seconds.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-24-t.html">animate-elem-24-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-26-t.html">→ animate-elem-26-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-26-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-26-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-26-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-26-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-25-t.html">animate-elem-25-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-27-t.html">→ animate-elem-27-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-26-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-26-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-26-t" src="../png/animate-elem-26-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test animation options for specifying the target attribute/property.</p>
|
||||
<p>
|
||||
On the left, a circle animates the stroke-width property without specifying a value for 'attributeType'. On the right
|
||||
a circle animates the stroke-width property and does set 'attributeType' to 'CSS'.
|
||||
</p>
|
||||
<p>For each circle, guides shows what the stroke-width looks like initially and what it looks like at the end of the animation.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-25-t.html">animate-elem-25-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-27-t.html">→ animate-elem-27-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
91
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-27-t.html
Executable file
91
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-27-t.html
Executable file
|
|
@ -0,0 +1,91 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-27-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-27-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-26-t.html">animate-elem-26-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-28-t.html">→ animate-elem-28-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-27-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-27-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-27-t" src="../png/animate-elem-27-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test animation options for specifying the target element.</p>
|
||||
<p>
|
||||
The leftmost rectangle verifies the use of the 'xlink:href' attribute to indicate the target element to be
|
||||
animated. The rightmost rectangle verifies animating the parent of the 'animate' element (in this case, a 'rect'
|
||||
element) (i.e., the implicit parent of the 'animate' element).
|
||||
</p>
|
||||
<p>
|
||||
At time 0, two rectangles filled with red and stroked with blue appear, each with width=100 and height=200.
|
||||
Starting at time 3 seconds and ending at time 6 seconds, the height of the leftmost rectangle decreases from 200
|
||||
to 50. Starting at time 6 seconds and ending at time 9 seconds, the rightmost rectangle decreases from 200 to 50.
|
||||
Annotations on the picture show the correct positions at particular times.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-26-t.html">animate-elem-26-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-28-t.html">→ animate-elem-28-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
84
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-28-t.html
Executable file
84
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-28-t.html
Executable file
|
|
@ -0,0 +1,84 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-28-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-28-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-27-t.html">animate-elem-27-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-29-t.html">→ animate-elem-29-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-28-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-28-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-28-t" src="../png/animate-elem-28-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test inheritance of animated properties.</p>
|
||||
<p>
|
||||
A yellow happy face should be displayed. The stroke for the smile and yellow circle are both animated, the stroke
|
||||
goes from "#F1E900" to "#FF0000".
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-27-t.html">animate-elem-27-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-29-t.html">→ animate-elem-29-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
103
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-29-t.html
Executable file
103
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-29-t.html
Executable file
|
|
@ -0,0 +1,103 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-29-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-29-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-28-t.html">animate-elem-28-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-30-t.html">→ animate-elem-30-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-29-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-29-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-29-t" src="../png/animate-elem-29-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test compositing of animated fill opacity.</p>
|
||||
<p>
|
||||
The assumption is that you will first click on "fade in" and then click on "fade out", each exactly once. The
|
||||
first time you select the link 'fade in', you should see a red square appearing, gradually and smoothly fading
|
||||
from zero to 100% opacity over the course of three seconds. This square is in front of and thus obscures the
|
||||
lower left circle, but is behind the upper right circle which is thus is composited on top of the animated red
|
||||
square. Then, when you click on "fade out", the red square will gradually disappear, smoothly fading from 100%
|
||||
to zero opacity over the course of three seconds.
|
||||
</p>
|
||||
<p>
|
||||
The rendered picture should match the reference image, (except for possible variations in the labelling text
|
||||
(per CSS2 rules)) after activating the link on the fade-in button the first time and waiting three seconds for
|
||||
the animation to compete. The picture should remain looking the same way indefinitely, until another link is
|
||||
activated.
|
||||
</p>
|
||||
<p>
|
||||
With the second click on "fade in", however, the behavior might be different. In the case of having a first
|
||||
click on "fade in", waiting three seconds, and then immediately perform a first click on "fade out", waiting
|
||||
three seconds, and then immediately perform a second click on "fade in", you should see the following. After
|
||||
the first click on "fade in", the red square goes from zero to 100% opacity. After the first click on "fade out",
|
||||
the red square goes from 100% to zero opacity. After the second click on "fade in", however, the red square goes
|
||||
from zero to 100% opacity, and then goes back from 100% to zero opacity. This is because of the hyperlinking rules
|
||||
as they relate to resolved start times in the SMIL 2.1 specification.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-28-t.html">animate-elem-28-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-30-t.html">→ animate-elem-30-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
87
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-30-t.html
Executable file
87
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-30-t.html
Executable file
|
|
@ -0,0 +1,87 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-30-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-30-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-29-t.html">animate-elem-29-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-31-t.html">→ animate-elem-31-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-30-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-30-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-30-t" src="../png/animate-elem-30-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>The purpose of this test is to test animated <use> where the referenced <defs> also is animated.</p>
|
||||
<p>
|
||||
The test shows 6 different elements, each element defined in a <defs> and referenced with a <use>.
|
||||
All the elements are animated between 0-3 seconds. The expected animation transform is indicated with a gray
|
||||
silhouette showing the border values (0 and 3 seconds) and an arrow indicating the movement in between. For the
|
||||
two elements with a color animation, the colors goes from white to blue (the same blue color used for all
|
||||
elements).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-29-t.html">animate-elem-29-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-31-t.html">→ animate-elem-31-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
91
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-31-t.html
Executable file
91
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-31-t.html
Executable file
|
|
@ -0,0 +1,91 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-31-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-31-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-30-t.html">animate-elem-30-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-32-t.html">→ animate-elem-32-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-31-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-31-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-31-t" src="../png/animate-elem-31-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>The purpose of this test is to test animation of the display attribute.</p>
|
||||
<p>
|
||||
The test shows two gray rectangles which are filled with colored circles during the length of the animation
|
||||
(8 sec). The circles in the top rectangle are displayed/hidden by animating the display attribute.The circles in
|
||||
the bottom rectangle are serving as the reference and are displayed/hidden by animating the visibility attribute.
|
||||
A correct implementation should display/hide circles with the same color from the top and bottom rectangle at the
|
||||
same time.
|
||||
</p>
|
||||
<p>
|
||||
In total there are 6 different circles (purple, green, red, blue, yellow, cyan) in 5 positions (blue and yellow
|
||||
share position) that should be displayed during the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-30-t.html">animate-elem-30-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-32-t.html">→ animate-elem-32-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
84
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-32-t.html
Executable file
84
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-32-t.html
Executable file
|
|
@ -0,0 +1,84 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-32-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-32-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-31-t.html">animate-elem-31-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-33-t.html">→ animate-elem-33-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-32-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-32-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-32-t" src="../png/animate-elem-32-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Tests the animation to and from the degenerate cases of the basic shapes. The shapes are drawn within the black rectangles.</p>
|
||||
<p>
|
||||
The rendered picture should match the reference image at the end of the animation, except for possible variations in the
|
||||
labelling text (per CSS2 rules).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-31-t.html">animate-elem-31-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-33-t.html">→ animate-elem-33-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
92
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-33-t.html
Executable file
92
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-33-t.html
Executable file
|
|
@ -0,0 +1,92 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-33-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-33-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-32-t.html">animate-elem-32-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-34-t.html">→ animate-elem-34-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-33-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-33-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-33-t" src="../png/animate-elem-33-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>The purpose of this test is to test animateMotion with keyPoints and keyTimes.</p>
|
||||
<p>
|
||||
The test consists of 4 sub-tests. Each test has a purple circle which moves along a path. The path is indicated
|
||||
with a dashed line and sample points where the circle should pass a certain position on the path is indicated with
|
||||
gray circles. On top of each gray circle is a number which indicates the passing time in seconds. In the cases
|
||||
where the purple circle should pass the gray circle two times the first passing time is written above the gray
|
||||
circle and the second passing time is written below.
|
||||
</p>
|
||||
<p><a href="http://www.w3.org/TR/SVGMobile12/animate.html#AnimateMotionElement">
|
||||
Section 16.2.13</a> in the spec. states that a motion path is defined by the path attribute or by values or from/to
|
||||
attributes. So in the animateMotion case, values is just used for defining the motionPath and the number of values
|
||||
do not have to relate to the number of keyTimes.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-32-t.html">animate-elem-32-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-34-t.html">→ animate-elem-34-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
94
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-34-t.html
Executable file
94
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-34-t.html
Executable file
|
|
@ -0,0 +1,94 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-34-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-34-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-33-t.html">animate-elem-33-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-35-t.html">→ animate-elem-35-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-34-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-34-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-34-t" src="../png/animate-elem-34-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>The purpose of this test is to test animation of attributes points and fill-rule.</p>
|
||||
<p>
|
||||
The test consists of 2 sub-tests. The first test is a polygon shaped as a digit. The polygon has an animation on
|
||||
its vertex points which morphs the polygon between the numbers 1, 2, 3 and 4. The gray outlines indicates the
|
||||
expected position of the polygon at 1, 2, 3 and 4s. The second test is 4 paths in a u-shape. They have animated
|
||||
fill-rules. Their initial fill-rules are, from left to right, nonzero, evenodd, nonzero (by default value, no
|
||||
fill-rule attribute set) and nonzero (by default value, no fill-rule attribute set). This means, that the second
|
||||
path is initially u-shaped, and all other paths are initially rect-shaped. All four animations are set to evenodd
|
||||
as a last stage. The further expected result is that one path at a time is filled. The other three paths are not
|
||||
filled but have the u-shape. The fourth animation from evenodd to nonzero happens by going back to the initial
|
||||
state, because the fill attribute is not set to freeze. Which path that should be filled at which time is indicated
|
||||
by the number above it (indicating time in seconds). To enhance the difference between the filled path and the rest,
|
||||
the filled path should always have the same color as the morphing polygon. This is achieved by a discrete color
|
||||
animation.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-33-t.html">animate-elem-33-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-35-t.html">→ animate-elem-35-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
103
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-35-t.html
Executable file
103
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-35-t.html
Executable file
|
|
@ -0,0 +1,103 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-35-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-35-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-34-t.html">animate-elem-34-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-36-t.html">→ animate-elem-36-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-35-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-35-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-35-t" src="../png/animate-elem-35-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
The purpose of this test is to test animation of attributes stroke-dasharray,
|
||||
stroke-dashoffset, stroke-miterlimit, stroke-linecap and stroke-linjoin.
|
||||
</p>
|
||||
<p>
|
||||
This file contains four tests, testing animation of five attributes.
|
||||
The first test animates the stroke-dashoffset. There are seven reference polylines, all with
|
||||
the same stroke-dasharray but with different values on their stroke-dashoffset. A red polyline
|
||||
with the same stroke-dash array has an animation on its stroke-dasharray. The red polyline is
|
||||
animated so that it stops by the reference polyline that has the right stroke-dashoffset at
|
||||
that perticular time.
|
||||
The second test animates stroke-linecap and stroke-linejoin. There are three reference
|
||||
polylines. Comparsion is done in the same manner as in the previous test.
|
||||
The third test animates the stroke-miterlimit. There are two sets offilled reference paths
|
||||
(black) and two outlined paths (red) with animated stroke-miterlimit. The paths are shaped like
|
||||
a capital A. In the upper test the animated path is drawn on top of the reference polygons and
|
||||
in the lower test the reference path is drawn on top of the animated path. As the
|
||||
stroke-miterlimit is animated to different values, different reference paths are used. To pass
|
||||
the test, there should never be any part of the underlying geometry visible (black in the upper
|
||||
or red in the lower).
|
||||
The fourth test animates the stroke-dasharray. The initial stroke-dasharray gives a
|
||||
short-dashed line. This pattern is animated into a pattern that on this short path gives a
|
||||
solid line at 2 seconds.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-34-t.html">animate-elem-34-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-36-t.html">→ animate-elem-36-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-36-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-36-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-36-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-36-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-35-t.html">animate-elem-35-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-37-t.html">→ animate-elem-37-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-36-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-36-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-36-t" src="../png/animate-elem-36-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test validates the animation of the transform attribute on structure elements, hyperlinks and text elements.</p>
|
||||
<p>
|
||||
The test applies an <animateTransform> on various element types: <g>, <use>, <image>,
|
||||
<switch>, <a> and <text>. In all cases, the type is a rotation and all the elements should rotate
|
||||
together about their centers, for 3s, starting at the document's load time.</p>
|
||||
<p>The static reference image shows the final state of the animation.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-35-t.html">animate-elem-35-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-37-t.html">→ animate-elem-37-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-37-t.html
Executable file
86
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-37-t.html
Executable file
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-37-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-37-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-36-t.html">animate-elem-36-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-38-t.html">→ animate-elem-38-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-37-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-37-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-37-t" src="../png/animate-elem-37-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test validates the animation of the transform attribute shape elements.</p>
|
||||
<p>
|
||||
The test applies an <animateTransform> on various element types: <g>, <use>, <image>,
|
||||
<switch>, <a> and <text>. In all cases the animation should run for 3s, starting at the
|
||||
document's load time. The <circle> has a scale animation, and all the rest of the elements should rotate
|
||||
together about their centers. The static reference image shows the final state of the animation.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-36-t.html">animate-elem-36-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-38-t.html">→ animate-elem-38-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-38-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-38-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-38-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-38-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-37-t.html">animate-elem-37-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-39-t.html">→ animate-elem-39-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-38-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-38-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-38-t" src="../png/animate-elem-38-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>The purpose of this test is to test animation of the viewBox attribute.</p>
|
||||
<p>
|
||||
This file tests animation of the viewBow attribute. The viewBox changes position and size several times. At each
|
||||
new setting, a green indicator frame will flash a couple of times. This frame must only appear at the edges of
|
||||
the SVG element.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-37-t.html">animate-elem-37-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-39-t.html">→ animate-elem-39-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
100
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-39-t.html
Executable file
100
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-39-t.html
Executable file
|
|
@ -0,0 +1,100 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-39-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-39-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-38-t.html">animate-elem-38-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-40-t.html">→ animate-elem-40-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-39-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-39-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-39-t" src="../png/animate-elem-39-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test validates that the xlink:href attribute can be animated on the <a>, <image> and <use>
|
||||
elements, using the <animate> or <set> animation elements.
|
||||
</p>
|
||||
<p>
|
||||
For the <a> animation, showing on the left-most column, the number indicates the number of the animation
|
||||
test currently linked by the xlink:href attribute. For example, when the xlink:href animated value is
|
||||
"animate-elem-38-t.svg", the text displays "38". When the user clicks on the displayed number, the user agent
|
||||
should open the corresponding link. For example, if the user clicks on 38, then the "animate-elem-38-t.svg" URI
|
||||
should be followed. If the user clicks on 02, then the "animate-elem-02-t.svg" URI should be followed.
|
||||
</p>
|
||||
<p>
|
||||
For the <image> animations, the image xlink:href attribute cycles through two values showing a sun set and
|
||||
a picture of the sydney opera. The image should change every second and the images shown by the <set> and
|
||||
<animate> animations should always match.
|
||||
</p>
|
||||
<p>
|
||||
For the <use> animations, the use xlink:href attribute cycles through values "#useA" and "#useB" which
|
||||
reference text elements displaying values "Use A" and "Use B". The change should happen every second and the text
|
||||
shown for the two animations (<set> and <animation>) should always match.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-38-t.html">animate-elem-38-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-40-t.html">→ animate-elem-40-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
96
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-40-t.html
Executable file
96
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-40-t.html
Executable file
|
|
@ -0,0 +1,96 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-40-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-40-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-39-t.html">animate-elem-39-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-41-t.html">→ animate-elem-41-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-40-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-40-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-40-t" src="../png/animate-elem-40-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test validates that the x and y attributes can be animated on <use>, <image>, <rect> and
|
||||
<text> elements. The test also validates that the width and height attributes can be animated on <image>
|
||||
and <rect>
|
||||
</p>
|
||||
<p>
|
||||
For x and y animation, each test shows the reference positions at specific points in the animation. These markers
|
||||
are highlighted at the time the target element's x/y position should match that of the marker. For the <text>
|
||||
element, there are two tests. The first one tests animating a single value on the text's x and y attributes. The
|
||||
second one tests animating x, y values where there are values for each of the text's characters. For that test
|
||||
(bottom left), there is a set of reference markers for each of the characters ('1' and '2').
|
||||
</p>
|
||||
<p>
|
||||
For width and height animation (the two tests on the bottom right), the outline showing the expected width and
|
||||
height at given points in the animation is highlighted at the time the marker's width and height should match that
|
||||
of the target element.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-39-t.html">animate-elem-39-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-41-t.html">→ animate-elem-41-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
100
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-41-t.html
Executable file
100
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-41-t.html
Executable file
|
|
@ -0,0 +1,100 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-41-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-41-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-40-t.html">animate-elem-40-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-44-t.html">→ animate-elem-44-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-41-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-41-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-41-t" src="../png/animate-elem-41-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test validates the operation of the animate element on the various graphics properties. This test is very
|
||||
similar to animate-elem-78-t which uses the set element instead of the animate element to modify graphics properties.
|
||||
</p>
|
||||
<p>
|
||||
For each of the graphics properties, there are three tests. One animates the graphics property directly on an
|
||||
element (such as a rect or a line) which uses the property. The other two tests apply the animation on a container
|
||||
element (g and a), and validate that the animated property is inherited by elements which are child of the container.
|
||||
</p>
|
||||
<p>
|
||||
For each animation test, the element on which the animation is applied is also translated by an animation so that
|
||||
the various states of the animation can be checked more easily. In most tests, there is a gray reference marker
|
||||
which shows the expected animation state at the begining of the animation, mid-way, or at the end of the animation.
|
||||
</p>
|
||||
<p>
|
||||
The following animations should show continuous changes: fill, stroke, stroke-width, stroke-miterlimit,
|
||||
stroke-dashoffset and color. Note that visually, stroke-miterlimit shows a sharp transition, but that is because
|
||||
the miter is cut off when the animated miter limit reaches the test sharp angle's miter value. The stroke-miterlimit
|
||||
value is changed continously but that is not visible in this test.
|
||||
</p>
|
||||
<p>The following animations have a discrete behavior: fill-rule, stroke-linecap, stroke-linejoin, display and visibility.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-40-t.html">animate-elem-40-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-44-t.html">→ animate-elem-44-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-44-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-44-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-44-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-44-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-41-t.html">animate-elem-41-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-46-t.html">→ animate-elem-46-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-44-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-44-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-44-t" src="../png/animate-elem-44-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>The purpose of this test is to test animation of the d attribute of the path element.</p>
|
||||
<p>
|
||||
This test consists of a path, specified as a series of lineto commands, whose d attribute is animated. The path
|
||||
morphs between the numbers 1, 2, 3, and 4. The gray outlines indicates the expected position of the polygon at
|
||||
1, 2, 3 and 4s. The test contains an animated circle that indicates where the path should be at a given time.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-41-t.html">animate-elem-41-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-46-t.html">→ animate-elem-46-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
96
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-46-t.html
Executable file
96
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-46-t.html
Executable file
|
|
@ -0,0 +1,96 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-46-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-46-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-44-t.html">animate-elem-44-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-52-t.html">→ animate-elem-52-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-46-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-46-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-46-t" src="../png/animate-elem-46-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test validates the operation of the animate element on the various text and font properties. This test is
|
||||
very similar to animate-elem-77-t.svg which uses the set element instead of the animate element to modify graphics
|
||||
properties.
|
||||
</p>
|
||||
<p>
|
||||
For each text or font properties, there are three tests. One animates the text or font property directly on a
|
||||
text element which uses the property. The other two tests apply the animation on a container element (g and a),
|
||||
and validate that the animated property is inherited by children text elements.
|
||||
</p>
|
||||
<p>
|
||||
For each animation test, the element on which the animation is applied is also translated by an animation so that
|
||||
the various states of the animation can be checked more easily. There is a gray reference marker which shows the
|
||||
expected animation state at the begining of the animation, mid-way, or at the end of the animation.
|
||||
</p>
|
||||
<p>Only the animation of font-size should show a continuous change of the font size.</p>
|
||||
<p>The following animations have a discrete behavior: text-anchor, font-family, font-style, font-weight.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-44-t.html">animate-elem-44-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-52-t.html">→ animate-elem-52-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
114
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-52-t.html
Executable file
114
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-52-t.html
Executable file
|
|
@ -0,0 +1,114 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-52-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-52-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-46-t.html">animate-elem-46-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-53-t.html">→ animate-elem-53-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-52-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-52-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-52-t" src="../png/animate-elem-52-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>The purpose of this test is to test eventbase targets.</p>
|
||||
<p>
|
||||
The test consists of 4 rectangles named A, B, C, D. The D rectangle contains three animations changing the color
|
||||
of the animation target. Each animation applies to one of the other rectangles by using xlink:href="". Clicking on
|
||||
rect A should change it's color immediately, clicking B changes its color after 2 seconds, clicking C changes its
|
||||
color after 4 seconds and clicking D shows no visible change (although D contains the animations the event target
|
||||
for each animation is the referenced rectangle, this rectangle is also the animation target.)
|
||||
</p>
|
||||
<p>
|
||||
The following sections in <a href='http://www.w3.org/TR/SMIL2/'>SMIL 2.1</a> are relevant as
|
||||
confirmation of this test:
|
||||
</p>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href='http://www.w3.org/TR/SMIL2/smil-timing.html#Timing-EventValueSyntax'>
|
||||
10.4.1
|
||||
subsection "Event values"
|
||||
</a> states: "If the Eventbase-element
|
||||
term is missing, the event-base element defaults to the element on
|
||||
which the eventbase timing is specified (the current element)."
|
||||
</li>
|
||||
<li>
|
||||
<a href='http://www.w3.org/TR/SMIL2/animation.html#animationNS-SpecifyingTargetElement'>
|
||||
3.5.1
|
||||
subsection "The target element"
|
||||
</a> says that the animation target may
|
||||
be defined explicitly through the targetElement="" IDREF or href=""
|
||||
URI, according to the host language. SVG Tiny 1.2 uses the
|
||||
xlink:href="" attribute to specify the target element, so in this
|
||||
test, the animation target is defined through xlink:href="" and the
|
||||
event base per definition is then also this referenced element.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-46-t.html">animate-elem-46-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-53-t.html">→ animate-elem-53-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
120
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-53-t.html
Executable file
120
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-53-t.html
Executable file
|
|
@ -0,0 +1,120 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-53-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-53-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-52-t.html">animate-elem-52-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-61-t.html">→ animate-elem-61-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-53-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-53-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-53-t" src="../png/animate-elem-53-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
The purpose of this test is to test animation of points and calcMode.
|
||||
</p>
|
||||
<p>
|
||||
1. The green squares should animate together side by side. This applies
|
||||
to the red ones as well.
|
||||
2. The time values indicate when the squares should reach the
|
||||
corresponding reference square.
|
||||
3. The total distance is 0+40+80+24.14=144.14
|
||||
a. The "green animation" is 9 sec and linear so each interval
|
||||
should get 3 sec.
|
||||
b. The "red animation" is 8 sec and paced so the intervals
|
||||
should get 2.22, 4.44 and 1.34 sec each.
|
||||
</p>
|
||||
<p>
|
||||
Here comes a more detailed description of the animation.
|
||||
|
||||
The left green square (LG) is animated by animating the points with
|
||||
a value array, consisting of 4 lists of points. This is an animation
|
||||
with calcMode="linear" so an equal amount of time should be spent on
|
||||
all 4 intervals. The right green square (RG) is animated by a simple
|
||||
linear motion followed by a scale to follow LG.
|
||||
The last scale by 1.9428 correspond to a movement of the lover right
|
||||
corner of the square by sqrt((30*0.9428)^2 + (30*0.9428)^2) which is
|
||||
approximately 40 distance units. This is the same distance as the first
|
||||
interval in the values array (and half the second interval).
|
||||
The length (in terms of distance) is not really important for the
|
||||
green squares but for the red squares which are animated with
|
||||
calcMode="paced" the length is used to calculate the time for each
|
||||
interval.
|
||||
Since the first and last interval are of the same length which
|
||||
totals to the length of the middle interval, the interval should
|
||||
be given time according to [27.75%(2.22sec);55.5%(4.44sec);16.75%(1.34sec)].
|
||||
|
||||
So the left red square (LR) is animated just as the LG square but
|
||||
with calcMode="paced". The same applies to the right red square (RR)
|
||||
that has default calcMode ("paced" for animateMotion) compared to the
|
||||
RG square that has calcMode="linear".
|
||||
The calcMode for the scale of RR (and RG) is not important since
|
||||
it's not a value list type of animation.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-52-t.html">animate-elem-52-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-61-t.html">→ animate-elem-61-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
111
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-61-t.html
Executable file
111
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-61-t.html
Executable file
|
|
@ -0,0 +1,111 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-61-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-61-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-53-t.html">animate-elem-53-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-64-t.html">→ animate-elem-64-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-61-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-61-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-61-t" src="../png/animate-elem-61-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This tests validates multiple begin conditions in the begin attribute, assuming support for the <set>
|
||||
element and setting the fill attribute on a <rect> element.
|
||||
</p>
|
||||
<p>
|
||||
The test validates the various possibilities for the begin attribute value: multiple offset values, multiple
|
||||
event base values, multiple sync base values, multiple repeat values, and multiple accessKey values. Finally,
|
||||
the test validates that begin values of different kinds can be mixed.
|
||||
</p>
|
||||
<p>The test shows 6 rows where a red rectangle' s x attribute is animated with <set> elements.</p>
|
||||
<p>
|
||||
On the first three rows, the red rectangles should show on the left from 0 to 1s. From 1 to 2s, the rectangles
|
||||
should show on the right. Then the rectangles should show on the left from 2 to 4s, then on the right again from
|
||||
4 to 5s and come back to the left position and stay there after 5s.
|
||||
</p>
|
||||
<p>
|
||||
On the fourth row, the rectangle's begin condition is event based and requires a user click. After the user clicks
|
||||
on the rectangle, the rectangle should move to the right position for 1s, then move back to the left position for
|
||||
3 seconds, move again to the right position for 1 second before going back to the left position.
|
||||
</p>
|
||||
<p>
|
||||
On the fifth row, the rectangle's begin condition is accessKey based and requires a user to press the 'a' key.
|
||||
After the user presses that key the rectangle should move to the right position for 1s, then move back to the left
|
||||
position for 3 seconds, move again to the right position for 1 second before going back to the left position.
|
||||
</p>
|
||||
<p>
|
||||
The last row's rectangle has a begin condition with two offset values (1s;4s) and should behave like the rectangles
|
||||
of the first three rows for the first 5 seconds of the document's timeline. In addition, the begin condition has a
|
||||
click event base and thus, the rectangle should move to the right position for one second every time the user clicks
|
||||
on it. Finally, the begin condition also has an accessKey condition for the 'b' character. Thus, the rectangle
|
||||
should move to the right position every time the user presses the 'b' key.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-53-t.html">animate-elem-53-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-64-t.html">→ animate-elem-64-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
96
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-64-t.html
Executable file
96
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-64-t.html
Executable file
|
|
@ -0,0 +1,96 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-64-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-64-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-61-t.html">animate-elem-61-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-65-t.html">→ animate-elem-65-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-64-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-64-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-64-t" src="../png/animate-elem-64-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This tests performs basic tests on the dur attribute.</p>
|
||||
<p>
|
||||
'The first row shows a red rectangle subject to a <set> animation with no begin attribute, no end attribute
|
||||
and a dur attribute set to '2s'. Therefore, the animation should be active from 0 to 2 seconds and then terminate.
|
||||
Consequently, the rectangle should show on the right for the first two seconds, and then move to the left position.
|
||||
</p>
|
||||
<p>
|
||||
The second row shows a red rectangle subject to a <set> animation with no begin attribute, no end attribute
|
||||
and a dur attribute set to 'indefinite'. Therefore, the animation should stay active indefinitely and the rectangle
|
||||
should always be on the right position, never on the left position.
|
||||
</p>
|
||||
<p>
|
||||
Finally, the third row shows red rectangle subject to a <set> animation with no begin attribute, no end
|
||||
attribute and a dur attribute set to 'media'. In the context of SVG 1.1, this is equivalent to an 'indefinite'
|
||||
value. Therefore, the animation should stay active indefinitely and the rectangle should always be on the right
|
||||
position, never on the left position.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-61-t.html">animate-elem-61-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-65-t.html">→ animate-elem-65-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
133
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-65-t.html
Executable file
133
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-65-t.html
Executable file
|
|
@ -0,0 +1,133 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-65-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-65-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-64-t.html">animate-elem-64-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-66-t.html">→ animate-elem-66-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-65-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-65-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-65-t" src="../png/animate-elem-65-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This tests performs basic tests on the min attribute. The test is based on the SMIL specification at:
|
||||
http://www.w3.org/TR/smil20/smil-timing.html#Timing-MinMax.
|
||||
</p>
|
||||
<p>
|
||||
Each row in the test shows different rectangles subject to <set> animations with different configurations
|
||||
with regards to the min attribute. For each row but the last one, the animation should be active during the first
|
||||
5 seconds of the animations where the red rectangle should show in the right column. At five seconds into the
|
||||
animation, all the rectangles should move to their left position.
|
||||
</p>
|
||||
<p>
|
||||
On the first row, the first <set> animation (left rectangle) has an end value of 5s, and no min attribute.
|
||||
The active duration resulting from the end attribute is 5s. The first row shows a second rectangle with a
|
||||
<set> animation with the same configuration except that the min attribute value is set to 'media'. Because
|
||||
the <set> element does not define a media, the behavior should be as if the attribute was not specified.
|
||||
The active duration (5s) of the second <set> animation is therefore not constrained.
|
||||
</p>
|
||||
<p>
|
||||
On the second row, the <set> animation has an end value of 5s, and a -6s min attribute. The active duration
|
||||
resulting from the end attribute is 5s. The negative min value is invalid and, as per the specification, the
|
||||
behavior should be as if the attribute was not specified. The active duration (5s) is therefore not constrained.
|
||||
</p>
|
||||
<p>
|
||||
On the third row, the <set> animation has an end value of 5s, and a 3s min attribute. The active duration
|
||||
resulting from the end attribute is 5s. The min value is less than the active duration, so the min attribute does
|
||||
not actually constrain the active duration.
|
||||
</p>
|
||||
<p>
|
||||
On the fourth row, the <set> animation has a dur value of indefinite, an end value of 2s, and a 5s min
|
||||
attribute. The active duration resulting from the end attribute would be 2s. Because this is less than the min
|
||||
value (2s < 5s) the (min constrained) active duration has to be corrected to 5s, despite a simple duration
|
||||
(indefinite) that is greater than the min value.
|
||||
</p>
|
||||
<p>
|
||||
On the fifth row, the <set> animation has a dur value of 1s, an end value of 2s, a repeatCount of 7 and
|
||||
a 5s min attribute. The active duration resulting from dur, end and repeatCount would be 2s. Because this is
|
||||
less than the min value (2s < 5s) the (min constrained) active duration has to be corrected to 5s.
|
||||
</p>
|
||||
<p>
|
||||
On the sixth row, the <set> animation has a dur value of 1s, an end value of 2s, a repeatCount of 5 and
|
||||
a 8s min attribute value. The active duration resulting from dur, end and repeatCount would be 2s, because this
|
||||
is less than the min value (2s < 8s) the active duration has to be corrected to 8s. As the fill attribute is
|
||||
set to 'remove' on the <set> animation, this remove is applied at 5s, the end of the repeatCount. Note,
|
||||
that if the end of active duration would have been used as a syncbase-value for another animation, the corrected
|
||||
end event at (begin + min) = 8s has to be used.
|
||||
</p>
|
||||
<p>
|
||||
On the seventh row, the <set> animation has a dur value of 1s, an end value of 2s, a repeatCount of 5 and
|
||||
a 8s min attribute value. The active duration resulting from dur, end and repeatCount would be 2s, because this
|
||||
is less than the min value (2s < 8s) the active duration has to be corrected to 8s. As the fill attribute is
|
||||
set to 'freeze' on the <set> animation, the animation is frozen at 5s, the end of the repeatCount, the
|
||||
<set> applies indefinitely. Note, that if the end of active duration would have been used as a syncbase-value
|
||||
for another animation, the corrected end event at (begin + min) = 8s has to be used.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-64-t.html">animate-elem-64-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-66-t.html">→ animate-elem-66-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
125
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-66-t.html
Executable file
125
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-66-t.html
Executable file
|
|
@ -0,0 +1,125 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-66-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-66-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-65-t.html">animate-elem-65-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-67-t.html">→ animate-elem-67-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-66-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-66-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-66-t" src="../png/animate-elem-66-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This tests performs basic tests on the max attribute and on combinations of the min and max attributes. The test
|
||||
is based on the SMIL specification at: http://www.w3.org/TR/smil20/smil-timing.html#Timing-MinMax.
|
||||
</p>
|
||||
<p>
|
||||
Each row in the test shows different rectangles subject to <set> animations with different configurations
|
||||
with regards to the max and min attributes. For each row, the animation should be active during the first 5
|
||||
seconds of the animations where the red rectangle should show in the right column. At five seconds into the
|
||||
animation, all the rectangles should move to their left position.
|
||||
</p>
|
||||
<p>
|
||||
On the first row, the <set> animation has a (0s <= t < 5s) active duration and no max attribute so
|
||||
the actual active duration is (0s <= t < 5s). The first row shows a second rectangle with a <set>
|
||||
animation with the same configuration except that the max attribute value is set to 'media'. Because the <set>
|
||||
element does not define a media, the behavior should be as if the attribute was not specified.
|
||||
</p>
|
||||
<p>
|
||||
On the second row, the <set> animation has a (0s <= t < 5s) active duration and a min attribute set
|
||||
to '-6s' for the first rectangle and to 'foo' for the second one. These values are invalid for max and, as per the
|
||||
specification, the behavior should be as if the attribute was not specified. Consequently, the behavior is as for
|
||||
the previous row and the actual active duration is (0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the third row, the <set> animation has a (0s <= t < 8s) initial active duration and a max attribute
|
||||
set to '5s'. The max value is less than the active duration, so the max attribute constrains the active duration to
|
||||
(0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the fourth row, the <set> animation has a (0s <= t < 5s) initial active duration, an indefinite
|
||||
simple duration (dur is set to indefinite) and a max attribute set to '8s'. Because the initial active duration is
|
||||
less than the max attribute the active duration is not constrained and is unchanged at (0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the fifth row, the <set> animation has a (0s <= t < indefinite) initial active duration, a min of 2s
|
||||
and a max of 5s. Because the min value is less than the max value, both apply and the computed active duration is
|
||||
(0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the sixth row, the <set> animation has a (0s <= t < indefinite) initial active duration, a min of 5s
|
||||
and a max of 5s. Because the min value is equal to the max value, both apply and the computed active duration is
|
||||
(0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the seventh row, the <set> animation has a [0s, 5s[[ initial active duration, a min of 8s and a max of 2s.
|
||||
Because the min value is greater than the max value, both are ignored and the computed active duration is [0s, 5s[.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-65-t.html">animate-elem-65-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-67-t.html">→ animate-elem-67-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
116
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-67-t.html
Executable file
116
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-67-t.html
Executable file
|
|
@ -0,0 +1,116 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-67-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-67-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-66-t.html">animate-elem-66-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-68-t.html">→ animate-elem-68-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-67-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-67-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-67-t" src="../png/animate-elem-67-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This tests performs basic tests on restart attribute</p>
|
||||
<p>
|
||||
Each row in the test shows different rectangles subject to <set> animations with different configurations
|
||||
with regards to the restart attribute. For each row, the animation should be active during the first 5 seconds of
|
||||
the animations where the red rectangle should show in the right column. At five seconds into the animation, all
|
||||
the rectangles should move to their left position.
|
||||
</p>
|
||||
<p>
|
||||
On the first row, the <set> animation has a begin attribute set to '0s;1s' and a dur attribute set to 4s.
|
||||
This should result in a first interval of (0s <= t < 4s) which should be superceeded, at 1s, by a new
|
||||
interval of (1s <= t < 5s) because the default restart behavior is 'always'. Consequently, the rectangle
|
||||
should be in the right position during the (0s <= t < 5s) interval and move to the left position at 5s.
|
||||
</p>
|
||||
<p>
|
||||
On the second row, the <set> animation has a begin attribute set to '0s;1s', a dur attribute set to 4s and
|
||||
a restart attribute set to always. The behavior should be the same as for the first row.
|
||||
</p>
|
||||
<p>
|
||||
On the third row, the first (left most) rectangle's <set> animation has a begin attribute set to '0s;1s',
|
||||
a dur set to 5s and a restart attribute set to whenNotActive. Because of the rules for computing intervals, the
|
||||
animation's interval is (0s <= t < 5s) and is not superseded by a (1s <= t < 6s) interval because of
|
||||
the restart value. The second (right most) red rectangle's <set> animation has a begin attribute set to
|
||||
'0s;2.5s' and a dur attribute set to 2.5s. This results in a first interval (0s <= t < 2.5s) which is
|
||||
followed by a (2.5s <= t < 5s) interval. Consequently, the rectangle stays on its right position for the
|
||||
first five seconds before it definitively moves to the left position.
|
||||
</p>
|
||||
<p>
|
||||
On the fourth row, the <set> animation has a begin attribute set to '0s;5s' and a dur attribute set to 5s.
|
||||
This results in a first interval of (0s <= t < 5s). Because the restart attribute is set to 'never', the
|
||||
following possible interval, (5s <= t < 10s) does not apply and the animation is only active for the first
|
||||
5 seconds.
|
||||
</p>
|
||||
<p>
|
||||
The fifth row shows a simple animated red rectangle which lasts for 5 seconds. It shows a reference of how the
|
||||
other animations should behave visually: all red rectangles should have the same horizontal position as the one
|
||||
on the reference row, at any time during the animation.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-66-t.html">animate-elem-66-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-68-t.html">→ animate-elem-68-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
103
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-68-t.html
Executable file
103
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-68-t.html
Executable file
|
|
@ -0,0 +1,103 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-68-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-68-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-67-t.html">animate-elem-67-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-69-t.html">→ animate-elem-69-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-68-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-68-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-68-t" src="../png/animate-elem-68-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This tests the repeatCount attribute</p>
|
||||
<p>
|
||||
Each row in the test shows different rectangles subject to <set> animations with different configurations
|
||||
with regards to the repeatCount attribute. For each row, the animation should be active during the first 5 seconds
|
||||
of the animations where the red rectangle should show in the right column. At five seconds into the animation, all
|
||||
the rectangles should move to their left position.
|
||||
</p>
|
||||
<p>
|
||||
On the first row, the <set> animation has its dur attribute set to '5s' and its repeatCount unspecified.
|
||||
Consequently, its only interval is (0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the second row, the <set> animation has its dur attribute set to 1s and its repeatCount set to 5.
|
||||
Consequently, its only interval is (0s <= t < 5s (1s*5)).
|
||||
</p>
|
||||
<p>
|
||||
On the third row, the <set> animation has its dur attribute set to 10s and its repeatCount set to 0.5.
|
||||
Consequently, its only interval is (0s <= t < 5s (10s*0.5)).
|
||||
</p>
|
||||
<p>
|
||||
On the fourth row, the <set> animation has its dur attribute set to 1s and its repeatCount set to
|
||||
indefinite. It also has an end attribute set to 5s. Consequently, the repeat duration is indefinite, but the
|
||||
active duration is limited by the end attribute and the active interval is (0s <= t < 5s).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-67-t.html">animate-elem-67-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-69-t.html">→ animate-elem-69-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
109
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-69-t.html
Executable file
109
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-69-t.html
Executable file
|
|
@ -0,0 +1,109 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-69-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-69-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-68-t.html">animate-elem-68-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-70-t.html">→ animate-elem-70-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-69-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-69-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-69-t" src="../png/animate-elem-69-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This tests the repeatDur attribute</p>
|
||||
<p>
|
||||
Each row in the test shows different rectangles subject to <set> animations with different configurations
|
||||
with regards to the repeatDur attribute. For each row, the animation should be active during the first 5 seconds
|
||||
of the animations where the red rectangle should show in the right column. At five seconds into the animation,
|
||||
all the rectangles should move to their left position.
|
||||
</p>
|
||||
<p>
|
||||
On the first row, the <set> animation has its dur attribute set to '5s' and its repeatDur unspecified.
|
||||
Consequently, its only interval is (0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the second row, the <set> animation has its dur attribute set to 1s and its repeatDur set to 5s.
|
||||
Consequently, its only interval is (0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the third row, the <set> animation has its dur attribute set to 0.5s and its repeatDur set to 5s.
|
||||
Consequently, its only interval is (0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the fourth row, the <set> animation has its dur attribute set to 1s and its repeatDur set to indefinite.
|
||||
It also has an end attribute set to 5s. Consequently, the repeat duration is indefinite, but the active duration
|
||||
is limited by the end attribute and the active interval is (0s <= t < 5s).
|
||||
</p>
|
||||
<p>
|
||||
On the fifth row, the <set> animation has its dur attribute set to 0.7s and its repeatDur set to 5s.
|
||||
Consequently, its only interval is (0s <= t < 5s). The difference with the 3rd row is that there is a
|
||||
fractional number of simple durations in the active duration (7.1428) where there is a whole number of simple
|
||||
durations in the third row (10).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-68-t.html">animate-elem-68-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-70-t.html">→ animate-elem-70-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
119
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-70-t.html
Executable file
119
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-70-t.html
Executable file
|
|
@ -0,0 +1,119 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-70-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-70-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-69-t.html">animate-elem-69-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-77-t.html">→ animate-elem-77-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-70-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-70-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-70-t" src="../png/animate-elem-70-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This tests the animation's SMIL 'fill' attribute.
|
||||
</p>
|
||||
<p>
|
||||
On the first row, the <set> animation has its dur
|
||||
attribute set to '1s' and its begin attribute set to '0s;
|
||||
firstSet.end + 1s'. The fill attribute is unspecified, so
|
||||
the effect is as if it was set to 'remove', because 'remove' is
|
||||
the default value for fill.
|
||||
|
||||
Consequently, the first interval is (0s <= t < 1s), the second is
|
||||
(2s <= t < 3s), the third, (4s <= t < 5s) etc.. The red rectangle starts on the
|
||||
right position, moves to the left position for one second, moves
|
||||
to the right for 1 second, and so on.
|
||||
</p>
|
||||
<p>
|
||||
On the second row, the <set> animation
|
||||
with the identifier 'firstSet' has its dur attribute
|
||||
set to 1s and its begin attribute set to '0s; firstSet.end'. The fill attribute
|
||||
is set to 'remove'. The behavior should be exactly the same as for the previous
|
||||
row, and the rectangle moves from the right position to the left position
|
||||
every second.
|
||||
</p>
|
||||
<p>
|
||||
On the third row, the <set> animation has its dur attribute set to
|
||||
1s and its begin attribute set to '0s; firstSet.end'. The fill attribute
|
||||
is set to 'freeze'. The first interval should be (0s <= t < 1s), the second (2s <= t < 3s),
|
||||
the third, (4s <= t < 5s), etc. Between interval, the fill behavior should be applied,
|
||||
so the red rectangle should stay on the right position and never go to the
|
||||
left position.
|
||||
</p>
|
||||
<p>
|
||||
On the fourth row, the <set> animation has its dur attribute set to
|
||||
1s and its begin attribute set to '0s'. The fill attribute
|
||||
is set to 'freeze'. The first interval should be (0s <= t < 1s) and there is no
|
||||
following interval. Because of the fill behavior, the <set> should
|
||||
apply the last (and only) animation value after 1s. Consequently, the
|
||||
red rectangle should stay on the right position and never go to the
|
||||
left position.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-69-t.html">animate-elem-69-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-77-t.html">→ animate-elem-77-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
120
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-77-t.html
Executable file
120
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-77-t.html
Executable file
|
|
@ -0,0 +1,120 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-77-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-77-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-70-t.html">animate-elem-70-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-78-t.html">→ animate-elem-78-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-77-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-77-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-77-t" src="../png/animate-elem-77-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test demonstrates how <set> elements change text properties on a <text> element. For each of the
|
||||
text properties being tested, 3 <set> elements are set. The first <set> element acts directly on the
|
||||
<text> element. The second <set> element acts on a <g> containing children. The third
|
||||
<set> element acts on an <a> containing children. In each case the test validates that the animated
|
||||
value set on the <g> and <a> elements is inherited by the <text> element. All the <set>
|
||||
elements have a begin attribute set to 0s with an offset of 1s after end. So, the animation will apply 1s after
|
||||
the document is loaded and will repeat every 1s after the animation ends.
|
||||
</p>
|
||||
<p>
|
||||
The first <set> validates the transform property. When applied to the <text> element, the letter A
|
||||
will be translated to the right every 1s, in the <text> column. When applied to the <g> element, the
|
||||
letter A inherits the transform value and is translated to the right every 1s, as seen in the <g> column.
|
||||
When applied to the <a> element, the letter A inherits the transform value and is translated to the right
|
||||
every 1s, as seen in <a> column.
|
||||
</p>
|
||||
<p>
|
||||
The second <set> validates the text-anchor attribute. When applied to the <text> element, the anchor
|
||||
position of letter A is moved from start to end. When applied to the <g> and <a> element, the property
|
||||
is inherited and hence the anchor position of letter A is moved from start to end in the second row.
|
||||
</p>
|
||||
<p>
|
||||
The third <set> validates the font-size attribute. The font size of letter A is changed from 20 to 30. When
|
||||
applied to <g> and <a> elements, the letter A inherits the font-size and hence in row 3, letter A has
|
||||
a font-size of 30 in all 3 right columns of row 3.
|
||||
</p>
|
||||
<p>
|
||||
The fourth <set> validates the font-family attribute. The font-family is changed from default to serif. When
|
||||
applied to <g> and <a> elements, the letter A inherits the font-family attribute and hence in row 4,
|
||||
letter A has serif font-family in all 3 columns.
|
||||
</p>
|
||||
<p>
|
||||
The fifth <set> validates the font-style attribute. The font-style is changed from normal to italic. When
|
||||
applied to <g> and <a> elements, the letter A inherits the font-style attribute and hence in row 5,
|
||||
letter A is animated to italic in all 3 columns.
|
||||
</p>
|
||||
<p>
|
||||
The sixth <set> validates the font-weight attribute. The font-weight is changed from normal to bold. When
|
||||
applied to <g> and <a> elements, the letter A inherits the font-weight attribute and hence in row 6,
|
||||
letter A is changed to bold on the right.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-70-t.html">animate-elem-70-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-78-t.html">→ animate-elem-78-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
146
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-78-t.html
Executable file
146
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-78-t.html
Executable file
|
|
@ -0,0 +1,146 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-78-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-78-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-77-t.html">animate-elem-77-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-80-t.html">→ animate-elem-80-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-78-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-78-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-78-t" src="../png/animate-elem-78-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test demonstrates how <set> elements change graphics properties on elements from the 'Basic Shapes'
|
||||
chapter. For each of the graphics properties being tested, 3 <set> animations are applied. The first <set>
|
||||
element acts directly on 'Basic Shape' elements. The second <set> element acts on a <g> containing
|
||||
children. The third <set> element acts on an <a> containing children. In each case the test validates
|
||||
that the animated value set on the <g> and <a> elements is inherited by the 'Basic Shape' element. All
|
||||
the <set> elements have a begin attribute set to 0s with an offset of 1s after the end. So, the animation will
|
||||
apply 1s after the document is loaded and will repeat every 1s after the animation ends.
|
||||
</p>
|
||||
<p>
|
||||
The first <set> validates the fill property, with fill set to orange. When applied directly to the 'Basic
|
||||
Shape' element, the <rect> fill value will change to orange when it is translated to the right every 1s.
|
||||
When applied to the <g> and <a> elements, the <rect> inherits the fill value and is orange.
|
||||
</p>
|
||||
<p>
|
||||
The second <set> validates the fill-style property, with fill-style set to evenodd. When applied to the
|
||||
'Basic Shape' element, the <polyline> fill-style is changed from nonzero to evenodd. When applied to the
|
||||
<g> and <a> elements, the <polyline> inherits the evenodd fill-style.
|
||||
</p>
|
||||
<p>
|
||||
The third <set> validates the stroke property. In this case fill is set to none. When stroke is applied
|
||||
to the 'Basic Shape' element, the <rect> on the right appears with the stroke color. When applied to the
|
||||
<g> and <a> elements, the <rect> inherits the stroke property.
|
||||
</p>
|
||||
<p>
|
||||
The fourth <set> validates the stroke-width property, with stroke-width set to 4. When stroke-width is
|
||||
applied to the 'Basic Shape' element, the <line> on the right has a width of 4. When applied to the
|
||||
<g> and <a> elements, the <line> inherits the stroke-width.
|
||||
</p>
|
||||
<p>
|
||||
The fifth <set> validates the stroke-linecap property, with stroke-linecap set to round. When
|
||||
stroke-linecap is applied to the 'Basic Shape' element, the <line> stroke-linecap value switches from
|
||||
butt to round. When applied to the <g> and <a> elements, the <line> inherits the square
|
||||
stroke-linecap.
|
||||
</p>
|
||||
<p>
|
||||
The sixth <set> validates the stroke-linejoin property, with stroke-linejoin set to bevel. When
|
||||
stroke-linejoin is applied to the 'Basic Shape' element, the <line> stroke-linejoin value switches
|
||||
from miter to bevel. When applied to the <g> and <a> elements, the <line> inherits the
|
||||
bevel stroke-linejoin.
|
||||
</p>
|
||||
<p>
|
||||
The seventh <set> validates the stroke-miterlimit property, with stroke-miterlimit set to 10. When
|
||||
stroke-miterlimit is applied to the 'Basic Shape' element, the miter-length to stroke-width ratio exceeds
|
||||
the miter-limit and the <polyline> switches from bevel to miter.When applied to the <g> and
|
||||
<a> elements,the <line> inherits the stroke-miterlimit.
|
||||
</p>
|
||||
<p>
|
||||
The eighth <set> validates the stroke-dashoffset property, with stroke-dashoffset set to 5.5. When
|
||||
stroke-dashoffset is applied to the 'Basic Shape' element, the <line> has a different dashing
|
||||
pattern. When applied to the <g> and <a> elements, the <line> inherits the property.
|
||||
</p>
|
||||
<p>
|
||||
The ninth <set> validates the display property, with display set to none. When display is applied to
|
||||
the 'Basic Shape' element, the <rect> does not appear on the right. When applied to the <g> and
|
||||
<a> elements, the <line> inherits the display property and hence is not seen.
|
||||
</p>
|
||||
<p>
|
||||
The tenth <set> validates the visibility property, with visibility set to hidden. When visibility is
|
||||
applied to the 'Basic Shape' element, the <rect> is hidden on the right. When applied to the
|
||||
<g> and <a> elements, the <line> inherits the visibility property and hence is not seen.
|
||||
</p>
|
||||
<p>
|
||||
The eleventh <set> validates the color property, with color set to blue. When color is applied to the
|
||||
'Basic Shape' element, the <rect> on the right switches from default color of black to blue. When
|
||||
applied to the <g> and <a> elements, the <line> inherits the color property.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-77-t.html">animate-elem-77-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-80-t.html">→ animate-elem-80-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
94
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-80-t.html
Executable file
94
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-80-t.html
Executable file
|
|
@ -0,0 +1,94 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-80-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-80-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-78-t.html">animate-elem-78-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-81-t.html">→ animate-elem-81-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-80-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-80-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-80-t" src="../png/animate-elem-80-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test demonstrates validates the operation of the animateTransform element and validates the operation of
|
||||
the different type attribute values.
|
||||
</p>
|
||||
<p>
|
||||
There are 5 possible values for the type attribute and there is one animateTransform for each type and two for
|
||||
the translate type.
|
||||
</p>
|
||||
<p>
|
||||
For each transform type, the test has a corresponding animateTransform. The test uses references to show what
|
||||
the expected transform should be at different points in the animation. For example, the top left
|
||||
animateTransform, for type=rotate, shows circular markers which turn orange at the time of corresponding
|
||||
transform value should be set by the animateTransform. The marker elements show the expected transform value
|
||||
on reference markers in the test.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-78-t.html">animate-elem-78-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-81-t.html">→ animate-elem-81-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
108
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-81-t.html
Executable file
108
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-81-t.html
Executable file
|
|
@ -0,0 +1,108 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-81-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-81-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-80-t.html">animate-elem-80-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-82-t.html">→ animate-elem-82-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-81-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-81-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-81-t" src="../png/animate-elem-81-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test validates the operation of the animateTransform's additive behavior, as described in the SVG 1.1
|
||||
specification (see http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement).
|
||||
</p>
|
||||
<p>
|
||||
The first two rectangles, on the top row, show the effect of the additive attribute on animateTransform. The
|
||||
left-most animateTransforms have their additive attribute set to replace, so the effect of the two transform
|
||||
animation is as if only the highest priority one applied because it replaces the underlying value. The second
|
||||
animateTransforms (from left to right) have their additive attribute set to sum, which means the transforms they
|
||||
roduce are concatenated.
|
||||
</p>
|
||||
<p>
|
||||
The last two rectangles, on the top row, show the effect of the accumulate attribute on animateTransform. For the
|
||||
left one (third on the row, from left to right), the accumulate attribute is set to none. There are two repeats for
|
||||
the animateTransform. Therefore, the transform goes twice from a scale(1,1) to a scale(2,2). For the right-most
|
||||
animateTransform, the accumulate attribute is set to sum. There are two repeats and the animation goes from scale(1,1)
|
||||
to scale(2,2) for the first iteration and then from scale(2,2) to scale(4,4) (because the result of the second
|
||||
iteration is concatenated to the scale(2,2) result of the previous, first iteration).
|
||||
</p>
|
||||
<p>
|
||||
The rectangles on the bottom row show the combination of additive and cumulative behavior. The left rectangle's
|
||||
animateTransform accumulate behavior is set to none but its additive behavior is set to sum. Therefore, the
|
||||
transform's underlying value (skewX(30)) is always pre-concatenated to the animateTransform's result, which goes
|
||||
from "skewX(30) scale(1,1)" to "skewX(30) scale(2,2)" in each of its two iterations. The right rectangle's
|
||||
animateTransform accumulate behavior is set to sum and the additive behavior is also set to sum. Therefore, the
|
||||
transform's underlying value is always pre-concatenated, so is the result of previous animation iterations.
|
||||
Consequently, the transform goes from "skewX(30) scale(1,1)" to "skewX(30) scale(2,2)" for the first iteration
|
||||
and then from "skewX(30) scale(2,2) scale(1,1)" to "skewX(30) scale(2,2) scale(2,2)" for the second iteration.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-80-t.html">animate-elem-80-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-82-t.html">→ animate-elem-82-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
138
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-82-t.html
Executable file
138
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-82-t.html
Executable file
|
|
@ -0,0 +1,138 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-82-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-82-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-81-t.html">animate-elem-81-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-83-t.html">→ animate-elem-83-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-82-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-82-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-82-t" src="../png/animate-elem-82-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test demonstrates validates the operation of animateTransform with regards to the rotation center and with
|
||||
regards to paced animation.
|
||||
</p>
|
||||
<p>
|
||||
The following descriptions describe the various animations, going top bottom, left to right. For each animation,
|
||||
orange rectangle markers show the expected position for the animated rectangle halfway through the animation. The
|
||||
markers are drawn with a thick stroke for 0.2s, starting at the time when they reflect the expected position.
|
||||
</p>
|
||||
<p>
|
||||
The first animateTransform has type='rotate' and goes from 45 degrees to 90 degrees over a period of 3s. The
|
||||
rotation center for the from and to values is 0, 0. At 0 seconds, the expected transform should be rotate(45). At
|
||||
1.5 seconds, the expected transform is rotate(0.5 * (90 + 45)) = rotate(67.5). At 3s, the expected transform is
|
||||
rotate(90).
|
||||
</p>
|
||||
<p>
|
||||
The second animateTransform has type='rotate' but has a rotation center that varies between the from and to
|
||||
values. The rotation goes from rotate(45,0,0) to rotate(90,-15,-15). At 0s, the expected transform is
|
||||
rotate(45,0,0). At 1.5s, the expected transform is rotate(67.5, -7.5, -7.5). At 3s, the expected transform is
|
||||
rotate(90, -15, -15).
|
||||
</p>
|
||||
<p>
|
||||
The third animateTransform has type='translate' and calcMode='paced'. The animation goes from translate(-40,40)
|
||||
to translate(-20,20) to translate(40,-40). At 0s, the expected transform is translate(-40,40). At 1.5s, the
|
||||
expected transform is translate(0,0). At 3s, the expected transform is translate(40,-40).
|
||||
</p>
|
||||
<p>
|
||||
The fourth animateTransform has type='translate' and calcMode='linear'. The animation goes from translate(-40,40)
|
||||
to translate(-20,-20) to translate(40,-40). At 0s, the expected transform is translate(-40,40). At 1.5s, the
|
||||
expected transform is translate(-20,-20). At 3s, the expected transform is translate(40,-40).
|
||||
</p>
|
||||
<p>
|
||||
The fifth animateTransform has type='scale' and calcMode='paced'. The animation goes from scale(1,2) to scale(3,2)
|
||||
to scale(1,1). The total length along the sx component is 2 + 2 = 4. The total length along the sy component is
|
||||
0 + 1 = 1. At 0s, the expected transform is scale(1,2). At 1.5s, the expected transform is scale(3,1.5) so that a
|
||||
length of 2 has been run on the sx component and a length of 0.5 has been run on the sy component. At 3s, the
|
||||
expected transform is scale(3,2).
|
||||
</p>
|
||||
<p>
|
||||
The sixth animateTransform has type='scale' and calcMode='linear'. The animation goes from scale(1,2) to scale(3,2)
|
||||
to scale(1,1). At 0s, the expected transform is scale(1,2). At 1.5s, the expected transform is scale(3,2). At 3s,
|
||||
the expected transform is scale(1,1).
|
||||
</p>
|
||||
<p>
|
||||
The seventh animateTransform has type="rotate" and calcMode='paced'. The animation goes from rotate(0,0,0) to
|
||||
rotate(45,-15,-20) to rotate(180,30,50). The total length along the rotation angle component is
|
||||
(45 - 0) + (180 - 45) = 180. The total length along the rotation center along the x axis is
|
||||
(0 - (-15)) + (30 - (-15)) = 45 + 15 = 60. The total length along the rotation center along the y axis is
|
||||
(0 - (-20)) + (50 - (-20)) = 20 + 70 = 90. At 0s, the expected transform is rotate(45,-15,-20). At 1.5s, the
|
||||
expected transform is rotate(90,0,5) to achieve constant velocity along the rotation angle component, the x-axis
|
||||
rotation center component and the y-axis rotation center component. At 1.5s, half the distance has been run on
|
||||
each component. For the rotation angle, this means that 45 has been reached and that 45 more degrees in the
|
||||
(45 <= r < 180) interval have been consumed. For the x-axis rotation center, this means that 30 units have
|
||||
been run: the (0 >= x > -15) interval has been fully consumed (15 units long) and 15 units on the
|
||||
(-15 <= x < 30) interval have been consumed, which explains the computed 0 value. For the y-axis rotation
|
||||
center, this means that 45 units have been run: the (0 >= y > -20) interval has been fully consumed and 25
|
||||
units have been consumed in the (-20 <= y < 50) interval, which explains the computed 5 value. At 3s, the
|
||||
expected transform is rotate(180,30,50).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-81-t.html">animate-elem-81-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-83-t.html">→ animate-elem-83-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
117
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-83-t.html
Executable file
117
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-83-t.html
Executable file
|
|
@ -0,0 +1,117 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-83-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-83-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-82-t.html">animate-elem-82-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-84-t.html">→ animate-elem-84-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-83-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-83-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-83-t" src="../png/animate-elem-83-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test validates the operation of the animate element on the <path> element's d attribute.</p>
|
||||
<p>
|
||||
The following descriptions references to the tests by number. The first test is the one showing on the top left.
|
||||
The last, sixth test is the one showing at the bottom right. Test numbers are alocated from left to right and
|
||||
from top to bottom. For each test, there are reference outline markers which show the expected animated shape at
|
||||
different times in the animation. At the time of the expected shape, the outline of the expected shape is drawn
|
||||
with a thick stroke for 0.2s so the test user can visually check that the shapes are matching at the expected
|
||||
times.
|
||||
</p>
|
||||
<p>
|
||||
The first test validates a simple from-to animation on a path's d attribute made of M, C and Z commands where
|
||||
both the from and to attributes are specified. The attributes are compatible with the path element's d attribute.
|
||||
</p>
|
||||
<p>
|
||||
The second test validates a simple to-animation on a path's d attribute made of M, C and Z commands where the to
|
||||
attribute is specified. The attribute is compatible with the path element's d attribute.
|
||||
</p>
|
||||
<p>
|
||||
The third test validates a simple values-animation on a path's d attribute made of M, C and Z commands where the
|
||||
values attribute is specified and specifies three seperate values. The attribute is compatible with the path
|
||||
element's d attribute.
|
||||
</p>
|
||||
<p>
|
||||
The fourth, fifth and sixth tests validate that interpolation between compatible path values (i.e., path values
|
||||
which normalize to the compatible values) is supported.
|
||||
</p>
|
||||
<p>
|
||||
The fourth tests interpolation between a path value containing H, V and L commands (in the from value) and a path
|
||||
value containing compatible h, v and l commands (in the to value).
|
||||
</p>
|
||||
<p>
|
||||
The fifth tests interpolation between a path value containing C and S commands (in the from value) and a path value
|
||||
containing compatible c and s commands (in the to value).
|
||||
</p>
|
||||
<p>
|
||||
The sixth tests interpolation between a path value containing Q, T and A commands (in the from value) and a path
|
||||
value containing compatible q, t and a commands (in the to value).
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-82-t.html">animate-elem-82-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-84-t.html">→ animate-elem-84-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
84
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-84-t.html
Executable file
84
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-84-t.html
Executable file
|
|
@ -0,0 +1,84 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-84-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-84-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-83-t.html">animate-elem-83-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-85-t.html">→ animate-elem-85-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-84-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-84-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-84-t" src="../png/animate-elem-84-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Test animation of color keywords that resolve to animatable RGB values.</p>
|
||||
<p>
|
||||
Five black squares are shown. After two seconds, all five squares should turn red and then smoothly animate the
|
||||
fill color to green over the next five seconds.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-83-t.html">animate-elem-83-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-85-t.html">→ animate-elem-85-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-85-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-85-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-85-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-85-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-84-t.html">animate-elem-84-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-86-t.html">→ animate-elem-86-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-85-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-85-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-85-t" src="../png/animate-elem-85-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>All four rectangles at the top must smoothly animate from black to green over 5 seconds.</p>
|
||||
<p>
|
||||
During this time the bottom two rectangles must be red. Then, the bottom two rectangles must smoothly animate
|
||||
from green( at five seconds), through khaki (at 7.5 seconds), to yellow (at 10 seconds and above). Colored
|
||||
circles indicate the appropriate colors at these times.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-84-t.html">animate-elem-84-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="animate-elem-86-t.html">→ animate-elem-86-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
109
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-86-t.html
Executable file
109
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/animate-elem-86-t.html
Executable file
|
|
@ -0,0 +1,109 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:animate-elem-86-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="animate-elem-86-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/animate.html">16.2 Animation elements</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-85-t.html">animate-elem-85-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="conf-reader-201-t.html">→ conf-reader-201-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>animate-elem-86-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/animate-elem-86-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of animate-elem-86-t" src="../png/animate-elem-86-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test tests fill="freeze" for the case where the duration has been constrained by an 'end' attribute
|
||||
and calcMode="discrete".
|
||||
</p>
|
||||
<p>
|
||||
The correct behaviour is defined by the SMIL time interval model.
|
||||
Time intervals created by the test case from implicit begin, dur and calcMode discrete:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
[0;2s) <i>This means time including 0 seconds until (but not including) time 2 seconds</i>
|
||||
</li>
|
||||
<li>
|
||||
[2s;4s) <i>Time including time 2 seconds until (but not including) time 4 seconds</i>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Time intervals created by implicit begin and end:
|
||||
</p>
|
||||
<ul>
|
||||
<li>[0;2s)</li>
|
||||
</ul>
|
||||
<p>
|
||||
Therefore the frozen value will be 74, resulting in the purple fill
|
||||
being in the right rectangle after 0 seconds.
|
||||
</p>
|
||||
<p>
|
||||
The test has passed if the purple fill is on the right rect only after 0 seconds.
|
||||
Fill must never be set to purple on the left rect, except for before the animation has begun.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-85-t.html">animate-elem-85-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="conf-reader-201-t.html">→ conf-reader-201-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
106
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/conf-reader-201-t.html
Executable file
106
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/conf-reader-201-t.html
Executable file
|
|
@ -0,0 +1,106 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:conf-reader-201-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="conf-reader-201-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/conform.html">Appendix D.5 Conforming SVG Readers</a></p>
|
||||
<p>
|
||||
<a href="animate-elem-86-t.html">animate-elem-86-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-201-t.html">→ coords-constr-201-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>conf-reader-201-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/conf-reader-201-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of conf-reader-201-t" src="../png/conf-reader-201-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test checks that namespace prefixes are handled correctly.
|
||||
</p>
|
||||
<p>
|
||||
First, a random 20-character string is generated. The string only contains characters that are valid NCName letters.
|
||||
This string is then used as a custom prefix for an 'href' attribute in the XLink namespace.
|
||||
An 'image' element is created and two image references are added, one is in the "http://www.this.is.not.an/xlink" namespace,
|
||||
and one is in the XLink namespace. Only the attribute with the 20-character prefix is actually in the XLink namespace,
|
||||
which means that that link should be the one that is used when rendering the 'image' element. This first subtest is
|
||||
using the setAttributeNS method.
|
||||
</p>
|
||||
<p>
|
||||
The second subtest generates a new prefix string, and makes sure it's not equal to the first prefix string.
|
||||
Then an svg fragment is generated as a string, to be parsed by a call to the parseXML method.
|
||||
The 'xlink' prefix is bound to the "http://example.net/bar" namespace, and the generated prefix is bound to the XLink namespace.
|
||||
Similar to the first subtest, the image has two references but only one attribute is actually in the XLink namespace.
|
||||
The fragment is parsed and the result is inserted into the document, which should make the 'image' element visible.
|
||||
If an exception is thrown during the parsing or the insertion of the result output will be shown in the status part of the testcase.
|
||||
</p>
|
||||
<p>
|
||||
The testcase has passed if after the script execution has taken place these conditions are met:
|
||||
<ul>
|
||||
<li>There are two pink images visible.</li>
|
||||
<li>None of these two images shows the word "Fail"</li>
|
||||
<li>The status message says "No exceptions"</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="animate-elem-86-t.html">animate-elem-86-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-201-t.html">→ coords-constr-201-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-201-t.html
Executable file
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-201-t.html
Executable file
|
|
@ -0,0 +1,89 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-constr-201-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-constr-201-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.7 Constrained Transformations</a></p>
|
||||
<p>
|
||||
<a href="conf-reader-201-t.html">conf-reader-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-202-t.html">→ coords-constr-202-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-constr-201-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-constr-201-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-constr-201-t" src="../png/coords-constr-201-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Test Constrained Transformations
|
||||
There are three lines of text in this test.
|
||||
The first is not constrained.
|
||||
The second is constrained with a x and y offset.
|
||||
The third is constrained.
|
||||
The test will pass if, after applying user agent transforms, the circles behave as defined.
|
||||
The test will pass if the three circles align vertically.
|
||||
The reference image displays the file after performing a user agent zoom.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="conf-reader-201-t.html">conf-reader-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-202-t.html">→ coords-constr-202-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-202-t.html
Executable file
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-202-t.html
Executable file
|
|
@ -0,0 +1,89 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-constr-202-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-constr-202-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.7 Constrained Transformations</a></p>
|
||||
<p>
|
||||
<a href="coords-constr-201-t.html">coords-constr-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-203-t.html">→ coords-constr-203-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-constr-202-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-constr-202-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-constr-202-t" src="../png/coords-constr-202-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Test Constrained Transformations
|
||||
There are three lines of text in this test.
|
||||
The first is not constrained.
|
||||
The second is constrained with a x and y offset.
|
||||
The third is constrained.
|
||||
An animation is applied to the viewBox attribute.
|
||||
The test will pass if the circles are affected by the viewBox animation and, after applying user agent transforms, the circles behave as defined.
|
||||
The test will pass if the three circles align vertically.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-constr-201-t.html">coords-constr-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-203-t.html">→ coords-constr-203-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-203-t.html
Executable file
89
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-203-t.html
Executable file
|
|
@ -0,0 +1,89 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-constr-203-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-constr-203-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.7 Constrained Transformations</a></p>
|
||||
<p>
|
||||
<a href="coords-constr-202-t.html">coords-constr-202-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-204-t.html">→ coords-constr-204-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-constr-203-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-constr-203-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-constr-203-t" src="../png/coords-constr-203-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Test Constrained Transformations
|
||||
There are three lines of text in this test.
|
||||
The first is not constrained.
|
||||
The second is constrained with a x and y offset.
|
||||
The third is constrained.
|
||||
An animation is applied to the content group.
|
||||
The test will pass if only the first circle is affected by the group animation and, after applying user agent transforms, the circles behave as defined.
|
||||
The test will pass if the three circles align vertically.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-constr-202-t.html">coords-constr-202-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-constr-204-t.html">→ coords-constr-204-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-204-t.html
Executable file
85
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-constr-204-t.html
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-constr-204-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-constr-204-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.7 Constrained Transformations</a></p>
|
||||
<p>
|
||||
<a href="coords-constr-203-t.html">coords-constr-203-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-coord-01-t.html">→ coords-coord-01-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-constr-204-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-constr-204-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-constr-204-t" src="../png/coords-constr-204-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Animates a rect that has transform="ref" and tests that the animateMotion transform is supplemental.
|
||||
The rects should follow a path diagonally from top-left to bottom-right.
|
||||
The test is passed if a single green rectangle is visible across the screen if a red rectangle is seen
|
||||
the test is failed.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-constr-203-t.html">coords-constr-203-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-coord-01-t.html">→ coords-coord-01-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
80
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-coord-01-t.html
Executable file
80
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-coord-01-t.html
Executable file
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-coord-01-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-coord-01-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.3 The initial coordinate system</a></p>
|
||||
<p>
|
||||
<a href="coords-constr-204-t.html">coords-constr-204-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-pAR-201-t.html">→ coords-pAR-201-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-coord-01-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-coord-01-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-coord-01-t" src="../png/coords-coord-01-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>Tests the default initial coordinate system used by renderer. Should be 0,0 if not specified.This is illustrated by comparing red boxes that are missing a coordinate or all coordinates with yellow boxes that have the correct coordinates specified. This test should produce three red boxes, with small yellow boxes rendered on top of them. These boxes should be placed along the origin, and x and y axis.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-constr-204-t.html">coords-constr-204-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-pAR-201-t.html">→ coords-pAR-201-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
95
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-pAR-201-t.html
Executable file
95
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-pAR-201-t.html
Executable file
|
|
@ -0,0 +1,95 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-pAR-201-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-pAR-201-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.9 The 'preserveAspectRatio' attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-coord-01-t.html">coords-coord-01-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-01-t.html">→ coords-trans-01-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-pAR-201-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-pAR-201-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-pAR-201-t" src="../png/coords-pAR-201-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test verifies the implementation of the viewBox and the preserveAspectRatio attribute on the animation element.
|
||||
It exercises the various preserveAspectRatio values and uses a general entity definition in order to make reading of the SVG source easier.
|
||||
</p>
|
||||
<p>
|
||||
For the test to pass the following criteria should be met:
|
||||
</p>
|
||||
<ol>
|
||||
<li>the xMin* test image left edge should be on the left edge of the blue viewport rect</li>
|
||||
<li>the xMid* test image should be centered in the blue viewport rect</li>
|
||||
<li>the xMax* test image right edge should be on the right edge of the blue viewport rect</li>
|
||||
<li>the yMin* test image top edge should be on the top edge of the blue viewport rect</li>
|
||||
<li>the yMid* test image should be centered in the blue viewport rect</li>
|
||||
<li>the yMax* test image bottom edge should be on the bottom edge of the blue viewport rect</li>
|
||||
<li>no part of the image may be clipped away</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-coord-01-t.html">coords-coord-01-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-01-t.html">→ coords-trans-01-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-01-t.html
Executable file
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-01-t.html
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-01-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-01-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-pAR-201-t.html">coords-pAR-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-02-t.html">→ coords-trans-02-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-01-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-01-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-01-t" src="../png/coords-trans-01-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test verifies the implementation of transforms. It tests elementary transforms and transform nesting. Note that for layout purposes, this test uses nesting of translation with the elementary transforms.</p>
|
||||
<p>The rendered picture should match the reference image exactly except for variations in the labeling text.</p>
|
||||
<p>The test uses the rect element, the fill color (solid primary colors) and transforms.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-pAR-201-t.html">coords-pAR-201-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-02-t.html">→ coords-trans-02-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-02-t.html
Executable file
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-02-t.html
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-02-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-02-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-01-t.html">coords-trans-01-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-03-t.html">→ coords-trans-03-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-02-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-02-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-02-t" src="../png/coords-trans-02-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test verifies the implementation of transforms. It tests elementary transforms and transform nesting. Note that for layout purposes, this test uses nesting of translation with the elementary transforms.</p>
|
||||
<p>The rendered picture should match the reference image exactly except for variations in the labeling text.</p>
|
||||
<p>The test uses the rect element, the fill color (solid primary colors) and transforms.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-01-t.html">coords-trans-01-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-03-t.html">→ coords-trans-03-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-03-t.html
Executable file
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-03-t.html
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-03-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-03-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-02-t.html">coords-trans-02-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-04-t.html">→ coords-trans-04-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-03-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-03-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-03-t" src="../png/coords-trans-03-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test verifies the implementation of transforms. It tests elementary transforms and transform nesting. Note that for layout purposes, this test uses nesting of translation with the elementary transforms.</p>
|
||||
<p>The rendered picture should match the reference image exactly except for variations in the labeling text.</p>
|
||||
<p>The test uses the rect element, the fill color (solid primary colors) and transforms.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-02-t.html">coords-trans-02-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-04-t.html">→ coords-trans-04-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-04-t.html
Executable file
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-04-t.html
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-04-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-04-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-03-t.html">coords-trans-03-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-05-t.html">→ coords-trans-05-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-04-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-04-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-04-t" src="../png/coords-trans-04-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test verifies the implementation of transforms. It tests elementary transforms and transform nesting. Note that for layout purposes, this test uses nesting of translation with the elementary transforms.</p>
|
||||
<p>The rendered picture should match the reference image exactly except for variations in the labeling text.</p>
|
||||
<p>The test uses the rect element, the fill color (solid primary colors) and transforms.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-03-t.html">coords-trans-03-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-05-t.html">→ coords-trans-05-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-05-t.html
Executable file
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-05-t.html
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-05-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-05-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-04-t.html">coords-trans-04-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-06-t.html">→ coords-trans-06-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-05-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-05-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-05-t" src="../png/coords-trans-05-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test verifies the implementation of transforms. It tests elementary transforms and transform nesting. Note that for layout purposes, this test uses nesting of translation with the elementary transforms.</p>
|
||||
<p>The rendered picture should match the reference image exactly except for variations in the labeling text.</p>
|
||||
<p>The test uses the rect element, the fill color (solid primary colors) and transforms.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-04-t.html">coords-trans-04-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-06-t.html">→ coords-trans-06-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-06-t.html
Executable file
82
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-06-t.html
Executable file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-06-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-06-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-05-t.html">coords-trans-05-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-07-t.html">→ coords-trans-07-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-06-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-06-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-06-t" src="../png/coords-trans-06-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>This test verifies the implementation of transforms. It tests elementary transforms and transform nesting. Note that for layout purposes, this test uses nesting of translation with the elementary transforms.</p>
|
||||
<p>The rendered picture should match the reference image exactly except for variations in the labeling text.</p>
|
||||
<p>The test uses the rect element, the fill color (solid primary colors) and transforms.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-05-t.html">coords-trans-05-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-07-t.html">→ coords-trans-07-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-07-t.html
Executable file
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-07-t.html
Executable file
|
|
@ -0,0 +1,90 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-07-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-07-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-06-t.html">coords-trans-06-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-08-t.html">→ coords-trans-08-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-07-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-07-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-07-t" src="../png/coords-trans-07-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test verifies the implementation of transforms. It tests elementary transforms
|
||||
and transform nesting.
|
||||
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
|
||||
</p>
|
||||
<p>
|
||||
The rendered picture should match the reference image exactly except for variations in the labeling text.
|
||||
</p>
|
||||
<p>
|
||||
The test uses the rect element, the fill color (solid primary colors) and transforms.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-06-t.html">coords-trans-06-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-08-t.html">→ coords-trans-08-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-08-t.html
Executable file
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-08-t.html
Executable file
|
|
@ -0,0 +1,90 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-08-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-08-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-07-t.html">coords-trans-07-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-09-t.html">→ coords-trans-09-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-08-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-08-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-08-t" src="../png/coords-trans-08-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test verifies the implementation of transforms. It tests elementary transforms
|
||||
and transform nesting.
|
||||
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
|
||||
</p>
|
||||
<p>
|
||||
The rendered picture should match the reference image exactly except for variations in the labeling text.
|
||||
</p>
|
||||
<p>
|
||||
This test will check if the transfomations performed are carried out in the proper order. The result should differ depending on which transformation comes first.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-07-t.html">coords-trans-07-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-trans-09-t.html">→ coords-trans-09-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-09-t.html
Executable file
90
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-trans-09-t.html
Executable file
|
|
@ -0,0 +1,90 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-trans-09-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-trans-09-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.6 The transform attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-08-t.html">coords-trans-08-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-units-01-t.html">→ coords-units-01-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-trans-09-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-trans-09-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-trans-09-t" src="../png/coords-trans-09-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test verifies the implementation of transforms. It tests elementary transforms
|
||||
and transform nesting.
|
||||
Note that for layout purposes, this test uses nesting of translation with the elementary transforms.
|
||||
</p>
|
||||
<p>
|
||||
The rendered picture should match the reference image exactly except for variations in the labeling text.
|
||||
</p>
|
||||
<p>
|
||||
This test will check if the various matrix operations work
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-08-t.html">coords-trans-08-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-units-01-t.html">→ coords-units-01-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
95
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-units-01-t.html
Executable file
95
test/W3C_SVG_12_TinyTestSuite_beta/htmlEmbedHarness/coords-units-01-t.html
Executable file
|
|
@ -0,0 +1,95 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-units-01-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-units-01-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.11 Units</a></p>
|
||||
<p>
|
||||
<a href="coords-trans-09-t.html">coords-trans-09-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-viewattr-05-t.html">→ coords-viewattr-05-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-units-01-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-units-01-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-units-01-t" src="../png/coords-units-01-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
Verify the conversion processing of percentage and fraction values relative to object bounding boxes.
|
||||
This is used when defining linear and radial gradients.
|
||||
</p>
|
||||
<p>
|
||||
The test validates conversion for coordinates, width, height and length. The first test defines two
|
||||
corresponding linear gradients, which specify coordinates using fractions for the first and user
|
||||
coordinates for the second. The second test defines two corresponding radial gradients, which specify
|
||||
a length (radius) using fractions for the first and user space for the second.
|
||||
</p>
|
||||
<p>
|
||||
The rendered image should match the reference image.
|
||||
</p>
|
||||
<p>
|
||||
The test also assumes that linear and radial gradients are implemented.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-trans-09-t.html">coords-trans-09-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="coords-viewattr-05-t.html">→ coords-viewattr-05-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
|
||||
"http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
|
||||
<meta name="description" content="W3C SVG 1.2 Tiny Test Suite"/>
|
||||
<title>
|
||||
SVG 1.2 Tiny test:coords-viewattr-05-t </title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
.bodytext { font-family:verdana, helvetica, sans-serif; font-size: 12pt; line-height: 125%; text-align: Left; margin-top: 0; margin-bottom: 0 }
|
||||
.pageTitle { line-height: 150%; font-size: 20pt; font-weight : 900; margin-bottom: 20pt }
|
||||
.pageSubTitle { color : blue; line-height: 100%; font-size: 24pt; font-weight : 900 }
|
||||
.openChapter { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.openSection { color : blue; line-height: 125%; font-weight : 900 }
|
||||
.info { color : black; line-height: 110%; font-size: 10pt; font-weight : 100 }
|
||||
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
||||
.opscript {margin-left: 3%; margin-right: 3%; }
|
||||
.opscript p { margin-top: 0.7em}
|
||||
.navbar {background: black; color: white; font-weight: bold}
|
||||
-->
|
||||
</style>
|
||||
</head>
|
||||
<body class="bodytext">
|
||||
|
||||
<div class="linkbar">
|
||||
<p>
|
||||
<a href="coords-viewattr-05-t.html">Tiny version</a></p>
|
||||
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/coords.html">7.8 The 'viewBox' attribute</a></p>
|
||||
<p>
|
||||
<a href="coords-units-01-t.html">coords-units-01-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="extend-namespace-02-t.html">→ extend-namespace-02-t</a>
|
||||
</p></div>
|
||||
|
||||
<table align="center" border="0" cellspacing="0" cellpadding="10">
|
||||
<tr>
|
||||
<td align="center" colspan="3">
|
||||
<table border="0" cellpadding="8">
|
||||
<tr>
|
||||
<td align="center" colspan="2" class="pageTitle">
|
||||
<h1>coords-viewattr-05-t</h1>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="navbar">
|
||||
<td align="center">
|
||||
SVG Image
|
||||
</td>
|
||||
<td align="center">
|
||||
PNG Image
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">
|
||||
<embed src="../svggen/coords-viewattr-05-t.svg" width="480" height="360"/>
|
||||
</td>
|
||||
<td align="left">
|
||||
<img alt="raster image of coords-viewattr-05-t" src="../png/coords-viewattr-05-t.png" width="480" height="360"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="opscript">
|
||||
<p>
|
||||
This test verifies the implementation of the preserveAspectRatio attribute on <image> referencing raster content.
|
||||
This is a modified version of the sample file included in the SVG specification. It exercises the various preserveAspectRatio
|
||||
values and uses a general entity definition in order to make reading of the SVG source easier.
|
||||
</p>
|
||||
<p>The rendered picture should match the reference image exactly except for variations in the labeling text.</p>
|
||||
|
||||
</div>
|
||||
<div class="linkbar"> <p>
|
||||
<a href="coords-units-01-t.html">coords-units-01-t ←</a>
|
||||
<a href="index.html">index</a>
|
||||
<a href="extend-namespace-02-t.html">→ extend-namespace-02-t</a>
|
||||
</p></div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue