Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(113)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/svg/hittest/pointer-events-all-expected.txt ('k') | LayoutTests/svg/hittest/pointer-events-all2-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/svg/hittest/pointer-events-all2.html
diff --git a/LayoutTests/svg/hittest/pointer-events-all2.html b/LayoutTests/svg/hittest/pointer-events-all2.html
new file mode 100644
index 0000000000000000000000000000000000000000..99b9e2745e7d1ef5df46845539de4e31c1c7bb2f
--- /dev/null
+++ b/LayoutTests/svg/hittest/pointer-events-all2.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+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 "PASS" below.
+<p id="result">Running test...</p>
+<style>
+body {
+ height: 1000px;
+}
+.testShape {
+ pointer-events: all;
+}
+</style>
+<svg id="svg" width="690" height="200" version="1.1">
+ <!-- stroke:none & fill:none -->
+ <rect id="rect3" class="testShape" x="20" y="30" width="60" height="40" stroke="none" stroke-width="10" fill="none"/>
+ <ellipse id="ellipse3" class="testShape" cx="150" cy="50" rx="20" ry="35" transform="rotate(20 150 50)" stroke="none" stroke-width="10" fill="none"/>
+ <line id="line3" class="testShape" x1="220" y1="20" x2="280" y2="80" stroke="none" stroke-width="10" fill="none"/>
+ <polyline id="polyline3" class="testShape" points="320,20 380,40 350,60 380,80 310,80" stroke="none" stroke-width="10" fill="none"/>
+ <polygon id="polygon3" class="testShape" points="430,30 440,60 460,80 490,30 460,20" stroke="none" stroke-width="10" fill="none"/>
+ <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"/>
+
+ <use id="useRect3" xlink:href="#rect3" class="testShape" y="100"/>
+ <use id="useEllipse3" xlink:href="#ellipse3" class="testShape" y="100"/>
+ <use id="useLine3" xlink:href="#line3" class="testShape" y="100"/>
+ <use id="usePolyline3" xlink:href="#polyline3" class="testShape" y="100"/>
+ <use id="usePolygon3" xlink:href="#polygon3" class="testShape" y="100"/>
+ <use id="usePath3" xlink:href="#path3" class="testShape" y="100"/>
+</svg>
+<script type="text/javascript">
+if (window.testRunner) {
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+}
+
+var svg = document.getElementById("svg");
+window.onload = function () {
+ var tests = [
+ { x: 16, y: 36, expectedElemId: "rect3" },
+ { x: 54, y: 58, expectedElemId: "rect3" },
+ { x: 28, y: 77, expectedElemId: "svg" },
+
+ { x: 139, y: 20, expectedElemId: "svg" },
+ { x: 129, y: 41, expectedElemId: "ellipse3" },
+ { x: 149, y: 55, expectedElemId: "ellipse3" },
+ { x: 166, y: 70, expectedElemId: "ellipse3" },
+ { x: 128, y: 82, expectedElemId: "svg" },
+
+ { x: 219, y: 19, expectedElemId: "svg" },
+ { x: 242, y: 40, expectedElemId: "line3" },
+ { x: 253, y: 64, expectedElemId: "svg" },
+
+ { x: 318, y: 84, expectedElemId: "polyline3" },
+ { x: 323, y: 47, expectedElemId: "polyline3" },
+ { x: 324, y: 18, expectedElemId: "polyline3" },
+ { x: 375, y: 64, expectedElemId: "svg" },
+
+ { x: 426, y: 28, expectedElemId: "polygon3" },
+ { x: 455, y: 44, expectedElemId: "polygon3" },
+ { x: 445, y: 71, expectedElemId: "polygon3" },
+ { x: 461, y: 85, expectedElemId: "polygon3" },
+ { x: 497, y: 26, expectedElemId: "svg" },
+
+ { x: 536, y: 95, expectedElemId: "path3" },
+ { x: 560, y: 70, expectedElemId: "path3" },
+ { x: 555, y: 54, expectedElemId: "path3" },
+ { x: 595, y: 38, expectedElemId: "path3" },
+ { x: 614, y: 16, expectedElemId: "path3" },
+ { x: 569, y: 33, expectedElemId: "svg" }
+ ];
+
+ // Copy all of the tests for the <use> elements.
+ var elemIdMap = {
+ "rect3": "useRect3",
+ "ellipse3": "useEllipse3",
+ "line3": "useLine3",
+ "polyline3": "usePolyline3",
+ "polygon3": "usePolygon3",
+ "path3": "usePath3"
+ };
+ tests.push.apply(tests, tests.map(function (test, i, tests) {
+ return {
+ x: test.x,
+ y: test.y + 100,
+ expectedElemId: elemIdMap[test.expectedElemId] || test.expectedElemId
+ };
+ }));
+
+ var bcr = svg.getBoundingClientRect(),
+ x0 = bcr.left << 0,
+ y0 = bcr.top << 0;
+
+ for (var i = 0; i < tests.length; ++i) {
+ var test = tests[i],
+ elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
+ expectedElem = document.getElementById(test.expectedElemId),
+ success;
+ if (elem !== expectedElem) {
+ success = false;
+ result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
+ } else {
+ success = true;
+ }
+
+ // Draw a dot and a label at the test point (helps with identification).
+ markPoint(test.x, test.y, success);
+ }
+
+ if (result.textContent == "Running test...")
+ result.textContent = "PASS";
+
+ if (window.testRunner)
+ testRunner.notifyDone();
+};
+
+function markPoint(testX, testY, success) {
+ var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+ dot.setAttribute("pointer-events", "none");
+ dot.setAttribute("cx", testX);
+ dot.setAttribute("cy", testY);
+ dot.setAttribute("r", "2");
+ if (success)
+ dot.setAttribute("fill", "#0c0");
+ else
+ dot.setAttribute("fill", "red");
+ svg.appendChild(dot);
+ var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+ label.setAttribute("pointer-events", "none");
+ label.setAttribute("x", testX + 4);
+ label.setAttribute("y", testY);
+ label.textContent = "(" + testX + ", " + testY + ")";
+ if (success)
+ label.setAttribute("fill", "#0c0");
+ else
+ label.setAttribute("fill", "red");
+ svg.appendChild(label);
+}
+</script>
« no previous file with comments | « LayoutTests/svg/hittest/pointer-events-all-expected.txt ('k') | LayoutTests/svg/hittest/pointer-events-all2-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698