LayoutTests/svg/hittest/pointer-events-all2.html - Issue 1048043002: Fix pointer-events:all when stroke="none"

Side by Side Diff: LayoutTests/svg/hittest/pointer-events-all2.html

Issue 1048043002: Fix pointer-events:all when stroke="none" (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Rebase Created 5 years, 8 months 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 Regression test for <a href="http://crbug.com/350338">http://crbug.com/350338</a >. This tests pointer-events:all on various shapes to make sure stroke:none and fill:none does not affect event processing. If this test passes, you will see "P ASS" below.

	3 <p id="result">Running test...</p>

	4 <style>

	5 body {

	6 height: 1000px;

	7 }

	8 .testShape {

	9 pointer-events: all;

	10 }

	11 </style>

	12 <svg id="svg" width="690" height="200" version="1.1">

	13 <!-- stroke:none & fill:none -->

	14 <rect id="rect3" class="testShape" x="20" y="30" width="60" height="40" stro ke="none" stroke-width="10" fill="none"/>

	15 <ellipse id="ellipse3" class="testShape" cx="150" cy="50" rx="20" ry="35" tr ansform="rotate(20 150 50)" stroke="none" stroke-width="10" fill="none"/>

	16 <line id="line3" class="testShape" x1="220" y1="20" x2="280" y2="80" stroke= "none" stroke-width="10" fill="none"/>

	17 <polyline id="polyline3" class="testShape" points="320,20 380,40 350,60 380, 80 310,80" stroke="none" stroke-width="10" fill="none"/>

	18 <polygon id="polygon3" class="testShape" points="430,30 440,60 460,80 490,30 460,20" stroke="none" stroke-width="10" fill="none"/>

	19 <path id="path3" class="testShape" d="M610,20 a100 100 0 0 0 -70 70 a100 100 0 0 0 70 -70 z" stroke="none" stroke-width="10" fill="none"/>

	20

	21 <use id="useRect3" xlink:href="#rect3" class="testShape" y="100"/>

	22 <use id="useEllipse3" xlink:href="#ellipse3" class="testShape" y="100"/>

	23 <use id="useLine3" xlink:href="#line3" class="testShape" y="100"/>

	24 <use id="usePolyline3" xlink:href="#polyline3" class="testShape" y="100"/>

	25 <use id="usePolygon3" xlink:href="#polygon3" class="testShape" y="100"/>

	26 <use id="usePath3" xlink:href="#path3" class="testShape" y="100"/>

	27 </svg>

	28 <script type="text/javascript">

	29 if (window.testRunner) {

	30 testRunner.dumpAsText();

	31 testRunner.waitUntilDone();

	32 }

	33

	34 var svg = document.getElementById("svg");

	35 window.onload = function () {

	36 var tests = [

	37 { x: 16, y: 36, expectedElemId: "rect3" },

	38 { x: 54, y: 58, expectedElemId: "rect3" },

	39 { x: 28, y: 77, expectedElemId: "svg" },

	40

	41 { x: 139, y: 20, expectedElemId: "svg" },

	42 { x: 129, y: 41, expectedElemId: "ellipse3" },

	43 { x: 149, y: 55, expectedElemId: "ellipse3" },

	44 { x: 166, y: 70, expectedElemId: "ellipse3" },

	45 { x: 128, y: 82, expectedElemId: "svg" },

	46

	47 { x: 219, y: 19, expectedElemId: "svg" },

	48 { x: 242, y: 40, expectedElemId: "line3" },

	49 { x: 253, y: 64, expectedElemId: "svg" },

	50

	51 { x: 318, y: 84, expectedElemId: "polyline3" },

	52 { x: 323, y: 47, expectedElemId: "polyline3" },

	53 { x: 324, y: 18, expectedElemId: "polyline3" },

	54 { x: 375, y: 64, expectedElemId: "svg" },

	55

	56 { x: 426, y: 28, expectedElemId: "polygon3" },

	57 { x: 455, y: 44, expectedElemId: "polygon3" },

	58 { x: 445, y: 71, expectedElemId: "polygon3" },

	59 { x: 461, y: 85, expectedElemId: "polygon3" },

	60 { x: 497, y: 26, expectedElemId: "svg" },

	61

	62 { x: 536, y: 95, expectedElemId: "path3" },

	63 { x: 560, y: 70, expectedElemId: "path3" },

	64 { x: 555, y: 54, expectedElemId: "path3" },

	65 { x: 595, y: 38, expectedElemId: "path3" },

	66 { x: 614, y: 16, expectedElemId: "path3" },

	67 { x: 569, y: 33, expectedElemId: "svg" }

	68 ];

	69

	70 // Copy all of the tests for the <use> elements.

	71 var elemIdMap = {

	72 "rect3": "useRect3",

	73 "ellipse3": "useEllipse3",

	74 "line3": "useLine3",

	75 "polyline3": "usePolyline3",

	76 "polygon3": "usePolygon3",

	77 "path3": "usePath3"

	78 };

	79 tests.push.apply(tests, tests.map(function (test, i, tests) {

	80 return {

	81 x: test.x,

	82 y: test.y + 100,

	83 expectedElemId: elemIdMap[test.expectedElemId] \|\| test.expectedElemI d

	84 };

	85 }));

	86

	87 var bcr = svg.getBoundingClientRect(),

	88 x0 = bcr.left << 0,

	89 y0 = bcr.top << 0;

	90

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

	92 var test = tests[i],

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

	94 expectedElem = document.getElementById(test.expectedElemId),

	95 success;

	96 if (elem !== expectedElem) {

	97 success = false;

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

	99 } else {

	100 success = true;

	101 }

	102

	103 // Draw a dot and a label at the test point (helps with identification).

	104 markPoint(test.x, test.y, success);

	105 }

	106

	107 if (result.textContent == "Running test...")

	108 result.textContent = "PASS";

	109

	110 if (window.testRunner)

	111 testRunner.notifyDone();

	112 };

	113

	114 function markPoint(testX, testY, success) {

	115 var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");

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

	117 dot.setAttribute("cx", testX);

	118 dot.setAttribute("cy", testY);

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

	120 if (success)

	121 dot.setAttribute("fill", "#0c0");

	122 else

	123 dot.setAttribute("fill", "red");

	124 svg.appendChild(dot);

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

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

	127 label.setAttribute("x", testX + 4);

	128 label.setAttribute("y", testY);

	129 label.textContent = "(" + testX + ", " + testY + ")";

	130 if (success)

	131 label.setAttribute("fill", "#0c0");

	132 else

	133 label.setAttribute("fill", "red");

	134 svg.appendChild(label);

	135 }

	136 </script>

OLD	NEW