<!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>