| <!DOCTYPE html> |
| <title>Test that when image map areas have their shape or coordinate dynamically altered, the test region changes.</title> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <img usemap="#m" style="height:400px; width:400px; border:1px solid red; position:absolute; left:0; right:0" > |
| <map name="m"> |
| <area href="#"> |
| </map> |
| <script> |
| test(function() { |
| var area = document.querySelector('area'); |
| function checkPointInArea(shape, coords, x, y, equals) { |
| area.setAttribute('shape', shape); |
| area.setAttribute('coords', coords); |
| equals ? assert_equals(area, document.elementFromPoint(x, y)) |
| : assert_not_equals(area, document.elementFromPoint(x, y)); |
| } |
| checkPointInArea('default', '', 50, 50, true); |
| checkPointInArea('default', '', 50, 50, true); |
| checkPointInArea('rect', '0, 0, 100, 100', 50, 50, true); |
| checkPointInArea('rect', '0, 0, 100, 100', 150, 150, false); |
| checkPointInArea('rect', '200, 200, 300, 300', 50, 50, false); |
| checkPointInArea('rect', '200, 200, 300, 300', 250, 250, true); |
| checkPointInArea('circle', '100, 100, 50', 100, 100, true); |
| checkPointInArea('circle', '100, 100, 50', 120, 100, true); |
| checkPointInArea('circle', '100, 100, 50', 200, 100, false); |
| checkPointInArea('circle', '300, 300, 50', 100, 100, false); |
| checkPointInArea('circle', '300, 300, 50', 300, 300, true); |
| checkPointInArea('circle', '300, 300, 50', 320, 300, true); |
| checkPointInArea('poly', '100, 100, 200, 100, 200, 200', 150, 150, true); |
| checkPointInArea('poly', '100, 100, 200, 100, 200, 200', 100, 150, false); |
| checkPointInArea('poly', '100, 100, 200, 100, 200, 200', 300, 300, false); |
| checkPointInArea('default', '', 300, 300, true); |
| }); |
| </script> |
