Event-dispatch-bubbles-true.html (3604B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title> Event.bubbles attribute is set to false </title> 4 <link rel="help" href="https://dom.spec.whatwg.org/#dom-event-initevent"> 5 <link rel="help" href="https://dom.spec.whatwg.org/#concept-event-dispatch"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id=log></div> 9 <table id="table" border="1" style="display: none"> 10 <tbody id="table-body"> 11 <tr id="table-row"> 12 <td id="table-cell">Shady Grove</td> 13 <td>Aeolian</td> 14 </tr> 15 <tr id="parent"> 16 <td id="target">Over the river, Charlie</td> 17 <td>Dorian</td> 18 </tr> 19 </tbody> 20 </table> 21 <script> 22 function concatReverse(a) { 23 return a.concat(a.map(function(x) { return x }).reverse()); 24 } 25 26 function targetsForDocumentChain(document) { 27 return [ 28 document, 29 document.documentElement, 30 document.getElementsByTagName("body")[0], 31 document.getElementById("table"), 32 document.getElementById("table-body"), 33 document.getElementById("parent") 34 ]; 35 } 36 37 function testChain(document, targetParents, phases, event_type) { 38 var target = document.getElementById("target"); 39 var targets = targetParents.concat(target); 40 var expected_targets = concatReverse(targets); 41 42 var actual_targets = [], actual_phases = []; 43 var test_event = function(evt) { 44 actual_targets.push(evt.currentTarget); 45 actual_phases.push(evt.eventPhase); 46 } 47 48 for (var i = 0; i < targets.length; i++) { 49 targets[i].addEventListener(event_type, test_event, true); 50 targets[i].addEventListener(event_type, test_event, false); 51 } 52 53 var evt = document.createEvent("Event"); 54 evt.initEvent(event_type, true, true); 55 56 target.dispatchEvent(evt); 57 58 assert_array_equals(actual_targets, expected_targets, "targets"); 59 assert_array_equals(actual_phases, phases, "phases"); 60 } 61 62 var phasesForDocumentChain = [ 63 Event.CAPTURING_PHASE, 64 Event.CAPTURING_PHASE, 65 Event.CAPTURING_PHASE, 66 Event.CAPTURING_PHASE, 67 Event.CAPTURING_PHASE, 68 Event.CAPTURING_PHASE, 69 Event.AT_TARGET, 70 Event.AT_TARGET, 71 Event.BUBBLING_PHASE, 72 Event.BUBBLING_PHASE, 73 Event.BUBBLING_PHASE, 74 Event.BUBBLING_PHASE, 75 Event.BUBBLING_PHASE, 76 Event.BUBBLING_PHASE, 77 ]; 78 79 test(function () { 80 var chainWithWindow = [window].concat(targetsForDocumentChain(document)); 81 var phases = [Event.CAPTURING_PHASE].concat(phasesForDocumentChain, Event.BUBBLING_PHASE); 82 testChain(document, chainWithWindow, phases, "click"); 83 }, "In window.document with click event"); 84 85 test(function () { 86 testChain(document, targetsForDocumentChain(document), phasesForDocumentChain, "load"); 87 }, "In window.document with load event") 88 89 test(function () { 90 var documentClone = document.cloneNode(true); 91 testChain( 92 documentClone, targetsForDocumentChain(documentClone), phasesForDocumentChain, "click"); 93 }, "In window.document.cloneNode(true)"); 94 95 test(function () { 96 var newDocument = new Document(); 97 newDocument.appendChild(document.documentElement.cloneNode(true)); 98 testChain( 99 newDocument, targetsForDocumentChain(newDocument), phasesForDocumentChain, "click"); 100 }, "In new Document()"); 101 102 test(function () { 103 var HTMLDocument = document.implementation.createHTMLDocument(); 104 HTMLDocument.body.appendChild(document.getElementById("table").cloneNode(true)); 105 testChain( 106 HTMLDocument, targetsForDocumentChain(HTMLDocument), phasesForDocumentChain, "click"); 107 }, "In DOMImplementation.createHTMLDocument()"); 108 </script>