fabric.js/test/W3C_SVG_12_TinyTestSuite_beta/htmlObjectHarness/animate-elem-19-t.html
2010-06-10 11:14:53 -04:00

86 lines
3.3 KiB
HTML
Executable file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
<object data="../svggen/animate-elem-19-t.svg" width="480" height="360" type="image/svg+xml"><p style="font-size:300%;color:red">FAIL</p></object>
</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>