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
|
<!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 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=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 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>
<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"),
t2 = async_test("Removing open from 'details' should fire a toggle event at the 'details' element"),
t3 = async_test("Adding open to 'details' (display:none) should fire a toggle event at the 'details' element"),
t4 = async_test("Adding open from 'details' (no children) should fire a toggle event at the 'details' element"),
t6 = async_test("Calling open twice on 'details' fires only one toggle event"),
t7 = async_test("Calling setAttribute('open', '') to 'details' should fire a toggle event at the 'details' element"),
t8 = async_test("Calling removeAttribute('open') to 'details' should fire a toggle event at the 'details' element"),
t9 = async_test("Setting open=true to opened 'details' element should not fire a toggle event at the 'details' element"),
t10 = async_test("Setting open=false to 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), Event.prototype, "Prototype of toggle event is Event.prototype");
}
details1.ontoggle = t1.step_func_done(function(evt) {
assert_true(details1.open);
testEvent(evt)
});
details1.open = true; // opens details1
details2.ontoggle = t2.step_func_done(function(evt) {
assert_false(details2.open);
testEvent(evt);
});
details2.open = false; // closes details2
details3.ontoggle = t3.step_func_done(function(evt) {
assert_true(details3.open);
testEvent(evt);
});
details3.open = true; // opens details3
details4.ontoggle = t4.step_func_done(function(evt) {
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_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");
details6.open = true;
details6.open = false;
details6.ontoggle = t6.step_func(function() {
if (loop) {
assert_unreached("toggle event fired twice");
} else {
loop = true;
}
});
t6.step_timeout(function() {
assert_true(loop);
t6.done();
}, 0);
details7.ontoggle = t7.step_func_done(function(evt) {
assert_true(details7.open);
testEvent(evt)
});
details7.setAttribute('open', ''); // opens details7
details8.ontoggle = t8.step_func_done(function(evt) {
assert_false(details8.open);
testEvent(evt)
});
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);
</script>
|
