| <!DOCTYPE html> |
| <title>HitRegion Clip Test</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="./resources/test-helpers.js"></script> |
| <canvas width="400" height="400"></canvas> |
| <style> |
| |
| body { |
| margin : 0px; |
| padding : 0px; |
| } |
| |
| </style> |
| <script> |
| |
| var canvas = document.querySelector('canvas'); |
| var context = canvas.getContext('2d'); |
| |
| function create_simple_rect_region_with_clip() { |
| context.clearRect(0, 0, 400, 400); |
| context.save(); |
| context.beginPath(); |
| context.rect(0, 0, 100, 100); |
| context.clip(); |
| context.beginPath(); |
| context.rect(50, 50, 100, 100); |
| context.fill(); |
| context.addHitRegion({ id : 'clip' }); |
| context.restore(); |
| } |
| |
| function create_non_rect_region_with_clip() { |
| context.clearRect(0, 0, 400, 400); |
| context.save(); |
| context.beginPath(); |
| context.arc(50, 50, 50, 0, Math.PI * 2); |
| context.clip(); |
| context.beginPath(); |
| context.rect(0, 0, 100, 100); |
| context.fill(); |
| context.addHitRegion({ id : 'clip' }); |
| context.restore(); |
| } |
| |
| function create_non_rect_region_with_multiple_clips() { |
| context.clearRect(0, 0, 400, 400); |
| context.save(); |
| context.beginPath(); |
| context.rect(0, 0, 100, 100); |
| context.clip(); |
| context.beginPath(); |
| context.arc(100, 50, 50, 0, Math.PI * 2); |
| context.clip(); |
| context.beginPath(); |
| context.rect(0, 0, 150, 50); |
| context.fill(); |
| context.addHitRegion({ id : "clip" }); |
| context.restore(); |
| } |
| |
| function no_pixel_test1() { |
| context.clearRect(0, 0, 400, 400); |
| context.save(); |
| context.beginPath(); |
| context.rect(0, 0, 100, 100); |
| context.clip(); |
| context.beginPath(); |
| context.rect(100, 100, 100, 100); |
| context.addHitRegion({ id : 'clip' }); |
| context.restore(); |
| } |
| |
| function no_pixel_test2() { |
| context.save(); |
| context.beginPath(); |
| context.rect(0, 0, 50, 50); |
| context.rect(100, 0, 50, 50); |
| context.clip(); |
| context.beginPath(); |
| context.arc(75, 75, 30, 0, Math.PI * 2); |
| context.addHitRegion({ id : 'clip' }); |
| context.restore(); |
| } |
| |
| coroutine(function*() { |
| setup({ explicit_done : true, explicit_timeout : true }); |
| |
| create_simple_rect_region_with_clip(); |
| generate_tests(assert_equals, [ |
| [ 'null1', yield clickOrTouch(10, 10), null ], |
| [ 'clip1', yield clickOrTouch(60, 60), 'clip' ] |
| ]); |
| |
| create_non_rect_region_with_clip(); |
| generate_tests(assert_equals, [ |
| [ 'null2', yield clickOrTouch(0, 0), null ], |
| [ 'null3', yield clickOrTouch(100, 0), null ], |
| [ 'null4', yield clickOrTouch(100, 100), null ], |
| [ 'null5', yield clickOrTouch(0, 100), null ], |
| [ 'clip2', yield clickOrTouch(50, 50), 'clip' ] |
| ]); |
| |
| create_non_rect_region_with_multiple_clips(); |
| generate_tests(assert_equals, [ |
| [ 'null6', yield clickOrTouch(00, 0), null ], |
| [ 'clip3', yield clickOrTouch(100, 0), 'clip' ], |
| [ 'null7', yield clickOrTouch(100, 100), null ], |
| [ 'null8', yield clickOrTouch(0, 100), null ], |
| [ 'null9', yield clickOrTouch(50, 0), null ], |
| [ 'null10', yield clickOrTouch(150, 0), null ], |
| [ 'null11', yield clickOrTouch(150, 100), null ], |
| [ 'null12', yield clickOrTouch(50, 100), null ], |
| [ 'clip4', yield clickOrTouch(50, 50), 'clip' ], |
| [ 'clip5', yield clickOrTouch(100, 50), 'clip' ], |
| ]); |
| |
| generate_tests(assert_throws_dom, [ |
| [ 'no pixel test1', 'NotSupportedError', no_pixel_test1 ], |
| [ 'no pixel test2', 'NotSupportedError', no_pixel_test2 ], |
| ]); |
| |
| done(); |
| }); |
| |
| </script> |
