LayoutTests/svg/hittest/pointer-events-all.html - Issue 882443006: Revert of Fix pointer-events:all when stroke="none"

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

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

Patch Set: Created 5 years, 11 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 that the values of the 'fill' and 'stroke' properties do not affect event processing. If this te st passes, you will see "PASS" below.

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

4 <style>

5 .testShape {

6 pointer-events: all;

7 }

8 </style>

9 <svg id="svg" width="690" height="400" version="1.1">

10 <!-- fill:none -->

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

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

13 <line id="line1" class="testShape" x1="220" y1="20" x2="280" y2="80" stroke= "#000" stroke-width="10" fill="none"/>

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

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

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

17

18 <!-- stroke:none -->

19 <rect id="rect2" class="testShape" x="20" y="130" width="60" height="40" str oke="none" stroke-width="10" fill="#ccc"/>

20 <ellipse id="ellipse2" class="testShape" cx="150" cy="150" rx="20" ry="35" t ransform="rotate(20 150 150)" stroke="none" stroke-width="10" fill="#ccc"/>

21 <line id="line2" class="testShape" x1="220" y1="120" x2="280" y2="180" strok e="none" stroke-width="10" fill="#ccc"/>

22 <polyline id="polyline2" class="testShape" points="320,120 380,140 350,160 3 80,180 310,180" stroke="none" stroke-width="10" fill="#ccc"/>

23 <polygon id="polygon2" class="testShape" points="430,130 440,160 460,180 490 ,130 460,120" stroke="none" stroke-width="10" fill="#ccc"/>

24 <path id="path2" class="testShape" d="M610,120 a100 100 0 0 0 -70 70 a100 10 0 0 0 0 70 -70 z" stroke="none" stroke-width="10" fill="#ccc"/>

25

26 <use id="useRect1" xlink:href="#rect1" class="testShape" y="200"/>

27 <use id="useEllipse1" xlink:href="#ellipse1" class="testShape" y="200"/>

28 <use id="useLine1" xlink:href="#line1" class="testShape" y="200"/>

29 <use id="usePolyline1" xlink:href="#polyline1" class="testShape" y="200"/>

30 <use id="usePolygon1" xlink:href="#polygon1" class="testShape" y="200"/>

31 <use id="usePath1" xlink:href="#path1" class="testShape" y="200"/>

32

33 <use id="useRect2" xlink:href="#rect2" class="testShape" y="200"/>

34 <use id="useEllipse2" xlink:href="#ellipse2" class="testShape" y="200"/>

35 <use id="useLine2" xlink:href="#line2" class="testShape" y="200"/>

36 <use id="usePolyline2" xlink:href="#polyline2" class="testShape" y="200"/>

37 <use id="usePolygon2" xlink:href="#polygon2" class="testShape" y="200"/>

38 <use id="usePath2" xlink:href="#path2" class="testShape" y="200"/>

39 </svg>

40 <script type="text/javascript">

41 if (window.testRunner) {

42 testRunner.dumpAsText();

43 testRunner.waitUntilDone();

44 }

45

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

47 window.onload = function () {

48 var tests = [

49 { x: 16, y: 36, expectedElemId: "rect1" },

50 { x: 54, y: 58, expectedElemId: "rect1" },

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

52

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

54 { x: 129, y: 41, expectedElemId: "ellipse1" },

55 { x: 149, y: 55, expectedElemId: "ellipse1" },

56 { x: 166, y: 70, expectedElemId: "ellipse1" },

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

58

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

60 { x: 242, y: 40, expectedElemId: "line1" },

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

62

63 { x: 318, y: 84, expectedElemId: "polyline1" },

64 { x: 323, y: 47, expectedElemId: "polyline1" },

65 { x: 324, y: 18, expectedElemId: "polyline1" },

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

67

68 { x: 426, y: 28, expectedElemId: "polygon1" },

69 { x: 455, y: 44, expectedElemId: "polygon1" },

70 { x: 445, y: 71, expectedElemId: "polygon1" },

71 { x: 461, y: 85, expectedElemId: "polygon1" },

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

73

74 { x: 536, y: 95, expectedElemId: "path1" },

75 { x: 560, y: 70, expectedElemId: "path1" },

76 { x: 555, y: 54, expectedElemId: "path1" },

77 { x: 595, y: 38, expectedElemId: "path1" },

78 { x: 614, y: 16, expectedElemId: "path1" },

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

80 ];

81

82 // Create a copy of the tests for the stroke:none shapes, which are identica l to the shapes

83 // 100px above except for the 'stroke' and 'fill'.

84 var elemIdMap = {

85 "rect1": "rect2",

86 "ellipse1": "ellipse2",

87 "line1": "line2",

88 "polyline1": "polyline2",

89 "polygon1": "polygon2",

90 "path1": "path2"

91 };

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

93 return {

94 x: test.x,

95 y: 100 + test.y,

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

97 };

98 }));

99

100 // Now copy all of the tests again, for the <use> elements.

101 elemIdMap = {

102 "rect1": "useRect1",

103 "ellipse1": "useEllipse1",

104 "line1": "useLine1",

105 "polyline1": "usePolyline1",

106 "polygon1": "usePolygon1",

107 "path1": "usePath1",

108

109 "rect2": "useRect2",

110 "ellipse2": "useEllipse2",

111 "line2": "useLine2",

112 "polyline2": "usePolyline2",

113 "polygon2": "usePolygon2",

114 "path2": "usePath2"

115 };

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

117 return {

118 x: test.x,

119 y: 200 + test.y,

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

121 };

122 }));

123

124 var bcr = svg.getBoundingClientRect(),

125 x0 = bcr.left << 0,

126 y0 = bcr.top << 0;

127

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

129 var test = tests[i],

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

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

132 success;

133 if (elem !== expectedElem) {

134 success = false;

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

136 } else {

137 success = true;

138 }

139

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

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

142 }

143

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

145 result.textContent = "PASS";

146

147 if (window.testRunner)

148 testRunner.notifyDone();

149 };

150

151 function markPoint(testX, testY, success) {

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

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

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

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

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

157 if (success)

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

159 else

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

161 svg.appendChild(dot);

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

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

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

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

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

167 if (success)

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

169 else

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

171 svg.appendChild(label);

172 }

173 </script>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/svg/hittest/pointer-events-all-expected.txt » ('j') | no next file with comments »