<!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>