<!DOCTYPE html>
<title>HitRegion Canvas Fallback Element 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">
<a id="a"></a>
<a id="a_with_image"><img></a>
<button id="button"></button>
<input id="checkbox" type="checkbox">
<input id="radio" type="radio">
<input id="input_button" type="button">
<input id="input_image_button" type="image">
<select id="empty_select"></select>
<select id="select_size_greater_than_1" size="2"></select>
<select id="select_multiple" multiple="multiple"></select>
<select>
<option id="option_with_select"></option>
</select>
<select multiple="multiple">
<option id="option_with_select_multiple"></option>
</select>
<select size="2">
<option id="option_with_select_size_greater_than_1"></option>
</select>
<p id="p"></p>
<p id="p_with_tabindex" tabindex="0"></p>
<table>
<caption></caption>
<thead><tr><th></th></tr></thead>
<tfoot><tr><td></td></tr></tfoot>
<tbody><tr><td></td></tr></tbody>
</table>
</canvas>
<button id="button_is_not_descendant_of_canvas"></button>
<style>
body {
margin : 0px;
padding : 0px;
}
</style>
<script>
function canvas_fallback_test(element, expected) {
test(function() {
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, 400, 400);
context.rect(0, 0, 100, 100);
if (expected) {
assert_throws(expected, function() {
context.addHitRegion({ control : element });
});
} else {
context.addHitRegion({ control : element });
}
}, element.id);
}
const NotSupportedError = { name : 'NotSupportedError' };
canvas_fallback_test(document.getElementById('button_is_not_descendant_of_canvas'), NotSupportedError);
canvas_fallback_test(document.querySelector('canvas'), NotSupportedError);
canvas_fallback_test(document.getElementById('a'));
canvas_fallback_test(document.getElementById('a_with_image'), NotSupportedError);
canvas_fallback_test(document.getElementById('button'));
canvas_fallback_test(document.getElementById('checkbox'));
canvas_fallback_test(document.getElementById('radio'));
canvas_fallback_test(document.getElementById('input_button'));
canvas_fallback_test(document.getElementById('input_image_button'), NotSupportedError);
canvas_fallback_test(document.getElementById('empty_select'), NotSupportedError);
canvas_fallback_test(document.getElementById('select_size_greater_than_1'));
canvas_fallback_test(document.getElementById('select_multiple'));
canvas_fallback_test(document.getElementById('option_with_select'), NotSupportedError);
canvas_fallback_test(document.getElementById('option_with_select_multiple'));
canvas_fallback_test(document.getElementById('option_with_select_size_greater_than_1'));
canvas_fallback_test(document.getElementById('p'), NotSupportedError);
canvas_fallback_test(document.getElementById('p_with_tabindex'));
canvas_fallback_test(document.querySelector('canvas table'));
canvas_fallback_test(document.querySelector('canvas tr'));
canvas_fallback_test(document.querySelector('canvas th'));
canvas_fallback_test(document.querySelector('canvas td'));
canvas_fallback_test(document.querySelector('canvas thead'));
canvas_fallback_test(document.querySelector('canvas tfoot'));
canvas_fallback_test(document.querySelector('canvas tbody'));
canvas_fallback_test(document.querySelector('canvas caption'));
</script>