Source code
Revision control
Copy as Markdown
Other Tools
SVG Preview (Scaled)
<svg id="svg-root" width="100%" height="100%"
<!--======================================================================-->
<!--= Copyright 2008 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, European Research Consortium for =-->
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
<!--= All Rights Reserved. =-->
<!--======================================================================-->
template-version="1.3" reviewer="CL" author="CM" status="accepted"
version="$Revision: 1.9 $" testname="$RCSfile: styling-pres-02-f.svg,v $">
<d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/styling.html#UsingPresentationAttributes">
<p>
This tests that a presentation attribute that is not relevant
to a given element which is otherwise stylable is correctly stored
in the property collection for that element. In particular,
it tests the following presentation attributes:
</p>
<ul>
<li>fill on image</li>
<li>stop-opacity on tspan</li>
<li>font-size on rect</li>
<li>font-style on circle</li>
<li>stop-color on text</li>
<li>font-variant on ellipse</li>
<li>letter-spacing on polyline</li>
<li>flood-color on tref</li>
<li>flood-opacity on textPath</li>
<li>color-interpolation-filters on altGlyph</li>
<li>display on linearGradient</li>
<li>fill-rule on stop</li>
<li>visibility on radialGradient</li>
<li>lighting-color on clipPath</li>
</ul>
</d:testDescription>
<p>
The test comprises 14 sub-tests, each with a rectangle that indicates
whether a given presentation attribute of the 14 listed in the test
description affects the style of the element on which it is specified. A rectangle
is black if the sub-test did not run, red if the sub-test failed and
green if the sub-test succeeded.
</p>
</d:operatorScript>
<p>
The test is passed if all 14 rectangles are green.
</p>
</d:passCriteria>
</d:SVGTestCase>
<title id="test-title">$RCSfile: styling-pres-02-f.svg,v $</title>
<defs>
<font-face
font-family="SVGFreeSansASCII"
unicode-range="U+0-7F">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
</font-face-src>
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<text x='10' y='20'>Testing inapplicable presentation attributes</text>
<g visibility='hidden'>
<path id="path" d="M0,0"/>
<image id='image' xlink:href='../images/20x20.png' width='10' height='10' fill='rgb(0, 0, 255)'/>
<rect id='rect' width='10' height='10' font-size='123px'/>
<circle id='circle' r='10' font-style='italic'/>
<ellipse id='ellipse' rx='10' ry='5' font-variant='small-caps'/>
<polyline id='polyline' points='0,0 10,10' letter-spacing='20px'/>
<text id='text' stop-color='rgb(0, 255, 0)'>a<tspan id='tspan' stop-opacity='0.5'>b</tspan><tref id='tref' xlink:href='#tspan' flood-color='rgb(255, 0, 0)'/><textPath id='textPath' xlink:href='#path' flood-opacity='0.25'/><altGlyph id='altGlyph' glyphRef='blah' color-interpolation-filters='auto'>c</altGlyph></text>
<linearGradient id='linearGradient' display='block'><stop id='stop' offset='0' fill-rule='evenodd'/></linearGradient>
<radialGradient id='radialGradient' visibility='hidden'><stop offset='0'/></radialGradient>
<clipPath id='clipPath' lighting-color='rgb(255, 255, 255)'/>
</g>
<g font-size='14'>
<rect id='r1' x='10' y='25' width='20' height='20'/>
<text x='40' y='40'>fill on image</text>
<rect id='r2' x='10' y='55' width='20' height='20'/>
<text x='40' y='70'>stop-opacity on tspan</text>
<rect id='r3' x='10' y='85' width='20' height='20'/>
<text x='40' y='100'>font-size on rect</text>
<rect id='r4' x='10' y='115' width='20' height='20'/>
<text x='40' y='130'>font-style on circle</text>
<rect id='r5' x='10' y='145' width='20' height='20'/>
<text x='40' y='160'>stop-color on text</text>
<rect id='r6' x='10' y='175' width='20' height='20'/>
<text x='40' y='190'>font-variant on ellipse</text>
<rect id='r7' x='10' y='205' width='20' height='20'/>
<text x='40' y='220'>letter-spacing on polyline</text>
<rect id='r11' x='250' y='25' width='20' height='20'/>
<text x='280' y='40'>flood-color on tref</text>
<rect id='r12' x='250' y='55' width='20' height='20'/>
<text x='280' y='70'>flood-opacity on textPath</text>
<rect id='r13' x='250' y='85' width='20' height='20'/>
<text x='280' y='100'>clr-intp-filters on altGlyph</text>
<rect id='r14' x='250' y='115' width='20' height='20'/>
<text x='280' y='130'>display on linearGradient</text>
<rect id='r15' x='250' y='145' width='20' height='20'/>
<text x='280' y='160'>fill-rule on stop</text>
<rect id='r16' x='250' y='175' width='20' height='20'/>
<text x='280' y='190'>visibility on radialGradient</text>
<rect id='r17' x='250' y='205' width='20' height='20'/>
<text x='280' y='220'>lighting-color on clipPath</text>
</g>
<script><![CDATA[
function $(x) { return document.getElementById(x) }
function decimalToHex(d) {
var hex = Number(d).toString(16);
while (hex.length < 2) {
hex = "0" + hex;
}
return hex;
}
function checkSVGColor(e, p, r, g, b) {
var v;
try {
var cssstyledecl = document.defaultView.getComputedStyle(e,null);
var v = cssstyledecl.getPropertyValue(p);
var longhex = "#" + decimalToHex(r) + decimalToHex(g) + decimalToHex(b);
return v == "rgb(" + r + ", " + g + ", " + b + ")" ||
v == "rgba(" + r + ", " + g + ", " + b + ", 1)" ||
v == longhex ||
v == longhex.toUpperCase();
} catch (ex) {
}
return false;
}
function checkFloat(e, p, f) {
var v;
try {
var cssstyledecl = document.defaultView.getComputedStyle(e,null);
v = cssstyledecl.getPropertyValue(p);
return parseFloat(v) == f;
} catch (ex) {
}
return false;
}
function checkPx(e, p, f) {
var v;
try {
var cssstyledecl = document.defaultView.getComputedStyle(e,null);
v = cssstyledecl.getPropertyValue(p);
return v == f;
} catch (ex) {
}
return false;
}
function checkIdent(e, p, i) {
var v;
i = i.toLowerCase();
try {
var cssstyledecl = document.defaultView.getComputedStyle(e,null);
v = cssstyledecl.getPropertyValue(p);
return v.toLowerCase() == i;
} catch (ex) {
}
return false;
}
function report(n, b) {
$('r' + n).setAttribute('fill', b ? 'green' : 'red');
}
report(1, checkSVGColor($('image'), 'fill', 0, 0, 255));
report(2, checkFloat($('tspan'), 'stop-opacity', 0.5));
report(3, checkPx($('rect'), 'font-size', '123px'));
report(4, checkIdent($('circle'), 'font-style', 'italic'));
report(5, checkSVGColor($('text'), 'stop-color', 0, 255, 0));
report(6, checkIdent($('ellipse'), 'font-variant', 'small-caps'));
report(7, checkPx($('polyline'), 'letter-spacing', '20px'));
report(11, checkSVGColor($('tref'), 'flood-color', 255, 0, 0));
report(12, checkFloat($('textPath'), 'flood-opacity', 0.25));
report(13, checkIdent($('altGlyph'), 'color-interpolation-filters', 'auto'));
report(14, checkIdent($('linearGradient'), 'display', 'block'));
report(15, checkIdent($('stop'), 'fill-rule', 'evenodd'));
report(16, checkIdent($('radialGradient'), 'visibility', 'hidden'));
report(17, checkSVGColor($('clipPath'), 'lighting-color', 255, 255, 255));
]]></script>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none"
fill="black">$Revision: 1.9 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
<!-- comment out this watermark once the test is approved -->
<!--
<g id="draft-watermark">
<rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
<text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>
-->
</svg>