| <?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"> |
| |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You 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> |