<?xml version="1.0" standalone="no"?> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" | |
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd"> | |
<!-- | |
Copyright 2006 The Apache Software Foundation | |
Licensed under the Apache License, Version 2.0 (the "License"); | |
you may not use this file except in compliance with the License. | |
You may obtain a copy of the License at | |
http://www.apache.org/licenses/LICENSE-2.0 | |
Unless required by applicable law or agreed to in writing, software | |
distributed under the License is distributed on an "AS IS" BASIS, | |
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
See the License for the specific language governing permissions and | |
limitations under the License. | |
--> | |
<!-- ====================================================================== --> | |
<!-- Test of the dom SVGColor interface --> | |
<!-- --> | |
<!-- @author deweese@apache.org --> | |
<!-- @version $Id: fill.svg 201374 2004-08-18 07:17:26Z vhardy $ --> | |
<!-- ====================================================================== --> | |
<?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?> | |
<svg id="body" width="450" height="500" viewBox="0 0 450 500" | |
onload="onload()" | |
xmlns="http://www.w3.org/2000/svg" | |
xmlns:xlink="http://www.w3.org/1999/xlink" > | |
<title>Test DOM SVGColor Interface</title> | |
<text x="50%" y="45" class="title">Test DOM SVGColor Interface</text> | |
<script type="text/ecmascript"><![CDATA[ | |
var UNIT_NUMBER =1; | |
var UNIT_PERCENT=2; | |
function onload() { | |
test(); | |
} | |
function showFill(id, suff) { | |
var elem = document.getElementById(id); | |
var fill = elem.style.getPropertyCSSValue("fill"); | |
var tb = document.getElementById(id+suff); | |
tb.appendChild(document.createTextNode(fill.getCssText())); | |
return fill; | |
} | |
function test() { | |
var fill, r, g, b; | |
fill = showFill("r1", ".b"); | |
fill.setCssText("gold"); | |
showFill("r1", ".a"); | |
fill = showFill("r2", ".b"); | |
fill.setCssText("gold"); | |
showFill("r2", ".a"); | |
fill = showFill("r3", ".b"); | |
r = fill.getRed(); r.setCssText("50"); | |
showFill("r3", ".a"); | |
fill = showFill("r4", ".b"); | |
r = fill.getRed(); r.setFloatValue(UNIT_NUMBER, 50); | |
showFill("r4", ".a"); | |
fill = showFill("r5", ".b"); | |
r = fill.getRed(); r.setFloatValue(UNIT_PERCENT, 50); | |
showFill("r5", ".a"); | |
fill = showFill("r6", ".b"); | |
g = fill.getGreen(); g.setCssText("50"); | |
showFill("r6", ".a"); | |
fill = showFill("r7", ".b"); | |
g = fill.getGreen(); g.setFloatValue(UNIT_NUMBER, 50); | |
showFill("r7", ".a"); | |
fill = showFill("r8", ".b"); | |
g = fill.getGreen(); g.setFloatValue(UNIT_PERCENT, 50); | |
showFill("r8", ".a"); | |
fill = showFill("r9", ".b"); | |
b = fill.getBlue(); b.setCssText("50"); | |
showFill("r9", ".a"); | |
fill = showFill("r10", ".b"); | |
b = fill.getBlue(); b.setFloatValue(UNIT_NUMBER, 50); | |
showFill("r10", ".a"); | |
fill = showFill("r11", ".b"); | |
b = fill.getBlue(); b.setFloatValue(UNIT_PERCENT, 50); | |
showFill("r11", ".a"); | |
} | |
]]></script> | |
<g id="test-content"> | |
<g transform="translate(10, 50)"> | |
<rect id="r1" x="0" y="0" width="75" height="40" | |
style="fill:crimson"/> | |
<text x="80" y="15">Before: <tspan id="r1.b"/></text> | |
<text x="80" y="35">After: <tspan id="r1.a"/></text> | |
</g> | |
<g transform="translate(10, 100)"> | |
<rect id="r2" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 0)"/> | |
<text x="80" y="15">Before: <tspan id="r2.b"/></text> | |
<text x="80" y="35">After: <tspan id="r2.a"/></text> | |
</g> | |
<g transform="translate(10, 150)"> | |
<rect id="r3" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r3.b"/></text> | |
<text x="80" y="35">After: <tspan id="r3.a"/></text> | |
</g> | |
<g transform="translate(10, 200)"> | |
<rect id="r4" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r4.b"/></text> | |
<text x="80" y="35">After: <tspan id="r4.a"/></text> | |
</g> | |
<g transform="translate(10, 250)"> | |
<rect id="r5" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r5.b"/></text> | |
<text x="80" y="35">After: <tspan id="r5.a"/></text> | |
</g> | |
<g transform="translate(10, 300)"> | |
<rect id="r6" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r6.b"/></text> | |
<text x="80" y="35">After: <tspan id="r6.a"/></text> | |
</g> | |
<g transform="translate(10, 350)"> | |
<rect id="r7" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r7.b"/></text> | |
<text x="80" y="35">After: <tspan id="r7.a"/></text> | |
</g> | |
<g transform="translate(10, 400)"> | |
<rect id="r8" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r8.b"/></text> | |
<text x="80" y="35">After: <tspan id="r8.a"/></text> | |
</g> | |
<g transform="translate(225, 50)"> | |
<rect id="r9" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r9.b"/></text> | |
<text x="80" y="35">After: <tspan id="r9.a"/></text> | |
</g> | |
<g transform="translate(225, 100)"> | |
<rect id="r10" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r10.b"/></text> | |
<text x="80" y="35">After: <tspan id="r10.a"/></text> | |
</g> | |
<g transform="translate(225, 150)"> | |
<rect id="r11" x="0" y="0" width="75" height="40" | |
style="fill:rgb(255, 0, 128)"/> | |
<text x="80" y="15">Before: <tspan id="r11.b"/></text> | |
<text x="80" y="35">After: <tspan id="r11.a"/></text> | |
</g> | |
</g> | |
</svg> |