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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-basic-test.html

Issue 1553373002: Canvas2d: Fix incorrect alignment of hit region when applied css/zoom. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixed layout test Created 4 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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-basic-test-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-css-transform-test.html » ('J')
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 <title>HitRegion Basic Test</title>
3 <head> 3 <script src="../../resources/testharness.js"></script>
4 <title>Canvas Hit Regions: basic test</title> 4 <script src="../../resources/testharnessreport.js"></script>
5 <script src="../../resources/js-test.js"></script> 5 <script src="./resources/test-helpers.js"></script>
6 </head> 6 <canvas width="400" height="400"></canvas>
7 <body> 7 <style>
8 <canvas id="canvas" width="400" height="400"> 8
9 <button id="face"></button> 9 body {
10 <button id="eyes"></button> 10 margin : 0px;
11 </canvas> 11 padding : 0px;
12 <script src="./resources/canvas-hit-region-event.js"></script> 12 }
13
14 </style>
13 <script> 15 <script>
14 16
15 var canvas = document.getElementById("canvas"); 17 var canvas = document.querySelector('canvas');
16 var context = canvas.getContext("2d"); 18 var context = canvas.getContext('2d');
17 19
18 context.fillStyle = "pink"; 20 createFace(context);
19 context.arc(200, 175, 150, 0, Math.PI * 2, true);
20 context.fill();
21 context.addHitRegion({ id : "face", control : document.getElementById("face") });
22 21
23 context.beginPath(); 22 coroutine(function*() {
24 context.fillStyle = "black"; 23 setup({ explicit_done : true, explicit_timeout : true });
25 context.globalAlpha = .5;
26 context.moveTo(200, 165);
27 context.lineTo(240, 205);
28 context.lineTo(160, 205);
29 context.closePath();
30 context.fill();
31 context.addHitRegion({ id : "nose" });
32 24
33 context.beginPath(); 25 generate_tests(assert_equals, [
34 context.fillStyle = "red"; 26 [ 'face', yield clickOrTouch(100, 100), 'face' ],
35 context.rect(125, 240, 150, 20); 27 [ 'nose', yield clickOrTouch(200, 200), 'nose' ],
36 context.fill(); 28 [ 'mouth', yield clickOrTouch(127, 242), 'mouth' ],
37 context.addHitRegion({ id : "mouth" }); 29 [ 'eye', yield clickOrTouch(150, 125), 'eye' ],
38 30 [ 'eye', yield clickOrTouch(250, 125), 'eye' ],
39 context.beginPath(); 31 [ 'face', yield clickOrTouch(200, 120), 'face' ],
40 context.globalAlpha = 1; 32 [ 'null', yield clickOrTouch(20, 10), null ]
41 context.fillStyle = "blue"; 33 ]);
42 context.arc(150, 125, 25, 0, Math.PI * 2, true);
43 context.arc(250, 125, 25, 0, Math.PI * 2, true);
44 context.fill();
45 context.addHitRegion({ id: "eye", control : document.getElementById("eyes") }) ;
46 34
47 debug("Hit detection and mouse event tests"); 35 done();
48 shouldBe("clickCanvas(100, 100)", "'face'"); 36 });
49 shouldBe("clickCanvas(200, 200)", "'nose'");
50 shouldBe("clickCanvas(127, 242)", "'mouth'");
51 shouldBe("clickCanvas(150, 125)", "'eye'");
52 shouldBe("clickCanvas(250, 125)", "'eye'");
53 shouldBe("clickCanvas(200, 125)", "'face'");
54 shouldBe("clickCanvas(20, 10)", "null");
55 debug("");
56
57 debug("Hit detection and mouse/touch event tests with CSS sizing");
58 canvas.style.width = "220px";
59 canvas.style.height = "220px";
60 shouldBe("clickCanvas(100, 100)", "'face'");
61 shouldBe("clickCanvas(200, 200)", "'nose'");
62 shouldBe("clickCanvas(127, 242)", "'no event sent to canvas'");
63 shouldBe("clickCanvas(150, 125)", "'eye'");
64 shouldBe("clickCanvas(250, 125)", "'no event sent to canvas'");
65 shouldBe("clickCanvas(200, 125)", "'face'");
66 shouldBe("clickCanvas(20, 10)", "null");
67 canvas.style.width = "400px";
68 canvas.style.height = "400px";
69 debug("");
70
71 debug("Hit detection and mouse/touch event tests with adjusted pixel ratio");
72 eventSender.setPageZoomFactor(0.5);
73 shouldBe("clickCanvas(50, 50)", "'face'");
74 shouldBe("clickCanvas(100, 100)", "'nose'");
75 shouldBe("clickCanvas(64, 121)", "'mouth'");
76 shouldBe("clickCanvas(75, 63)", "'eye'");
77 shouldBe("clickCanvas(125, 63)", "'eye'");
78 shouldBe("clickCanvas(100, 63)", "'face'");
79 shouldBe("clickCanvas(10, 5)", "null");
80 eventSender.setPageZoomFactor(1);
81 debug("");
82
83 debug("Hit detection and mouse/touch event tests with adjusted page scale fact or");
84 window.internals.setPageScaleFactorLimits(0.5, 0.5);
85 window.internals.setPageScaleFactor(0.5);
86 shouldBe("clickCanvas(50, 50, 0.5)", "'face'");
87 shouldBe("clickCanvas(100, 100, 0.5)", "'nose'");
88 shouldBe("clickCanvas(64, 121, 0.5)", "'mouth'");
89 shouldBe("clickCanvas(75, 63, 0.5)", "'eye'");
90 shouldBe("clickCanvas(125, 63, 0.5)", "'eye'");
91 shouldBe("clickCanvas(100, 63, 0.5)", "'face'");
92 shouldBe("clickCanvas(10, 5, 0.5)", "null");
93 window.internals.setPageScaleFactorLimits(1, 1);
94 window.internals.setPageScaleFactor(1);
95 debug("");
96
97 debug("NotSupportedError exception tests");
98 shouldThrow("context.addHitRegion()");
99 shouldThrow("context.addHitRegion({ id : '' })");
100 shouldThrow("context.addHitRegion({ id : undefined })");
101 shouldThrow("context.addHitRegion({ control : {} })");
102 shouldThrow("context.addHitRegion({ control : null })");
103 shouldThrow("context.addHitRegion({ control : undefined })");
104 shouldThrow("context.addHitRegion({ id : '', control : {} })");
105 shouldThrow("context.addHitRegion({ id : undefined, control : {} })");
106 shouldThrow("context.addHitRegion({ id : '', control : null })");
107 shouldThrow("context.addHitRegion({ id : undefined, control : null })");
108 shouldThrow("context.addHitRegion({ id : '', control : undefined })");
109 shouldThrow("context.addHitRegion({ id : undefined, control : undefined })");
110 debug("");
111 37
112 </script> 38 </script>
113 </body>
114 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-basic-test-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-css-transform-test.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698