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" 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 op
en 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> | |
OLD | NEW |