fabric.js/test/W3C_SVG_12_TinyTestSuite_beta/htmlObjectHarness/render-groups-01-t.html
2010-06-10 11:14:53 -04:00

83 lines
3.8 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:render-groups-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="render-groups-01-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/render.html">3 Rendering Model</a></p>
<p>
<a href="render-elems-08-t.html">render-elems-08-t ←</a>
<a href="index.html">index</a>
<a href="render-groups-03-t.html">→ render-groups-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>render-groups-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">
<object data="../svggen/render-groups-01-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 render-groups-01-t" src="../png/render-groups-01-t.png" width="480" height="360"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="opscript">
<p>Verifies implicit rendering order (paragraph 3.3) and grouping mechanism (paragraphs 3.4). It also validates basic Shape, Image and text rendering.</p>
<p>This test renders 3 elements: a text string "SVG", then a shape, then an image. Because of their definition order and coordinates, the image should be on top of the rectangle and the rectangle on top of the text. None of the "SVG" should show through the rectangle and none of the rectangle should show through the image.</p>
<p>Prerequisites: the test assumes proper handling of the fill stroke, stroke-width, font-size rendering properties. It uses the rect, line, text and image elements, as well as all the elements required for the test template. To ensure that the text string is overlapped by the other elements and to avoid a dependency on system fonts, an SVG font is used.</p>
<p>The rendered image should match the reference image exactly.</p>
</div>
<div class="linkbar"> <p>
<a href="render-elems-08-t.html">render-elems-08-t ←</a>
<a href="index.html">index</a>
<a href="render-groups-03-t.html">→ render-groups-03-t</a>
</p></div>
</body>
</html>