| <!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> |
| <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"), |
| details1 = document.getElementById('details1'), |
| details2 = document.getElementById('details2'), |
| details3 = document.getElementById('details3'), |
| details4 = document.getElementById('details4'), |
| details6 = document.getElementById('details6'), |
| 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; |
| } |
| }); |
| setTimeout(t6.step_func(function() { |
| assert_true(loop); |
| t6.done(); |
| }), 0); |
| </script> |
