diff options
Diffstat (limited to 'testing/web-platform/tests/svg/interact/scripted/svg-pointer-events-bbox.html')
-rw-r--r-- | testing/web-platform/tests/svg/interact/scripted/svg-pointer-events-bbox.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/interact/scripted/svg-pointer-events-bbox.html b/testing/web-platform/tests/svg/interact/scripted/svg-pointer-events-bbox.html new file mode 100644 index 0000000000..8db9149c23 --- /dev/null +++ b/testing/web-platform/tests/svg/interact/scripted/svg-pointer-events-bbox.html @@ -0,0 +1,155 @@ +<!DOCTYPE html> +<title>pointer-events: bounding-box</title> +<link rel="help" href="https://svgwg.org/svg2-draft/interact.html#PointerEventsProp"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style type="text/css"> + #svgRoot { + margin: 0px; + padding: 0px; + position: absolute; + top: 0px; + left: 0px; + font: 10px/1 Ahem; + } + + .test { fill: blue; pointer-events: bounding-box; } + .test:hover { fill: green; visibility: visible; } +</style> +<svg id="svgRoot" width="800px" height="360px" viewBox="0 0 800 360" opacity="0"> + <g class="test" id="test1" transform="rotate(15)"> + <circle id="circle1" cx="50" cy="50" r="10"/> + <circle cx="150" cy="150" r="10"/> + </g> + <circle class="test" id="circle2" cx="400" cy="150" r="50" visibility="hidden"/> + <text class="test" id="text1" x="100" y="20">Text should change color when mouse is within <tspan id="tspan1" dy="3em">the bbox.</tspan></text> + <text class="test" id="text2" x="150" y="100" transform="rotate(15)">Text should change color when mouse is within <tspan id="tspan2" dy="3em">the bbox.</tspan></text> + <text class="test" id="text3" x="200" y="280" transform="rotate(5)">Text should end here.<tspan id="tspan3" dy="2em" display="none">invisible</tspan></text> + <image class="test" id="image1" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 30'><rect x='10' y='10' width='20' height='10' fill='blue'/></svg>" + width="50" height="30" visibility="hidden" transform="translate(0,200)"/> +</svg> +<script> +const group1 = document.getElementById("test1"); +const circle1 = document.getElementById("circle1"); +const circle2 = document.getElementById("circle2"); +const text1 = document.getElementById("text1"); +const tspan1 = document.getElementById("tspan1"); +const text2 = document.getElementById("text2"); +const tspan2 = document.getElementById("tspan2"); +const text3 = document.getElementById("text3"); +const tspan3 = document.getElementById("tspan3"); +const image1 = document.getElementById("image1"); + +const pointsOnCircle1 = [ + {x: 36, y: 60}, + {x: 42, y: 67} +]; + +const pointsNotOnCircle1 = [ + {x: 50, y: 50}, + {x: 50, y: 55} +]; + +const pointsInsideBBoxOfCircle1 = [ + {x: 100, y: 100}, + {x: 137, y: 84}, + {x: 51, y: 156}, + {x:70, y:120} +]; + +const pointsOnCircle2 = [ + {x: 400, y: 150}, + {x: 432, y: 182}, + {x: 361, y: 122} +]; + +const pointsInsideBBoxOfCircle2 = [ + {x: 438, y: 103}, + {x: 450, y: 200} +]; + +const pointsOnText1 = [ + {x: 134, y: 16} +]; + +const pointsOnTspan1 = [ + {x: 579, y: 46} +]; + +const pointsNotOnText1 = [ + {x: 395, y: 73}, + {x: 74, y: 5} +]; + +const pointsInsideBBoxOfText1 = [ + {x: 435, y: 32}, + {x: 115, y: 46} +]; + +const pointsOnText2 = [ + {x: 178, y: 146} +]; + +const pointsOnTspan2 = [ + {x: 568, y: 283} +]; + +const pointsNotOnText2 = [ + {x: 319, y: 161}, + {x: 179, y: 131} +]; + +const pointsInsideBBoxOfText2 = [ + {x: 295, y: 214}, + {x: 444, y: 222} +]; + +const pointsOnText3 = [ + {x: 198, y: 291}, + {x: 286, y: 301} +]; + +const pointsNotOnText3 = [ + {x: 302, y: 337}, + {x: 348, y: 335} +]; + +const pointsOnImage1 = [ + {x: 19, y: 215}, + {x: 45, y: 225} +]; + +function hitTest(point, element, shouldContain, optionalLabel) { + const label = optionalLabel || element.id; + test(() => { + const contain = element.contains(document.elementFromPoint(point.x, point.y)); + if (shouldContain) + assert_true(contain); + else + assert_false(contain); + }, `${label} ${shouldContain ? 'contains' : 'does not contain'} point at (${point.x}, ${point.y})`); +} + +pointsOnCircle1.forEach(point => hitTest(point, circle1, true)); +pointsNotOnCircle1.forEach(point => hitTest(point, circle1, false)); +pointsInsideBBoxOfCircle1.forEach(point => hitTest(point, group1, true, 'group1')); + +pointsOnCircle2.forEach(point => hitTest(point, circle2, true)); +pointsInsideBBoxOfCircle2.forEach(point => hitTest(point, circle2, true, 'bbox of circle2')); + +pointsOnText1.forEach(point => hitTest(point, text1, true)); +pointsOnTspan1.forEach(point => hitTest(point, tspan1, true)); +pointsNotOnText1.forEach(point => hitTest(point, text1, false)); +pointsInsideBBoxOfText1.forEach(point => hitTest(point, text1, true, 'bbox of text1')); + +pointsOnText2.forEach(point => hitTest(point, text2, true)); +pointsOnTspan2.forEach(point => hitTest(point, tspan2, true)); +pointsNotOnText2.forEach(point => hitTest(point, text2, false)); +pointsInsideBBoxOfText2.forEach(point => hitTest(point, text2, true, 'bbox of text2')); + +pointsOnText3.forEach(point => hitTest(point, text3, true)); +pointsNotOnText3.forEach(point => hitTest(point, text3, false)); + +pointsOnImage1.forEach(point => hitTest(point, image1, true)); +</script> |