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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test.html

Issue 354333002: Add path option(path2d) for hit regions on canvas2d. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: nit and rebase Created 6 years, 5 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
« no previous file with comments | « LayoutTests/fast/canvas/canvas-hit-regions-path2d-test-expected.txt ('k') | LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>Canvas Hit Regions: transform test</title> 4 <title>Canvas Hit Regions: path2d with transform test</title>
5 <script src="../../resources/js-test.js"></script> 5 <script src="../../resources/js-test.js"></script>
6 </head> 6 </head>
7 <body> 7 <body>
8 <canvas id="canvas" width="400" height="400"></canvas> 8 <canvas id="canvas" width="400" height="400"></canvas>
9 <script> 9 <script>
10 10
11 var canvas = document.getElementById("canvas"); 11 var canvas = document.getElementById("canvas");
12 var context = canvas.getContext("2d"); 12 var context = canvas.getContext("2d");
13 var testSet = []; 13 var testSet = [];
14 14
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
46 actual : clickCanvas(tests[i].x, tests[i].y), 46 actual : clickCanvas(tests[i].x, tests[i].y),
47 expected : tests[i].expected 47 expected : tests[i].expected
48 }); 48 });
49 49
50 testSet.push({ 50 testSet.push({
51 type : "debug", 51 type : "debug",
52 message : "" 52 message : ""
53 }); 53 });
54 } 54 }
55 55
56 function createHitRegion(pathMethod) 56 function createHitRegion(transformMethod, isRect)
57 { 57 {
58 context.removeHitRegion("hit"); 58 context.removeHitRegion("hit");
59 context.beginPath();
60 context.save(); 59 context.save();
61 pathMethod(); 60 transformMethod();
61 context.addHitRegion({
62 id : "hit",
63 path : drawSomething(isRect)
64 });
62 context.restore(); 65 context.restore();
63 context.addHitRegion({
64 id : "hit"
65 });
66 } 66 }
67 67
68 function drawStar() 68 function drawSomething(isRect)
69 { 69 {
70 context.beginPath(); 70 var path = new Path2D();
71 context.moveTo(0, -50); 71
72 context.lineTo(-15, -10); 72 if (isRect) {
73 context.lineTo(-50, -10); 73 path.rect(0, 0, 50, 50);
74 context.lineTo(-15, 10); 74 return path;
75 context.lineTo(-35, 50); 75 }
76 context.lineTo(0, 20); 76
77 context.lineTo(35, 50); 77 // draw star
78 context.lineTo(15, 10); 78 path.moveTo(0, -50);
79 context.lineTo(50, -10); 79 path.lineTo(-15, -10);
80 context.lineTo(15, -10); 80 path.lineTo(-50, -10);
81 context.lineTo(0, -50); 81 path.lineTo(-15, 10);
82 path.lineTo(-35, 50);
83 path.lineTo(0, 20);
84 path.lineTo(35, 50);
85 path.lineTo(15, 10);
86 path.lineTo(50, -10);
87 path.lineTo(15, -10);
88 path.lineTo(0, -50);
89 return path;
82 } 90 }
83 91
84 // Rectangle with context.translate() 92 // Rectangle with context.translate()
85 createHitRegion(function() { 93 createHitRegion(function() {
86 context.translate(20, 20); 94 context.translate(20, 20);
87 context.rect(0, 0, 50, 50); 95 }, true);
88 });
89 clickTests("Rectangle with context.translate():", [ 96 clickTests("Rectangle with context.translate():", [
90 { x : 1, y : 1, expected : null }, 97 { x : 1, y : 1, expected : null },
91 { x : 31, y : 21, expected : "hit" }, 98 { x : 31, y : 21, expected : "hit" },
92 { x : 51, y : 51, expected : "hit" }, 99 { x : 51, y : 51, expected : "hit" },
93 { x : 10, y : 5, expected : null }, 100 { x : 10, y : 5, expected : null },
94 { x : 61, y : 61, expected : "hit" } 101 { x : 61, y : 61, expected : "hit" }
95 ]); 102 ]);
96 103
97 // Rectangle with context.rotate() 104 // Rectangle with context.rotate()
98 createHitRegion(function() { 105 createHitRegion(function() {
99 context.rotate(Math.PI * 0.25); // 45 degrees 106 context.rotate(Math.PI * 0.25); // 45 degrees
100 context.rect(0, 0, 50, 50); 107 }, true);
101 });
102 clickTests("Rectangle with context.rotate():", [ 108 clickTests("Rectangle with context.rotate():", [
103 { x : 20, y : 5, expected : null }, 109 { x : 20, y : 5, expected : null },
104 { x : 0, y : 25, expected : "hit" }, 110 { x : 0, y : 25, expected : "hit" },
105 { x : 49, y : 49, expected : null }, 111 { x : 49, y : 49, expected : null },
106 { x : 0, y : 51, expected : "hit" }, 112 { x : 0, y : 51, expected : "hit" },
107 ]); 113 ]);
108 114
109 // Rectangle with context.scale() 115 // Rectangle with context.scale()
110 createHitRegion(function() { 116 createHitRegion(function() {
111 context.scale(2, 2); 117 context.scale(2, 2);
112 context.rect(0, 0, 50, 50); 118 }, true);
113 });
114 clickTests("Rectangle with context.scale():", [ 119 clickTests("Rectangle with context.scale():", [
115 { x : 1, y : 1, expected : "hit" }, 120 { x : 1, y : 1, expected : "hit" },
116 { x : 49, y : 49, expected : "hit" }, 121 { x : 49, y : 49, expected : "hit" },
117 { x : 51, y : 51, expected : "hit" }, 122 { x : 51, y : 51, expected : "hit" },
118 { x : 99, y : 99, expected : "hit" }, 123 { x : 99, y : 99, expected : "hit" },
119 ]); 124 ]);
120 125
121 // Non rectangle (star) with context.translate() 126 // Non rectangle (star) with context.translate()
122 createHitRegion(function() { 127 createHitRegion(function() {
123 context.translate(50, 50); 128 context.translate(50, 50);
124 drawStar(); 129 }, false);
125 });
126 clickTests("Non rectangle (star) with context.translate():", [ 130 clickTests("Non rectangle (star) with context.translate():", [
127 { x : 26, y : 23, expected : null }, 131 { x : 26, y : 23, expected : null },
128 { x : 82, y : 65, expected : null }, 132 { x : 82, y : 65, expected : null },
129 { x : 51, y : 21, expected : "hit" }, 133 { x : 51, y : 21, expected : "hit" },
130 { x : 74, y : 49, expected : "hit" }, 134 { x : 74, y : 49, expected : "hit" },
131 { x : 49, y : 88, expected : null }, 135 { x : 49, y : 88, expected : null },
132 { x : 13, y : 65, expected : null }, 136 { x : 13, y : 65, expected : null },
133 { x : 66, y : 76, expected : "hit" }, 137 { x : 66, y : 76, expected : "hit" },
134 { x : 76, y : 23, expected : null }, 138 { x : 76, y : 23, expected : null },
135 { x : 38, y : 76, expected : "hit" }, 139 { x : 38, y : 76, expected : "hit" },
136 { x : 28, y : 47, expected : "hit" }, 140 { x : 28, y : 47, expected : "hit" },
137 ]); 141 ]);
138 142
139 // Non rectangle (star) with context.rotate() 143 // Non rectangle (star) with context.rotate()
140 createHitRegion(function() { 144 createHitRegion(function() {
141 context.translate(50, 50); 145 context.translate(50, 50);
142 context.rotate(Math.PI * 0.25); 146 context.rotate(Math.PI * 0.25);
143 drawStar(); 147 }, false);
144 });
145 clickTests("Non rectangle (star) with context.rotate():", [ 148 clickTests("Non rectangle (star) with context.rotate():", [
146 { x : 26, y : 23, expected : "hit" }, 149 { x : 26, y : 23, expected : "hit" },
147 { x : 82, y : 65, expected : null }, 150 { x : 82, y : 65, expected : null },
148 { x : 51, y : 21, expected : null }, 151 { x : 51, y : 21, expected : null },
149 { x : 74, y : 49, expected : null }, 152 { x : 74, y : 49, expected : null },
150 { x : 49, y : 88, expected : null }, 153 { x : 49, y : 88, expected : null },
151 { x : 13, y : 65, expected : null }, 154 { x : 13, y : 65, expected : null },
152 { x : 66, y : 76, expected : null }, 155 { x : 66, y : 76, expected : null },
153 { x : 76, y : 23, expected : "hit" }, 156 { x : 76, y : 23, expected : "hit" },
154 { x : 38, y : 76, expected : "hit" }, 157 { x : 38, y : 76, expected : "hit" },
155 { x : 28, y : 47, expected : null }, 158 { x : 28, y : 47, expected : null },
156 ]); 159 ]);
157 160
158 // Non rectangle (star) with context.scale() 161 // Non rectangle (star) with context.scale()
159 createHitRegion(function() { 162 createHitRegion(function() {
160 context.translate(25, 25); 163 context.translate(25, 25);
161 context.scale(0.5, 0.5); 164 context.scale(0.5, 0.5);
162 drawStar(); 165 }, false);
163 });
164 clickTests("Non rectangle (star) with context.scale():", [ 166 clickTests("Non rectangle (star) with context.scale():", [
165 { x : 28, y : 13, expected : "hit" }, 167 { x : 28, y : 13, expected : "hit" },
166 { x : 38, y : 24, expected : "hit" }, 168 { x : 38, y : 24, expected : "hit" },
167 { x : 34, y : 38, expected : "hit" }, 169 { x : 34, y : 38, expected : "hit" },
168 { x : 13, y : 12, expected : null }, 170 { x : 13, y : 12, expected : null },
169 { x : 36, y : 12, expected : null }, 171 { x : 36, y : 12, expected : null },
170 { x : 40, y : 33, expected : null }, 172 { x : 40, y : 33, expected : null },
171 { x : 9, y : 31, expected : null }, 173 { x : 9, y : 31, expected : null },
172 { x : 18, y : 41, expected : "hit" }, 174 { x : 18, y : 41, expected : "hit" },
173 { x : 12, y : 25, expected : "hit" }, 175 { x : 12, y : 25, expected : "hit" },
(...skipping 11 matching lines...) Expand all
185 if (test.expected == null) 187 if (test.expected == null)
186 shouldBe("region", String(test.actual)); 188 shouldBe("region", String(test.actual));
187 else 189 else
188 shouldBe("region", "'" + test.actual + "'"); 190 shouldBe("region", "'" + test.actual + "'");
189 } 191 }
190 } 192 }
191 193
192 </script> 194 </script>
193 </body> 195 </body>
194 </html> 196 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/canvas/canvas-hit-regions-path2d-test-expected.txt ('k') | LayoutTests/fast/canvas/canvas-hit-regions-path2d-transform-test-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698