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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Focus fixup rule one (no <dialog>s involved)</title>
<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule">
<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#attr-fieldset-disabled">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div>
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<fieldset id="fieldset1"><button id="button4">Button 4</button></fieldset>
<fieldset id="fieldset2" disabled><legend><button id="button5">Button 5</button></legend></fieldset>
<div id="div" tabindex="0">Div</div>
<div id="editable" contenteditable=true>editor</div>
</div>
<script>
"use strict";
test(() => {
const button = document.querySelector("#button1");
button.focus();
assert_equals(document.activeElement, button, "Sanity check: the button must start focused");
button.disabled = true;
assert_not_equals(document.activeElement, button, "After disabling, the button must no longer be focused");
assert_equals(document.activeElement, document.body, "After disabling, the body must be focused");
}, "Disabling the active element (making it inert)");
test(() => {
const button = document.querySelector("#button2");
button.focus();
assert_equals(document.activeElement, button, "Sanity check: the button must start focused");
button.hidden = true;
assert_not_equals(document.activeElement, button, "After hiding, the button must no longer be focused");
assert_equals(document.activeElement, document.body, "After hiding, the body must be focused");
}, "Hiding the active element");
test(() => {
const button = document.querySelector("#button3");
button.focus();
assert_equals(document.activeElement, button, "Sanity check: the button must start focused");
button.remove();
assert_not_equals(document.activeElement, button, "After removing, the button must no longer be focused");
assert_equals(document.activeElement, document.body, "After removing, the body must be focused");
}, "Removing the active element from the DOM");
test(() => {
const fieldset = document.querySelector("#fieldset1");
const button = document.querySelector("#button4");
button.focus();
assert_equals(document.activeElement, button, "Sanity check: the button must start focused");
fieldset.disabled = true;
assert_not_equals(document.activeElement, button, "After disabling ancestor fieldset, the button must no longer be focused");
assert_equals(document.activeElement, document.body, "After disabling ancestor fieldset, the body must be focused");
}, "Disabling <fieldset> affects its descendants");
test(() => {
const fieldset = document.querySelector("#fieldset2");
const button = document.querySelector("#button5");
button.focus();
assert_equals(document.activeElement, button, "Sanity check: the button must start focused");
fieldset.insertBefore(document.createElement("legend"), fieldset.firstChild);
assert_not_equals(document.activeElement, button, "After changing a legend element, the button must no longer be focused");
assert_equals(document.activeElement, document.body, "After changing a legend element, the body must be focused");
}, "Changing the first legend element in disabled <fieldset>");
test(() => {
const div = document.querySelector("#div");
div.focus();
assert_equals(document.activeElement, div, "Sanity check: the div must start focused");
div.removeAttribute("tabindex");
assert_not_equals(document.activeElement, div, "After removing tabindex, the div must no longer be focused");
assert_equals(document.activeElement, document.body, "After removing tabindex, the body must be focused");
}, "Removing the tabindex attribute from a div");
test(() => {
const div = document.querySelector("#editable");
div.focus();
assert_equals(document.activeElement, div, "Sanity check: the div must start focused");
div.contentEditable = false;
assert_not_equals(document.activeElement, div, "After disabling contentEditable, the div must no longer be focused");
assert_equals(document.activeElement, document.body, "After disabling contentEditable, the body must be focused");
}, "Disabling contenteditable");
</script>
|
