fabric.js/test/W3C_SVG_12_TinyTestSuite_beta/htmlObjectHarness/conf-reader-201-t.html
2010-06-10 11:14:53 -04:00

106 lines
4.7 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: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">
<object data="../svggen/conf-reader-201-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 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>