Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/interactive-elements/the-details-element/toggleEvent.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset=utf-8>
<title>The details element</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
<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>