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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://html.spec.whatwg.org/multipage/semantics-other.html#being-actively-pointed-at">
<meta name="assert" content="Additionally, any element that is the labeled control of a label element that is currently matching :active, also matches :active.">
<meta name="timeout" content="long">
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
* {
font-size: 20px;
}
button:active, input:active, meter:active, progress:active, select:active, textarea:active {
outline: 1px solid red;
}
*:focus {
outline: none;
}
</style>
</head>
<body>
<!-- Testing instructions-->
<h1>Manual Testing Instructions</h1>
<p>
The test is automatic, but if you wish to test it manually, you can do so by following the steps below.
</p>
<ol>
<li>
Click on the label of the interactive element of your choosing. For example,
you can click on the label of the first button element by clicking on the text "button1".
Do not click on anything afterwards before the next step.
</li>
<li>
Expected behavior: While mousedowning, the element on the right of the title text
should have received a red outline for the duration of the mousedown.
</li>
<li>
Click again on the same label (do not double-click, wait a second before clicking again).
</li>
<li>
Expected behavior: Again, while mousedowning on the click,
the element on the right of the title text should have received a red outline.
</li>
<li>
Expected behavior: The above steps should pass for all the labels on this page.
</li>
</ol>
<!-- Button -->
<div>
<label id="button1-label" for="button1">button1</label>
<button id="button1" class="control"></button>
<label id="button2-label">button2<button id="button2" class="control"></button></label>
</div>
<!-- Default input -->
<div>
<label id="input1-label" for="input1">input1</label>
<input id="input1" class="control"></input>
<label id="input2-label">input2<input id="input2" class="control"></input></label>
</div>
<!-- Checkbox input -->
<div>
<label id="checkbox1-label" for="checkbox1">checkbox1</label>
<input type="checkbox" id="checkbox1" class="control"></input>
<label id="checkbox2-label">checkbox2
<input type="checkbox" id="checkbox2" class="control"></input>
</label>
</div>
<!-- Meter -->
<div>
<label id="meter1-label" for="meter1">meter1</label>
<meter id="meter1" class="control"></meter>
<label id="meter2-label">meter2<meter id="meter2" class="control"></meter></label>
</div>
<!-- Progress -->
<div>
<label id="progress1-label" for="progress1">progress1</label>
<progress id="progress1" class="control"></progress>
<label id="progress2-label">progress2<progress id="progress2" class="control"></progress></label>
</div>
<!-- Select -->
<div>
<label id="select1-label" for="select1">select1</label>
<select id="select1" class="control"></select>
<label id="select2-label">select2<select id="select2" class="control"></select></label>
</div>
<!-- Textarea -->
<div>
<label id="textarea1-label" for="textarea1">textarea1</label>
<textarea id="textarea1" class="control"></textarea>
<label id="textarea2-label">textarea2<textarea id="textarea2" class="control"></textarea></label>
</div>
<script>
function assertIsActive(shouldBeActive, element, name, whenDescription) {
assertMessage = (
name + " element " + element.id +" should" + (shouldBeActive ? " " : " not ") +
"be :active when " + whenDescription + "."
);
const isActive = document.querySelector("#" + element.id + ":active") == element;
assert_equals(isActive, shouldBeActive, assertMessage);
}
async function testWith(control, label, isFirstClick) {
clickNumSuffix = isFirstClick ? " on the first click" : " on the second click";
await ((new test_driver.Actions()
.pointerMove(2, 2, { origin: label })
.pointerDown())
.send());
assertIsActive(true, control, "Control", "label is mousedowned" + clickNumSuffix);
assertIsActive(true, label, "Label", "label is mousedowned" + clickNumSuffix);
await ((new test_driver.Actions()
.pointerMove(2, 2, { origin: label })
.pointerUp())
.send());
assertIsActive(false, control, "Control", "label is no longer mousedowned" + clickNumSuffix);
assertIsActive(false, label, "Label", "label is no longer mousedowned" + clickNumSuffix);
}
// If testharness.js or test_driver.js is not available then the test is
// degraded into a manual test.
if (typeof assert_equals !== "undefined" &&
typeof test_driver !== "undefined" &&
typeof test_driver.Actions !== "undefined") {
window.onload = () => {
promise_test(async t => {
const labels = Array.from(document.querySelectorAll("label"));
const controlLabelPairs = labels.map((label) => [label.control, label]);
for (const pair of controlLabelPairs) {
await testWith(...pair, true);
await testWith(...pair, false);
}
}, "Control should be :active on mousedown when clicking the label twice in succession.");
}
}
</script>
</body>
</html>
|
