| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <title>HitRegion CSS Size/Transform Test</title> |
| 3 <script src="../../resources/testharness.js"></script> |
| 4 <script src="../../resources/testharnessreport.js"></script> |
| 5 <script src="./resources/test-helpers.js"></script> |
| 6 <canvas width="400" height="400"></canvas> |
| 7 <style> |
| 8 |
| 9 body { |
| 10 margin : 0px; |
| 11 padding : 0px; |
| 12 } |
| 13 |
| 14 </style> |
| 15 <script> |
| 16 |
| 17 var canvas = document.querySelector('canvas'); |
| 18 var context = canvas.getContext('2d'); |
| 19 |
| 20 createFace(context); |
| 21 |
| 22 function transformX(x, y, degree) |
| 23 { |
| 24 var paddingLeft = parseInt(canvas.style.paddingLeft) || 0; |
| 25 var borderLeft = parseInt(canvas.style.borderLeft) || 0; |
| 26 var cssWidth = parseInt(canvas.style.width) || canvas.width; |
| 27 var scale = cssWidth / canvas.width; |
| 28 var tx = x; |
| 29 if (degree) { |
| 30 var cos = Math.cos(degree * Math.PI / 180); |
| 31 var sin = Math.sin(degree * Math.PI / 180); |
| 32 tx = (x - canvas.width / 2) * cos - |
| 33 (y - canvas.height / 2) * sin + |
| 34 canvas.width / 2; |
| 35 } |
| 36 return paddingLeft + borderLeft + tx * scale; |
| 37 } |
| 38 |
| 39 function transformY(x, y, degree) |
| 40 { |
| 41 var paddingTop = parseInt(canvas.style.paddingTop) || 0; |
| 42 var borderTop = parseInt(canvas.style.borderTop) || 0; |
| 43 var cssHeight = parseInt(canvas.style.height) || canvas.height; |
| 44 var scale = cssHeight / canvas.height; |
| 45 var ty = y; |
| 46 if (degree) { |
| 47 var cos = Math.cos(degree * Math.PI / 180); |
| 48 var sin = Math.sin(degree * Math.PI / 180); |
| 49 var ty = (x - canvas.width / 2) * sin + |
| 50 (y - canvas.height / 2) * cos + |
| 51 canvas.height / 2; |
| 52 } |
| 53 return paddingTop + borderTop + ty * scale; |
| 54 } |
| 55 |
| 56 function hit_region_with_css_test(test_set) { |
| 57 return new Promise(function(resolve, reject) { |
| 58 coroutine(function*() { |
| 59 var tests = []; |
| 60 for (var i = 0; i < test_set.length; i++) { |
| 61 var x = parseInt(transformX(test_set[i].x, test_set[i].y, test_set[i].ro
tate)); |
| 62 var y = parseInt(transformY(test_set[i].x, test_set[i].y, test_set[i].ro
tate)); |
| 63 tests.push([ test_set[i].id, yield clickOrTouch(x, y), test_set[i].id ])
; |
| 64 } |
| 65 generate_tests(assert_equals, tests, 'ssss'); |
| 66 resolve(); |
| 67 }); |
| 68 }); |
| 69 } |
| 70 |
| 71 coroutine(function*() { |
| 72 setup({ explicit_done : true, explicit_timeout : true }); |
| 73 |
| 74 var test_set = [ |
| 75 { id : 'face', x : 100, y : 100 }, |
| 76 { id : 'nose', x : 200, y : 200 }, |
| 77 { id : 'mouth', x : 127, y : 242 }, |
| 78 { id : 'eye', x : 150, y : 125 }, |
| 79 { id : 'eye', x : 250, y : 125 }, |
| 80 { id : 'face', x : 200, y : 120 }, |
| 81 { id : null, x : 20, y : 10 } |
| 82 ]; |
| 83 yield hit_region_with_css_test(test_set); |
| 84 |
| 85 canvas.style.width = '200px'; |
| 86 canvas.style.height = '200px'; |
| 87 yield hit_region_with_css_test(test_set); |
| 88 |
| 89 canvas.style.padding = '100px'; |
| 90 yield hit_region_with_css_test(test_set); |
| 91 |
| 92 canvas.style.border = '100px solid black'; |
| 93 yield hit_region_with_css_test(test_set); |
| 94 |
| 95 var test_set_with_rotate = [ |
| 96 { id : 'face', x : 100, y : 100, rotate : 72 }, |
| 97 { id : 'nose', x : 200, y : 200, rotate : 72 }, |
| 98 { id : 'mouth', x : 127, y : 242, rotate : 72 }, |
| 99 { id : 'eye', x : 150, y : 125, rotate : 72 }, |
| 100 { id : 'eye', x : 250, y : 125, rotate : 72 }, |
| 101 { id : 'face', x : 200, y : 120, rotate : 72 }, |
| 102 { id : null, x : 20, y : 10, rotate : 72 } |
| 103 ]; |
| 104 canvas.style.transform = 'rotate(72deg)'; |
| 105 yield hit_region_with_css_test(test_set_with_rotate); |
| 106 |
| 107 done(); |
| 108 }); |
| 109 |
| 110 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1553373002:
Canvas2d: Fix incorrect alignment of hit region when applied css/zoom. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master