LayoutTests/svg/hittest/update-ellipse.html - Issue 745383007: Fix an issue where hit detection could fail on rect and ellipse shapes

Side by Side Diff: LayoutTests/svg/hittest/update-ellipse.html

Issue 745383007: Fix an issue where hit detection could fail on rect and ellipse shapes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Address test failures Created 6 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <body onload="onPageLoad()">

	4 Regression test for <a href="http://crbug.com/436214">http://crbug.com/436214</a >. This tests updating SVG <circle> and <ellipse> elements having va rious stroke styles. If this test passes, you will see "PASS" below.

	5 <p id="result">WAITING - click within each of the elliptical areas for results</ p>

	6 <svg id="svg" width="800" height="500" version="1.1">

	7 <rect fill="none" stroke="black" x="0.5" y="0.5" width="799" height="499"/>

	8

	9

	10

	11 <circle pointer-events="none" stroke-width="10px" stroke="#888" stroke-opaci ty="0.2" fill="none" cx="380" cy="100" r="20"/>

	12 <ellipse pointer-events="none" stroke-width="20px" stroke="#00a0f0" stroke-d asharray="30, 10" stroke-opacity="0.2" fill="none" cx="130" cy="110" rx="100" ry ="50"/>

	13 <ellipse pointer-events="none" stroke-width="30px" stroke="#9000f0" stroke-l inejoin="bevel" stroke-opacity="0.2" fill="none" cx="150" cy="400" rx="70" ry="5 0"/>

	14 <ellipse pointer-events="none" stroke-width="20px" stroke="#0000f0" stroke-o pacity="0.2" fill="none" cx="400" cy="370" rx="40" ry="70"/>

	15

	16 <circle id="ell0" cursor="move" stroke-width="10px" stroke="#888" stroke-lin ecap="square" fill="none" cx="380" cy="100" r="20"/>

	17 <ellipse id="ell1" cursor="move" stroke-width="20px" stroke="#00a0f0" stroke -dasharray="30, 10" fill="none" cx="130" cy="110" rx="100" ry="50"/>

	18 <ellipse id="ell2" cursor="move" stroke-width="30px" stroke="#9000f0" stroke -linejoin="bevel" fill="none" cx="150" cy="400" rx="70" ry="50"/>

	19 <ellipse id="ell3" cursor="move" stroke-width="20px" stroke="#0000f0" stroke -linecap="round" fill="none" cx="400" cy="370" rx="40" ry="70"/>

	20

	21

	22

	23 <ellipse pointer-events="none" stroke-width="20px" stroke="#0c0" stroke-opac ity="0.2" fill="none" cx="625" cy="100" rx="80" ry="30"/>

	24 <ellipse pointer-events="none" stroke-width="20px" stroke="#090" stroke-opac ity="0.2" fill="none" cx="625" cy="200" rx="80" ry="30"/>

	25 <ellipse pointer-events="none" stroke-width="20px" stroke="#060" stroke-opac ity="0.2" fill="none" cx="625" cy="300" rx="80" ry="30"/>

	26 <ellipse pointer-events="none" stroke-width="20px" stroke="#030" stroke-opac ity="0.2" fill="none" cx="625" cy="400" rx="80" ry="30"/>

	27

	28 <ellipse id="ell10" cursor="move" stroke-width="20px" stroke="#0c0" fill="no ne" cx="625" cy="100" rx="80" ry="30"/>

	29 <ellipse id="ell11" cursor="move" stroke-width="20px" stroke="#090" fill="no ne" cx="625" cy="200" rx="80" ry="30"/>

	30 <ellipse id="ell12" cursor="move" stroke-width="20px" stroke="#060" fill="no ne" cx="625" cy="300" rx="80" ry="30"/>

	31 <ellipse id="ell13" cursor="move" stroke-width="20px" stroke="#030" fill="no ne" cx="625" cy="400" rx="80" ry="30"/>

	32 </svg>

	33 <script type="text/javascript">

	34 if (window.testRunner) {

	35 testRunner.dumpAsText();

	36 testRunner.waitUntilDone();

	37 }

	38

	39 function withinEllipse(x, y, cx, cy, rx, ry) {

	40 var t1 = (x - cx) / rx,

	41 t2 = (y - cy) / ry;

	42 return t1 * t1 + t2 * t2 <= 1;

	43 }

	44

	45 var result = document.getElementById("result"),

	46 svg = document.getElementById("svg"),

	47 ell0 = document.getElementById("ell0"),

	48 ell1 = document.getElementById("ell1"),

	49 ell2 = document.getElementById("ell2"),

	50 ell3 = document.getElementById("ell3"),

	51 ell10 = document.getElementById("ell10"),

	52 ell11 = document.getElementById("ell11"),

	53 ell12 = document.getElementById("ell12"),

	54 ell13 = document.getElementById("ell13");

	55 function onPageLoad() {

	56 var activeAreas = [{

	57 ellipse: ell0,

	58 click: function () {

	59 this.ellipse.setAttribute("r", "50");

	60 }

	61 }, {

	62 ellipse: ell1,

	63 click: function () {

	64 this.ellipse.setAttribute("cx", "170");

	65 }

	66 }, {

	67 ellipse: ell2,

	68 click: function () {

	69 this.ellipse.setAttribute("cy", "350");

	70 }

	71 }, {

	72 ellipse: ell3,

	73 click: function () {

	74 this.ellipse.setAttribute("cx", "390");

	75 this.ellipse.setAttribute("cy", "340");

	76 }

	77 }, {

	78 ellipse: ell10,

	79 click: function () {

	80 this.ellipse.setAttribute("stroke-dasharray", "30, 10");

	81 }

	82 }, {

	83 ellipse: ell11,

	84 click: function () {

	85 this.ellipse.setAttribute("cx", "655");

	86 this.ellipse.setAttribute("stroke-miterlimit", "0");

	87 }

	88 }, {

	89 ellipse: ell12,

	90 click: function () {

	91 this.ellipse.setAttribute("stroke-linejoin", "bevel");

	92 this.ellipse.setAttribute("cx", "655"); // intentionally swapped to test whether setting 'cx' after changing the stroke makes a difference

	93 }

	94 }, {

	95 ellipse: ell13,

	96 click: function () {

	97 this.ellipse.setAttribute("cx", "655");

	98 this.ellipse.setAttribute("stroke-linecap", "square");

	99 }

	100 }];

	101

	102 for (var i = 0; i < activeAreas.length; ++i) {

	103 var aa = activeAreas[i];

	104 aa.cx = +aa.ellipse.getAttribute("cx");

	105 aa.cy = +aa.ellipse.getAttribute("cy");

	106 if (aa.ellipse.localName == "circle") {

	107 aa.rx = aa.ry = +aa.ellipse.getAttribute("r");

	108 } else {

	109 aa.rx = +aa.ellipse.getAttribute("rx");

	110 aa.ry = +aa.ellipse.getAttribute("ry");

	111 }

	112 }

	113

	114 var bcr = svg.getBoundingClientRect(),

	115 x0 = bcr.left << 0,

	116 y0 = bcr.top << 0;

	117

	118 requestAnimationFrame(function () {

	119 document.addEventListener("mousedown", function onMouseDown(event) {

	120 var x = event.clientX - x0,

	121 y = event.clientY - y0;

	122 for (var i = 0; i < activeAreas.length; ++i) {

	123 var aa = activeAreas[i];

	124 if (withinEllipse(x, y, aa.cx, aa.cy, aa.rx, aa.ry)) {

	125 aa.click();

	126 activeAreas.splice(i, 1);

	127 break;

	128 }

	129 }

	130

	131 if (activeAreas.length == 0) {

	132 document.removeEventListener("mousedown", onMouseDown, false);

	133

	134 result.textContent = "Running tests...";

	135

	136 var tests = [

	137 { x: 383, y: 120, expectedElem: svg },

	138 { x: 429, y: 103, expectedElem: ell0 },

	139

	140 { x: 225, y: 116, expectedElem: svg },

	141 { x: 263, y: 87, expectedElem: ell1 },

	142

	143 { x: 119, y: 355, expectedElem: svg },

	144 { x: 150, y: 455, expectedElem: svg },

	145 { x: 223, y: 392, expectedElem: svg },

	146 { x: 201, y: 309, expectedElem: ell2 },

	147

	148 { x: 364, y: 345, expectedElem: svg },

	149 { x: 402, y: 269, expectedElem: ell3 },

	150

	151 { x: 549, y: 88, expectedElem: svg },

	152 { x: 662, y: 127, expectedElem: ell10 },

	153

	154 { x: 705, y: 202, expectedElem: svg },

	155 { x: 727, y: 184, expectedElem: ell11 },

	156

	157 { x: 705, y: 302, expectedElem: svg },

	158 { x: 727, y: 284, expectedElem: ell12 },

	159

	160 { x: 705, y: 402, expectedElem: svg },

	161 { x: 727, y: 384, expectedElem: ell13 }

	162 ];

	163

	164 for (var i = 0; i < tests.length; ++i) {

	165 var test = tests[i],

	166 elem = document.elementFromPoint(x0 + test.x, y0 + test. y),

	167 success;

	168 if (elem !== test.expectedElem) {

	169 success = false;

	170 result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";

	171 } else {

	172 success = true;

	173 }

	174

	175 // Draw a dot and a label at the test point (helps with iden tification).

	176 var dot = document.createElementNS("http://www.w3.org/2000/s vg", "circle");

	177 dot.setAttribute("pointer-events", "none");

	178 dot.setAttribute("cx", test.x);

	179 dot.setAttribute("cy", test.y);

	180 dot.setAttribute("r", "2");

	181 if (!success) dot.setAttribute("fill", "red");

	182 svg.appendChild(dot);

	183 var label = document.createElementNS("http://www.w3.org/2000 /svg", "text");

	184 label.setAttribute("pointer-events", "none");

	185 label.setAttribute("x", test.x + 4);

	186 label.setAttribute("y", test.y);

	187 label.textContent = "(" + test.x + ", " + test.y + ")";

	188 if (!success) label.setAttribute("fill", "red");

	189 svg.appendChild(label);

	190 }

	191

	192 if (result.textContent == "Running tests...")

	193 result.textContent = "PASS";

	194

	195 if (window.testRunner)

	196 testRunner.notifyDone();

	197 }

	198 }, false);

	199

	200 if (window.eventSender) {

	201 // The bug would only occur if the shape attributes were modified

	202 // within a mouse event handler when the mouse cursor was within

	203 // the shape.

	204 activeAreas.slice(0).map(function (aa, i, activeAreas) {

	205 eventSender.mouseMoveTo((x0 + aa.cx) << 0, (y0 + aa.cy) << 0);

	206 eventSender.mouseDown();

	207 eventSender.mouseUp();

	208 });

	209 }

	210 });

	211 }

	212 </script>

	213 </body>

	214 </html>

OLD	NEW

« no previous file with comments | « LayoutTests/svg/hittest/rect-miterlimit-expected.txt ('k') | LayoutTests/svg/hittest/update-ellipse-expected.txt » ('j') | no next file with comments »