126 lines
5.6 KiB
HTML
126 lines
5.6 KiB
HTML
<?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>
|
|
<script src="../../fast/repaint/resources/repaint.js"></script>
|
|
<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.1 Test Suite"/>
|
|
<title>
|
|
SVG 1.1 test:render-groups-01-b </title>
|
|
<style type="text/css">
|
|
<!--
|
|
body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
|
|
.pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
|
|
.pageSubTitle { color: blue; font-size: 200%; font-weight: bold }
|
|
.openChapter { color: blue; line-height: 1.3; font-weight: bold }
|
|
.openSection { color: blue; line-height: 125%; font-weight: bold }
|
|
.info { color: black; line-height: 1.2; font-size: 90%; }
|
|
p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
|
|
.linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
|
|
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>
|
|
<script>
|
|
function repaintTest() {
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
setTimeout(startTest, 0);
|
|
}
|
|
function startTest() {
|
|
window.location='#scrollTo';
|
|
setTimeout(finishTest, 0);
|
|
}
|
|
function finishTest()
|
|
{
|
|
if (window.location.toString().indexOf("#") == -1) {
|
|
setTimeout(finishTest, 0);
|
|
return;
|
|
}
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bodytext" onload="runRepaintTest()">
|
|
|
|
<div class="linkbar">
|
|
<p>
|
|
<a href="full-render-groups-01-b.html">Full version</a>, <a href="basic-render-groups-01-b.html">Basic version</a></p>
|
|
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/render.html#Grouping
|
|
">3.4 How groups are rendered</a></p>
|
|
<p>
|
|
<a href="full-pservers-pattern-01-b.html">pservers-pattern-01-b ←</a>
|
|
<a href="full-index.html">index</a>
|
|
<a href="full-script-handle-01-b.html">→ script-handle-01-b</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-b</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="../W3C-SVG-1.1/render-groups-01-b.svg" width="480" height="360"/>
|
|
</td>
|
|
<td align="left">
|
|
<img alt="raster image of render-groups-01-b" src="../W3C-SVG-1.1/render-groups-01-b-w3c.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. The
|
|
|
|
test validates that groups are conceptually rendered offscreen before being
|
|
|
|
rendered on the canvas. This is done by grouping the same overlapping objects and
|
|
|
|
rendering the group at half opacity. The background pattern (vertical stripes) should
|
|
|
|
show throw all the group elements. However, 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,
|
|
|
|
opacity, 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="full-pservers-pattern-01-b.html">pservers-pattern-01-b ←</a>
|
|
<a name="scrollTo" href="full-index.html">index</a>
|
|
<a href="full-script-handle-01-b.html">→ script-handle-01-b</a>
|
|
</p></div>
|
|
</body>
|
|
</html>
|