fabric.js/test/W3C_SVG_12_TinyTestSuite_beta/htmlObjectHarness/paint-stroke-207-t.html
2010-06-10 11:14:53 -04:00

102 lines
4.1 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:paint-stroke-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="paint-stroke-207-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/painting.html">11.4 Stroke Properties</a></p>
<p>
<a href="paint-stroke-205-t.html">paint-stroke-205-t ←</a>
<a href="index.html">index</a>
<a href="paint-vfill-201-t.html">→ paint-vfill-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>paint-stroke-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">
<object data="../svggen/paint-stroke-207-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 paint-stroke-207-t" src="../png/paint-stroke-207-t.png" width="480" height="360"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="opscript">
<p>
Centering of stroke on the outline of rectangles.
</p>
<p>
The main indication for a failed test is the appearence of something red.
</p>
<p>
The width and position of the stroke centered on the outline of a rectangle is tested with four stroked rectangles,
one is the thin black stroked test frame rectangle, the second one a large blue rectangle, the third a rectangle
with rounded corners, looking like a circle and the fourth a small square.
</p>
<p>
The correct position is tested by a comparsion with several filled rectangles in the background or in the fourth case
covering the test square completely. The parts of the background covered with the blue test rectangles are filled red,
respectively the test square is stroked red too.
Therefore if something red gets visible, the position of the stroke of
the related test rectangle is wrong.
</p>
<p>
According to the conformance criteria all visual rendering should be accurate to within one px unit to the mathematically
correct result. Therefore possible residuals from the red background parts have to be in this
range of accuracy to pass the test.
</p>
</div>
<div class="linkbar"> <p>
<a href="paint-stroke-205-t.html">paint-stroke-205-t ←</a>
<a href="index.html">index</a>
<a href="paint-vfill-201-t.html">→ paint-vfill-201-t</a>
</p></div>
</body>
</html>