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

96 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:struct-use-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="struct-use-207-t.html">Tiny version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVGMobile12/struct.html">5.6 The 'use' element</a></p>
<p>
<a href="struct-use-206-t.html">struct-use-206-t ←</a>
<a href="index.html">index</a>
<a href="struct-use-208-t.html">→ struct-use-208-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>struct-use-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/struct-use-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 struct-use-207-t" src="../png/struct-use-207-t.png" width="480" height="360"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="opscript">
<p>
This file is intented to test the computed values in external
references. Both files (referencing and referenced) define similar
colors/gradients via 'color', 'linearGradient' and 'radialGradient'.
The ids of those definitions are the same but the actual appearance are
different. These definitions are used to test the property inheritance
feature of SVG.
</p>
<p>
The top left rectangle should be filled with the blue linear gradient
since the 'use' has a specified value defined in the 'defs' section.
The top right rectangle is forestgreen since the 'use' has a computed
value. The bottom left rectangle is also forestgreen since the fill is
not inherited from the referenced element's original parent. The bottom
right rectangle is filled with the orange radial gradient since the
computed value is given by the CSS cascade.
</p>
</div>
<div class="linkbar"> <p>
<a href="struct-use-206-t.html">struct-use-206-t ←</a>
<a href="index.html">index</a>
<a href="struct-use-208-t.html">→ struct-use-208-t</a>
</p></div>
</body>
</html>