OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <link rel="help" href="http://www.whatwg.org/specs/web-apps/current-work/multipa
ge/interactive-elements.html#attr-details-open"> |
| 5 <script src="../../resources/js-test.js"></script> |
| 6 </head> |
| 7 <body> |
| 8 <details id="details"> |
| 9 <summary>details</summary> |
| 10 <input> |
| 11 </details> |
| 12 <script> |
| 13 description("Tests that a 'toggle' event is fired asynchronously whenever the op
en attribute is added to or removed from a details element."); |
| 14 window.jsTestIsAsync = true; |
| 15 |
| 16 var toggleEventCount = 0; |
| 17 var testEvent; |
| 18 |
| 19 function handleToggleEvent(ev) { |
| 20 testEvent = ev; |
| 21 shouldBe("testEvent.__proto__", "Event.prototype"); |
| 22 shouldBeEqualToString("testEvent.type", "toggle"); |
| 23 ++toggleEventCount; |
| 24 } |
| 25 |
| 26 function checkSingleToggleEvent() { |
| 27 shouldBe("toggleEventCount", "1"); |
| 28 shouldBeTrue("details.open"); |
| 29 testEventsCoalesced(); |
| 30 } |
| 31 |
| 32 function testToogleEventFired() { |
| 33 shouldBe("toggleEventCount", "0"); |
| 34 details.open = true; |
| 35 shouldBe("toggleEventCount", "0"); |
| 36 setTimeout(checkSingleToggleEvent, 0); |
| 37 } |
| 38 |
| 39 function checkEventsCoalesced() { |
| 40 shouldBe("toggleEventCount", "2"); |
| 41 shouldBeFalse("details.open"); |
| 42 finishJSTest(); |
| 43 } |
| 44 |
| 45 function testEventsCoalesced() { |
| 46 // When the open attribute is toggled several times in succession, |
| 47 // these steps essentially get coalesced so that only one event is |
| 48 // fired. |
| 49 details.open = false; |
| 50 details.open = true; |
| 51 details.open = false; |
| 52 setTimeout(checkEventsCoalesced, 0); |
| 53 } |
| 54 |
| 55 var details = document.getElementById("details"); |
| 56 details.addEventListener("toggle", handleToggleEvent); |
| 57 shouldBeFalse("details.open"); |
| 58 testToogleEventFired(); |
| 59 </script> |
| 60 </body> |
| 61 </html> |
OLD | NEW |