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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<!DOCTYPE HTML>
<html>
<head>
<title>CSS Regions: onkeydown and onkeyup events inside multiple regions using Tab key in forms</title>
<link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-19-2013 -->
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">
<meta name="assert" content="CSS regions module does not alter the normal processing of events in the document
tree. Therefore, onkeydown and onkeyup events inside multiple named flows should be raised when the Tab key is
pressed and released.">
<meta name="flags" content="dom interact">
<link href="support/css/regions-keyboard.css" rel="stylesheet" type="text/css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/js/regions-keyboard-events-test-helper.js"></script>
</head>
<body>
<p id="msg">Press the Tab key three times.</p>
<div id="content">
<form id="my-form">
<div class="block">
<input type="text" id="textfield-inside1" size="10" autofocus>
</div>
<div class="block">
<input type="text" id="textfield-inside2" size="10">
</div>
<div id="target-block" class="block">
<textarea id="textarea-inside" rows="3" cols="10"></textarea>
</div>
</form>
</div>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<br/>
<div id="outside-region">This div is outside the region
<form id="form-outside">
<input type="text" id="textfield-outside" size="10">
<input type="button" id="button-outside" value="Button">
</form>
</div>
<div id="log"></div>
</body>
<script type="text/javascript">
if(getLeftPosition("target-block") !== 0) {
var test1 = async_test("onkeydown event fired in textfield1 inside region");
test1.step(function () {
var testTarget = document.getElementById("textfield-inside1");
testTarget.onkeydown = test1.step_func(function (evt) {
/* Verify the target outside the region has the correct ID */
test(function() {
assert_equals(evt.target.id, "textfield-inside1");
}, "Textfield1 inside region has the correct ID");
/* Verify the textfield received focus from tab key */
test(function() {
assert_equals(document.activeElement.id, "textfield-inside1");
}, "Textfield1 inside region received focus");
test1.done();
});
});
var test2 = async_test("onkeyup event fired in textfield2 inside region");
test2.step(function () {
var testTarget = document.getElementById("textfield-inside2");
testTarget.onkeyup = test2.step_func(function (evt) {
/* Log assertion that the event got fired */
assert_true(true);
test2.done();
});
});
var test3 = async_test("onkeydown event fired in textfield2 inside region");
test3.step( function() {
var testTarget = document.getElementById("textfield-inside2");
testTarget.onkeydown = test3.step_func(function (evt) {
/* Verify the target outside the region has the correct ID */
test(function () {
assert_equals(evt.target.id, "textfield-inside2");
}, "Textfield2 inside region has the correct ID");
/* Verify the textfield received focus from tab key */
test(function () {
assert_equals(document.activeElement.id, "textfield-inside2");
}, "Textfield2 inside region received focus");
test3.done();
});
});
var test4 = async_test("onkeyup event fired in textarea inside region");
test4.step( function() {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeyup = test4.step_func(function (evt) {
/* Verify the textarea received focus from tab key */
test(function () {
assert_equals(document.activeElement.id, "textarea-inside");
}, "textarea inside region received focus");
test4.done();
});
});
var test5 = async_test("onkeydown event fired in textarea inside region");
test5.step( function() {
var testTarget = document.getElementById("textarea-inside");
testTarget.onkeydown = test5.step_func(function (evt) {
/* Verify the textarea inside the region has the correct ID */
test(function () {
assert_equals(evt.target.id, "textarea-inside");
}, "textarea inside region has the correct ID");
test5.done();
});
});
tabKeyPresses(3);
completionCallback();
} //end of getLeftPosition test
else {
test(function () {
assert_true(false);
}, "Regions are not enabled");
}
</script>
</html>
|
