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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>The details element</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
<link rel=help href="https://html.spec.whatwg.org/multipage/#the-details-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<details id=details1>
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<details id=details2>
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<details id=details3 style="display:none;">
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<details id=details4>
</details>
<details id=details6>
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<details id=details7>
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<details id=details8>
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<script>
window.details9TogglePromise = new Promise(resolve => {
window.details9TogglePromiseResolver = resolve;
});
</script>
<details id=details9 ontoggle="window.details9TogglePromiseResolver()" open>
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<details id=details10>
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>
<script>
var t1 = async_test("Adding open to 'details' should fire a toggle event at the 'details' element, with 'oldState: closed' and 'newState: open'"),
t2 = async_test("Adding open to 'details' and then removing open from that 'details' should fire only one toggle event at the 'details' element, with 'oldState: closed' and 'newState: closed'"),
t3 = async_test("Adding open to 'details' (display:none) should fire a toggle event at the 'details' element, with 'oldState: closed' and 'newState: open'"),
t4 = async_test("Adding open to 'details' (no children) should fire a toggle event at the 'details' element, with 'oldState: closed' and 'newState: open'"),
t6 = async_test("Adding open to 'details' and then removing open from that 'details' and then again adding open to that 'details' should fire only one toggle event at the 'details' element, with 'oldState: closed' and 'newState: closed'"),
t7 = async_test("Adding open to 'details' using setAttribute('open', '') should fire a toggle event at the 'details' element, with 'oldState: closed' and 'newState: open'"),
t8 = async_test("Adding open to 'details' and then calling removeAttribute('open') should fire only one toggle event at the 'details' element, with 'oldState: closed' and 'newState: closed'"),
t9 = async_test("Setting open=true on an opened 'details' element should not fire a toggle event at the 'details' element"),
t10 = async_test("Setting open=false on a closed 'details' element should not fire a toggle event at the 'details' element"),
details1 = document.getElementById('details1'),
details2 = document.getElementById('details2'),
details3 = document.getElementById('details3'),
details4 = document.getElementById('details4'),
details6 = document.getElementById('details6'),
details7 = document.getElementById('details7'),
details8 = document.getElementById('details8'),
details9 = document.getElementById('details9'),
details10 = document.getElementById('details10'),
loop=false;
function testEvent(evt) {
assert_true(evt.isTrusted, "event is trusted");
assert_false(evt.bubbles, "event doesn't bubble");
assert_false(evt.cancelable, "event is not cancelable");
assert_equals(Object.getPrototypeOf(evt), ToggleEvent.prototype, "Prototype of toggle event is ToggleEvent.prototype");
}
details1.ontoggle = t1.step_func_done(function(evt) {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "open");
assert_true(details1.open);
testEvent(evt)
});
details1.open = true; // opens details1
details2.ontoggle = t2.step_func_done(function(evt) {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "closed");
assert_false(details2.open);
testEvent(evt);
});
details2.open = true;
details2.open = false; // closes details2
details3.ontoggle = t3.step_func_done(function(evt) {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "open");
assert_true(details3.open);
testEvent(evt);
});
details3.open = true; // opens details3
details4.ontoggle = t4.step_func_done(function(evt) {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "open");
assert_true(details4.open);
testEvent(evt);
});
details4.open = true; // opens details4
async_test(function(t) {
var details5 = document.createElement("details");
details5.ontoggle = t.step_func_done(function(evt) {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "open");
assert_true(details5.open);
testEvent(evt);
})
details5.open = true;
}, "Adding open to 'details' (not in the document) should fire a toggle event at the 'details' element, with 'oldState: closed' and 'newState: open'");
details6.open = true;
details6.open = false;
details6.ontoggle = t6.step_func(function(evt) {
if (loop) {
assert_unreached("toggle event fired twice");
} else {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "closed");
loop = true;
}
});
t6.step_timeout(function() {
assert_true(loop);
t6.done();
}, 0);
details7.ontoggle = t7.step_func_done(function(evt) {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "open");
assert_true(details7.open);
testEvent(evt)
});
details7.setAttribute('open', ''); // opens details7
details8.ontoggle = t8.step_func_done(function(evt) {
assert_equals(evt.oldState, "closed");
assert_equals(evt.newState, "closed");
assert_false(details8.open);
testEvent(evt)
});
details8.open = true;
details8.removeAttribute('open'); // closes details8
window.details9TogglePromise.then(t9.step_func(() => {
// The toggle event should be fired once when declaring details9 with open
// attribute.
details9.ontoggle = t9.step_func(() => {
assert_unreached("toggle event fired twice on opened details element");
});
// setting open=true on details9 should not fire another event since it is
// already open.
details9.open = true;
t9.step_timeout(() => {
assert_true(details9.open);
t9.done();
});
}));
details10.ontoggle = t10.step_func_done(function(evt) {
assert_unreached("toggle event fired on closed details element");
});
details10.open = false; // closes details10
t10.step_timeout(function() {
assert_false(details10.open);
t10.done();
}, 0);
async_test(function(t) {
new DOMParser().parseFromString("<details open>", "text/html").querySelector("details").ontoggle = t.step_func_done(function(e) {
assert_true(e.target.open);
});
}, "Setting open from the parser fires a toggle event");
</script>
|
