svg-pointer-events-bbox.html (4904B)
1 <!DOCTYPE html> 2 <title>pointer-events: bounding-box</title> 3 <link rel="help" href="https://svgwg.org/svg2-draft/interact.html#PointerEventsProp"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style type="text/css"> 8 #svgRoot { 9 margin: 0px; 10 padding: 0px; 11 position: absolute; 12 top: 0px; 13 left: 0px; 14 font: 10px/1 Ahem; 15 } 16 17 .test { fill: blue; pointer-events: bounding-box; } 18 .test:hover { fill: green; visibility: visible; } 19 </style> 20 <svg id="svgRoot" width="800px" height="360px" viewBox="0 0 800 360" opacity="0"> 21 <g class="test" id="test1" transform="rotate(15)"> 22 <circle id="circle1" cx="50" cy="50" r="10"/> 23 <circle cx="150" cy="150" r="10"/> 24 </g> 25 <circle class="test" id="circle2" cx="400" cy="150" r="50" visibility="hidden"/> 26 <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> 27 <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> 28 <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> 29 <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>" 30 width="50" height="30" visibility="hidden" transform="translate(0,200)"/> 31 </svg> 32 <script> 33 const group1 = document.getElementById("test1"); 34 const circle1 = document.getElementById("circle1"); 35 const circle2 = document.getElementById("circle2"); 36 const text1 = document.getElementById("text1"); 37 const tspan1 = document.getElementById("tspan1"); 38 const text2 = document.getElementById("text2"); 39 const tspan2 = document.getElementById("tspan2"); 40 const text3 = document.getElementById("text3"); 41 const tspan3 = document.getElementById("tspan3"); 42 const image1 = document.getElementById("image1"); 43 44 const pointsOnCircle1 = [ 45 {x: 36, y: 60}, 46 {x: 42, y: 67} 47 ]; 48 49 const pointsNotOnCircle1 = [ 50 {x: 50, y: 50}, 51 {x: 50, y: 55} 52 ]; 53 54 const pointsInsideBBoxOfCircle1 = [ 55 {x: 100, y: 100}, 56 {x: 137, y: 84}, 57 {x: 51, y: 156}, 58 {x:70, y:120} 59 ]; 60 61 const pointsOnCircle2 = [ 62 {x: 400, y: 150}, 63 {x: 432, y: 182}, 64 {x: 361, y: 122} 65 ]; 66 67 const pointsInsideBBoxOfCircle2 = [ 68 {x: 438, y: 103}, 69 {x: 450, y: 200} 70 ]; 71 72 const pointsOnText1 = [ 73 {x: 134, y: 16} 74 ]; 75 76 const pointsOnTspan1 = [ 77 {x: 579, y: 46} 78 ]; 79 80 const pointsNotOnText1 = [ 81 {x: 395, y: 73}, 82 {x: 74, y: 5} 83 ]; 84 85 const pointsInsideBBoxOfText1 = [ 86 {x: 435, y: 32}, 87 {x: 115, y: 46} 88 ]; 89 90 const pointsOnText2 = [ 91 {x: 178, y: 146} 92 ]; 93 94 const pointsOnTspan2 = [ 95 {x: 568, y: 283} 96 ]; 97 98 const pointsNotOnText2 = [ 99 {x: 319, y: 161}, 100 {x: 179, y: 131} 101 ]; 102 103 const pointsInsideBBoxOfText2 = [ 104 {x: 295, y: 214}, 105 {x: 444, y: 222} 106 ]; 107 108 const pointsOnText3 = [ 109 {x: 198, y: 291}, 110 {x: 286, y: 301} 111 ]; 112 113 const pointsNotOnText3 = [ 114 {x: 302, y: 337}, 115 {x: 348, y: 335} 116 ]; 117 118 const pointsOnImage1 = [ 119 {x: 19, y: 215}, 120 {x: 45, y: 225} 121 ]; 122 123 function hitTest(point, element, shouldContain, optionalLabel) { 124 const label = optionalLabel || element.id; 125 test(() => { 126 const contain = element.contains(document.elementFromPoint(point.x, point.y)); 127 if (shouldContain) 128 assert_true(contain); 129 else 130 assert_false(contain); 131 }, `${label} ${shouldContain ? 'contains' : 'does not contain'} point at (${point.x}, ${point.y})`); 132 } 133 134 setup({ explicit_done: true }); 135 136 document.fonts.ready.then(() => { 137 pointsOnCircle1.forEach(point => hitTest(point, circle1, true)); 138 pointsNotOnCircle1.forEach(point => hitTest(point, circle1, false)); 139 pointsInsideBBoxOfCircle1.forEach(point => hitTest(point, group1, true, 'group1')); 140 141 pointsOnCircle2.forEach(point => hitTest(point, circle2, true)); 142 pointsInsideBBoxOfCircle2.forEach(point => hitTest(point, circle2, true, 'bbox of circle2')); 143 144 pointsOnText1.forEach(point => hitTest(point, text1, true)); 145 pointsOnTspan1.forEach(point => hitTest(point, tspan1, true)); 146 pointsNotOnText1.forEach(point => hitTest(point, text1, false)); 147 pointsInsideBBoxOfText1.forEach(point => hitTest(point, text1, true, 'bbox of text1')); 148 149 pointsOnText2.forEach(point => hitTest(point, text2, true)); 150 pointsOnTspan2.forEach(point => hitTest(point, tspan2, true)); 151 pointsNotOnText2.forEach(point => hitTest(point, text2, false)); 152 pointsInsideBBoxOfText2.forEach(point => hitTest(point, text2, true, 'bbox of text2')); 153 154 pointsOnText3.forEach(point => hitTest(point, text3, true)); 155 pointsNotOnText3.forEach(point => hitTest(point, text3, false)); 156 157 pointsOnImage1.forEach(point => hitTest(point, image1, true)); 158 159 done(); 160 }); 161 </script>