third_party/WebKit/LayoutTests/fast/html/details-open-toggle-event.html

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