Google Git
Sign in
apache / xmlgraphics-batik / refs/heads/webapi / . / samples / tests / spec / scripting / intersectionList.svg
blob: 79e430e2693ff20a9f697013a04f42298f5e3ab8 [file] [log] [blame]
<?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.
-->
<!-- ====================================================================== -->
<!-- Testing the getIntersectionList interface on the svg:svg element. -->
<!-- -->
<!-- @author deweese@apache.org -->
<!-- @version $Id$ -->
<!-- ====================================================================== -->
<?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?>
<svg id="body" width="450" height="500" viewBox="0 0 450 500"
onload="testIntersection()"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<title>Test of getIntersectionList interface</title>
<text x="50%" y="45" class="title">Test of getIntersectionList interface</text>
<script type="text/ecmascript"><![CDATA[
var svgns = "http://www.w3.org/2000/svg";
function doCheck(svg, rect, end, attr, val) {
var lst = svg.getIntersectionList(rect, end);
var i=0, sz = lst.getLength();
while (i < sz) {
var e = lst.item(i);
e.setAttribute(attr, val);
i++;
}
}
function setRect(rect, x, y, w, h) {
rect.x = x;
rect.y = y;
rect.width = w;
rect.height = h;
}
function makeRect(parent, rect, stroke) {
var outline = document.createElementNS(svgns, "rect");
outline.setAttribute("x", "" + rect.x);
outline.setAttribute("y", "" + rect.y);
outline.setAttribute("width", "" + rect.width);
outline.setAttribute("height", "" + rect.height);
outline.setAttribute("fill", "none");
outline.setAttribute("stroke", stroke);
parent.appendChild(outline);
}
function checkIntersection(svg, rect, elem, attr, val1, val2) {
if (svg.checkIntersection(elem, rect))
elem.setAttribute(attr, val1);
else
elem.setAttribute(attr, val2);
}
function testIntersection() {
var root = document.getRootElement();
var rect = root.createSVGRect();
setRect(rect, 50, 95, 50, 50);
doCheck(root, rect, null, "fill", "blue");
makeRect(root, rect, "blue");
setRect(rect, 45, 90, 60, 60);
var middle = root.getElementById("tb1-middle");
doCheck(root, rect, middle, "stroke", "red");
makeRect(root, rect, "red");
var tb2 = root.getElementById("testblock2");
setRect(rect, 45, 60, 450, 20);
doCheck(tb2, rect, null, "fill", "green");
makeRect(tb2, rect, "green");
setRect(rect, 187.5, 139, 224, 10);
doCheck(root, rect, null, "stroke", "pink");
makeRect(root, rect, "pink");
setRect(rect, 82.35, 267.15, 35.25, 35.25);
doCheck(root, rect, null, "stroke", "lightgreen");
setRect(rect, 90.65, 275.25, 19, 19);
doCheck(root, rect, null, "fill", "purple");
makeRect(root, rect, "purple");
setRect(rect, 82.35, 267.15, 35.25, 35.25);
makeRect(root, rect, "lightgreen");
var tb5 = root.getElementById("testblock5");
var tb5_m = root.getElementById("tb5-middle");
setRect(rect, 45, 160, 150, 20);
doCheck(tb5, rect, tb5_m, "fill", "crimson");
makeRect(tb5, rect, "crimson");
var ts = root.getElementById("ts");
setRect(rect, 235, 200, 2, 50);
doCheck(root, rect, ts, "fill", "orange");
doCheck(root, rect, null, "text-decoration", "underline");
makeRect(root, rect, "orange");
setRect(rect, 255, 200, 2, 50);
doCheck(root, rect, ts, "stroke", "crimson");
makeRect(root, rect, "crimson");
var tb6 = root.getElementById("testblock6");
var tb6_m = root.getElementById("tb6-middle");
var tb6_11 = root.getElementById("tb6-11");
var tb6_21 = root.getElementById("tb6-21");
var tb6_31 = root.getElementById("tb6-31");
var tb6_41 = root.getElementById("tb6-41");
var tb6_12 = root.getElementById("tb6-12");
var tb6_22 = root.getElementById("tb6-22");
var tb6_32 = root.getElementById("tb6-32");
var tb6_42 = root.getElementById("tb6-42");
var tb6_13 = root.getElementById("tb6-13");
var tb6_23 = root.getElementById("tb6-23");
var tb6_43 = root.getElementById("tb6-43");
var tb6_14 = root.getElementById("tb6-14");
var tb6_24 = root.getElementById("tb6-24");
var tb6_34 = root.getElementById("tb6-34");
var tb6_44 = root.getElementById("tb6-44");
setRect(rect, 190, 300, 70, 70);
checkIntersection(root, rect, tb6_11, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_21, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_31, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_41, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_12, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_22, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_32, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_42, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_13, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_23, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_m, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_43, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_14, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_24, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_34, "fill", "blue", "crimson");
checkIntersection(root, rect, tb6_44, "fill", "blue", "crimson");
makeRect(root, rect, "blue");
}
]]></script>
<g id="test-content" >
<svg id="testblock1" overflow="visible"
x="15" y="60" width="120" height="120" viewBox="-.5 -.5 241 241"
style="fill:yellow; stroke:black; stroke-width:2; fill-opacity:.5;">
<path d="M 10 10 h 220 v 220 h -220 z m 20 20 v 180 h 180 v -180 z"/>
<rect x="0" y="0" width="40" height="40"/>
<rect x="50" y="0" width="40" height="40"/>
<rect x="100" y="0" width="40" height="40"/>
<rect x="150" y="0" width="40" height="40"/>
<rect x="200" y="0" width="40" height="40"/>
<rect x="0" y="50" width="40" height="40"/>
<rect x="50" y="50" width="40" height="40"/>
<rect x="100" y="50" width="40" height="40"/>
<rect x="150" y="50" width="40" height="40"/>
<rect x="200" y="50" width="40" height="40"/>
<rect x="0" y="100" width="40" height="40"/>
<rect x="50" y="100" width="40" height="40"/>
<rect id="tb1-middle" x="100" y="100" width="40" height="40"/>
<rect x="150" y="100" width="40" height="40"/>
<rect x="200" y="100" width="40" height="40"/>
<rect x="0" y="150" width="40" height="40"/>
<rect x="50" y="150" width="40" height="40"/>
<rect x="100" y="150" width="40" height="40"/>
<rect x="150" y="150" width="40" height="40"/>
<rect x="200" y="150" width="40" height="40"/>
<rect x="0" y="200" width="40" height="40"/>
<rect x="50" y="200" width="40" height="40"/>
<rect x="100" y="200" width="40" height="40"/>
<rect x="150" y="200" width="40" height="40"/>
<rect x="200" y="200" width="40" height="40"/>
</svg>
<svg id="testblock2" overflow="visible"
x="165" y="60" width="120" height="120" viewBox="-.5 -.5 241 241"
style="fill:yellow; stroke:black; stroke-width:2; fill-opacity:.5;">
<path d="M 10 10 h 220 v 220 h -220 z m 20 20 v 180 h 180 v -180 z"/>
<rect x="0" y="0" width="40" height="40"/>
<rect x="50" y="0" width="40" height="40"/>
<rect x="100" y="0" width="40" height="40"/>
<rect x="150" y="0" width="40" height="40"/>
<rect x="200" y="0" width="40" height="40"/>
<rect x="0" y="50" width="40" height="40"/>
<rect x="50" y="50" width="40" height="40"/>
<rect x="100" y="50" width="40" height="40"/>
<rect x="150" y="50" width="40" height="40"/>
<rect x="200" y="50" width="40" height="40"/>
<rect x="0" y="100" width="40" height="40"/>
<rect x="50" y="100" width="40" height="40"/>
<rect id="tb2-middle" x="100" y="100" width="40" height="40"/>
<rect x="150" y="100" width="40" height="40"/>
<rect x="200" y="100" width="40" height="40"/>
<rect x="0" y="150" width="40" height="40"/>
<rect x="50" y="150" width="40" height="40"/>
<rect x="100" y="150" width="40" height="40"/>
<rect x="150" y="150" width="40" height="40"/>
<rect x="200" y="150" width="40" height="40"/>
<rect x="0" y="200" width="40" height="40"/>
<rect x="50" y="200" width="40" height="40"/>
<rect x="100" y="200" width="40" height="40"/>
<rect x="150" y="200" width="40" height="40"/>
<rect x="200" y="200" width="40" height="40"/>
</svg>
<svg id="testblock3" overflow="visible"
x="315" y="60" width="120" height="120" viewBox="-.5 -.5 241 241"
style="fill:yellow; stroke:black; stroke-width:2; fill-opacity:.5;">
<path d="M 10 10 h 220 v 220 h -220 z m 20 20 v 180 h 180 v -180 z"/>
<rect x="0" y="0" width="40" height="40"/>
<rect x="50" y="0" width="40" height="40"/>
<rect x="100" y="0" width="40" height="40"/>
<rect x="150" y="0" width="40" height="40"/>
<rect x="200" y="0" width="40" height="40"/>
<rect x="0" y="50" width="40" height="40"/>
<rect x="50" y="50" width="40" height="40"/>
<rect x="100" y="50" width="40" height="40"/>
<rect x="150" y="50" width="40" height="40"/>
<rect x="200" y="50" width="40" height="40"/>
<rect x="0" y="100" width="40" height="40"/>
<rect x="50" y="100" width="40" height="40"/>
<rect id="tb3-middle" x="100" y="100" width="40" height="40"/>
<rect x="150" y="100" width="40" height="40"/>
<rect x="200" y="100" width="40" height="40"/>
<rect x="0" y="150" width="40" height="40"/>
<rect x="50" y="150" width="40" height="40"/>
<rect x="100" y="150" width="40" height="40"/>
<rect x="150" y="150" width="40" height="40"/>
<rect x="200" y="150" width="40" height="40"/>
<rect x="0" y="200" width="40" height="40"/>
<rect x="50" y="200" width="40" height="40"/>
<rect x="100" y="200" width="40" height="40"/>
<rect x="150" y="200" width="40" height="40"/>
<rect x="200" y="200" width="40" height="40"/>
</svg>
<g transform="translate(100,200) rotate(45)">
<svg id="testblock4" overflow="visible"
width="120" height="120" viewBox="-.5 -.5 241 241"
style="fill:yellow; stroke:black; stroke-width:2; fill-opacity:.5;">
<path d="M 10 10 h 220 v 220 h -220 z m 20 20 v 180 h 180 v -180 z"/>
<rect x="0" y="0" width="40" height="40"/>
<rect x="50" y="0" width="40" height="40"/>
<rect x="100" y="0" width="40" height="40"/>
<rect x="150" y="0" width="40" height="40"/>
<rect x="200" y="0" width="40" height="40"/>
<rect x="0" y="50" width="40" height="40"/>
<rect x="50" y="50" width="40" height="40"/>
<rect x="100" y="50" width="40" height="40"/>
<rect x="150" y="50" width="40" height="40"/>
<rect x="200" y="50" width="40" height="40"/>
<rect x="0" y="100" width="40" height="40"/>
<rect x="50" y="100" width="40" height="40"/>
<g >
<rect id="tb4-middle" x="100" y="100" width="40" height="40"/>
</g>
<rect x="150" y="100" width="40" height="40"/>
<rect x="200" y="100" width="40" height="40"/>
<rect x="0" y="150" width="40" height="40"/>
<rect x="50" y="150" width="40" height="40"/>
<rect x="100" y="150" width="40" height="40"/>
<rect x="150" y="150" width="40" height="40"/>
<rect x="200" y="150" width="40" height="40"/>
<rect x="0" y="200" width="40" height="40"/>
<rect x="50" y="200" width="40" height="40"/>
<rect x="100" y="200" width="40" height="40"/>
<rect x="150" y="200" width="40" height="40"/>
<rect x="200" y="200" width="40" height="40"/>
</svg>
</g>
<g transform="translate(350,200) rotate(45)">
<svg id="testblock5" overflow="visible"
width="120" height="120" viewBox="-.5 -.5 241 241"
style="fill:yellow; stroke:black; stroke-width:2; fill-opacity:.5;">
<path d="M 10 10 h 220 v 220 h -220 z m 20 20 v 180 h 180 v -180 z"/>
<rect x="0" y="0" width="40" height="40"/>
<rect x="50" y="0" width="40" height="40"/>
<rect x="100" y="0" width="40" height="40"/>
<rect x="150" y="0" width="40" height="40"/>
<rect x="200" y="0" width="40" height="40"/>
<rect x="0" y="50" width="40" height="40"/>
<rect x="50" y="50" width="40" height="40"/>
<rect x="100" y="50" width="40" height="40"/>
<rect x="150" y="50" width="40" height="40"/>
<rect x="200" y="50" width="40" height="40"/>
<rect x="0" y="100" width="40" height="40"/>
<rect x="50" y="100" width="40" height="40"/>
<g >
<rect id="tb5-middle" x="100" y="100" width="40" height="40"/>
</g>
<rect x="150" y="100" width="40" height="40"/>
<rect x="200" y="100" width="40" height="40"/>
<rect x="0" y="150" width="40" height="40"/>
<rect x="50" y="150" width="40" height="40"/>
<rect x="100" y="150" width="40" height="40"/>
<rect x="150" y="150" width="40" height="40"/>
<rect x="200" y="150" width="40" height="40"/>
<rect x="0" y="200" width="40" height="40"/>
<rect x="50" y="200" width="40" height="40"/>
<rect x="100" y="200" width="40" height="40"/>
<rect x="150" y="200" width="40" height="40"/>
<rect x="200" y="200" width="40" height="40"/>
</svg>
</g>
<g transform="translate(225,285) rotate(45)">
<svg id="testblock6" overflow="visible"
width="120" height="120" viewBox="-.5 -.5 241 241"
style="fill:yellow; stroke:black; stroke-width:2; fill-opacity:.5;">
<path d="M 10 10 h 220 v 220 h -220 z m 20 20 v 180 h 180 v -180 z"/>
<rect id="tb6-11" x="0" y="0" width="40" height="40"/>
<rect id="tb6-21" x="50" y="0" width="40" height="40"/>
<rect id="tb6-31" x="100" y="0" width="40" height="40"/>
<rect id="tb6-41" x="150" y="0" width="40" height="40"/>
<rect id="tb6-51" x="200" y="0" width="40" height="40"/>
<rect id="tb6-12" x="0" y="50" width="40" height="40"/>
<rect id="tb6-22" x="50" y="50" width="40" height="40"
pointer-events="none"/>
<rect id="tb6-32" x="100" y="50" width="40" height="40"/>
<rect id="tb6-42" x="150" y="50" width="40" height="40"/>
<rect id="tb6-52" x="200" y="50" width="40" height="40"/>
<rect id="tb6-13" x="0" y="100" width="40" height="40"/>
<rect id="tb6-23" x="50" y="100" width="40" height="40"/>
<g >
<rect id="tb6-middle" x="100" y="100" width="40" height="40"/>
</g>
<rect id="tb6-43" x="150" y="100" width="40" height="40"/>
<rect id="tb6-53" x="200" y="100" width="40" height="40"/>
<rect id="tb6-14" x="0" y="150" width="40" height="40"/>
<rect id="tb6-24" x="50" y="150" width="40" height="40"/>
<rect id="tb6-34" x="100" y="150" width="40" height="40"/>
<rect id="tb6-44" x="150" y="150" width="40" height="40"/>
<rect id="tb6-54" x="200" y="150" width="40" height="40"/>
<rect id="tb6-15" x="0" y="200" width="40" height="40"/>
<rect id="tb6-25" x="50" y="200" width="40" height="40"/>
<rect id="tb6-35" x="100" y="200" width="40" height="40"/>
<rect id="tb6-45" x="150" y="200" width="40" height="40"/>
<rect id="tb6-55" x="200" y="200" width="40" height="40"/>
</svg>
</g>
<text x="225" y="220" text-anchor="middle" font-size="15"
>This <tspan id="ts" font-weight="bold">is <tspan font-style="italic">a</tspan> test</tspan>
<tspan x="225" y="240" text-anchor="middle">of text intersection</tspan></text>
</g>
</svg>