/
addHitRegion.IDNotNullPreviousInListDifferentID-manual.html
92 lines (79 loc) · 5.17 KB
/
addHitRegion.IDNotNullPreviousInListDifferentID-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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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 control, does exist in the hit region list but has a different id</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>Expected Result: A hit region, associated with the control and id region, where the id and the bounds of the control match the hit region is stored in the hit region list. The hit region previously associated with the control is removed from the list. However, since there is no API to enumerate the hit region list, mouse events received must only be received for the id in the new hit region location and not the old location. The same hit region is exposed as a best fit rectangle in screen coordinates in the platform accessibility API implementation for the corresponding fallback element.</p>
<p>Test file: The test file should set up a hit region for a fallback element using addHitRegion with an associated id and the corresponding fallback element represented by the control at load time. A timer should be set up to replace the hit region for the same control with a new hit region that is distinctly different in location. The test file should print out mouse events associated with the ids in an area outside the canvas element. An accessibility test tool must be used so that the tester can validate that the region associated with the control matches the screen location of the hit region as a best fit rectangle.</p>
<p>Your expected action: <span style='font-weight: bold' id='expectedAction'>none</span></p>
<div>
<canvas id="canvas">
<button id="button1">button 1</button>
</canvas>
</div>
<script>
var canvas = document.getElementById("canvas");
var hitregiontest = async_test("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 control, does exist in the hit region list but has a different id");
// action messages and logging
var expectedAction = document.getElementById("expectedAction");
// Reset context
canvas.width = canvas.width;
var button1 = document.getElementById("button1"); // div with role button
var context = canvas.getContext("2d");
// http://www.w3.org/TR/2dcontext/#dom-context-2d-addhitregion
hitregiontest.step(function () {
// draw a red square and assign a hit region to "button1"
context.beginPath();
context.rect(10, 10, 40, 40);
context.fillStyle = "red";
context.fill();
// add a hit region assigned to this path
context.addHitRegion({
id: "region1",
control: button1
});
expectedAction.textContent = "Click on the red square";
assert_true(true, "First addHitRegion is setup");
});
var hits = 0;
canvas.addEventListener('click',
hitregiontest.step_func(function (evt) {
if (hits === 0) {
// first hit is on the first square
assert_equals(evt.region, "region1", "Region is correct");
// draw a green square and adds a new hit region to the same control (fallback button element) but with the same id
context.beginPath();
context.rect(10, 60, 80, 80);
context.fillStyle = "green";
context.fill();
context.addHitRegion({
id: "region2",
control: button1
});
expectedAction.textContent = "Check the region 40x40 in the accessibility tool matches, then click again on the red square";
} else if (hits == 1) {
// second hit is on the first square
assert_not_equals(evt.region, "region1", "Region is correct");
expectedAction.textContent = "Click on the green square now";
} else if (hits === 2) {
// third hit is on the second square
assert_equals(evt.region, "region2", "Region is correct");
}
hits++;
if (hits === 3) {
hitregiontest.done();
expectedAction.textContent = "Check the 80x80 region in the accessibility tool matches, and you're done";
}
}));
</script>
<div id="log"></div>
<!-- 2.20 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 control, does exist in the hit region list but has a different id -->
</body>
</html>