| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="help" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#attr-details-open"> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <details id="details" ontoggle="handleToggleEventFromHTMLAttribute(event)"> |
| <summary>details</summary> |
| <input> |
| </details> |
| <script> |
| description("Tests that a 'toggle' event is fired asynchronously whenever the open attribute is added to or removed from a details element."); |
| window.jsTestIsAsync = true; |
| |
| var toggleEventCount = 0; |
| var toggleEventCountFromHTMLAttribute = 0; |
| var testEvent; |
| |
| function handleToggleEventFromHTMLAttribute(ev) { |
| testEvent = ev; |
| shouldBe("testEvent.__proto__", "Event.prototype"); |
| shouldBeEqualToString("testEvent.type", "toggle"); |
| ++toggleEventCountFromHTMLAttribute; |
| } |
| |
| function handleToggleEvent(ev) { |
| testEvent = ev; |
| shouldBe("testEvent.__proto__", "Event.prototype"); |
| shouldBeEqualToString("testEvent.type", "toggle"); |
| ++toggleEventCount; |
| } |
| |
| function checkSingleToggleEvent() { |
| shouldBe("toggleEventCount", "1"); |
| shouldBe("toggleEventCountFromHTMLAttribute", "1"); |
| shouldBeTrue("details.open"); |
| testEventsCoalesced(); |
| } |
| |
| function testToogleEventFired() { |
| shouldBe("toggleEventCount", "0"); |
| shouldBe("toggleEventCountFromHTMLAttribute", "0"); |
| details.open = true; |
| shouldBe("toggleEventCount", "0"); |
| shouldBe("toggleEventCountFromHTMLAttribute", "0"); |
| setTimeout(checkSingleToggleEvent, 0); |
| } |
| |
| function checkEventsCoalesced() { |
| shouldBe("toggleEventCount", "2"); |
| shouldBe("toggleEventCountFromHTMLAttribute", "2"); |
| shouldBeFalse("details.open"); |
| finishJSTest(); |
| } |
| |
| function testEventsCoalesced() { |
| // When the open attribute is toggled several times in succession, |
| // these steps essentially get coalesced so that only one event is |
| // fired. |
| details.open = false; |
| details.open = true; |
| details.open = false; |
| setTimeout(checkEventsCoalesced, 0); |
| } |
| |
| var details = document.getElementById("details"); |
| shouldBe("details.ontoggle.__proto__", "Function.prototype"); |
| details.addEventListener("toggle", handleToggleEvent); |
| shouldBeFalse("details.open"); |
| testToogleEventFired(); |
| </script> |
| </body> |
| </html> |
