/
addHitRegion.IDNotNullPreviousNotInList-manual.html
64 lines (56 loc) · 2.91 KB
/
addHitRegion.IDNotNullPreviousNotInList-manual.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addHitRegion receives a dictionary object whose id is not null, and has a non-null control, and a previous region having the same control exists</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<link rel="author" title="Mark Sadecki">
<link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-addhitregion">
</head>
<body>
<h1>Description</h1>
<p>On page load a hit region is added to the canvas with a non-null ID and a non-null control. Verify using an accessibility API that the hit region exists and its id is "region1". Press the button below to add a new hit region a second fallback element, using the same id as the first "region1". Verify using an accessibilty API that the new hit region on "button2" exists and has an ID of "region1"</p>
<button id="newregion">New Hit Region</button>
<div>
<canvas id="canvas">
<button id="button1">button 1</button>
<button id="button2">button 2</button>
</canvas>
</div>
<script>
test(function () {
var canvas = document.getElementById("canvas");
// Reset context
canvas.width = canvas.width;
var newregion = document.getElementById('newregion');
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var context = canvas.getContext("2d");
// http://www.w3.org/TR/2dcontext/#dom-context-2d-addhitregion
// draw a red square and assign a hit region to the fallback button element
context.beginPath();
context.rect(10, 10, 40, 40);
context.fillStyle = "red";
context.fill();
context.addHitRegion({
id: "region1",
control: button1
});
// draw a green square and adds a new hit region to the same control (fallback button element) but with a new id
newregion.addEventListener('click', function () {
context.beginPath();
context.rect(10, 60, 40, 40);
context.fillStyle = "green";
context.fill();
context.addHitRegion({
id: "region2",
control: button2
});
});
}, "addHitRegion receives a dictionary object whose id is not null, and has a non-null control, and a previous region having the same control exists.");
</script>
<div id="log"></div>
<!-- 2.18 addHitRegion receives a dictionary object whose id is not null, with a non-null region, and a non-null control id where a previous non-null region, associated with this id, does not exist in the hit region list -->
</body>
</html>