11cb0ef41Sopenharmony_ci<!DOCTYPE html> 21cb0ef41Sopenharmony_ci<html> 31cb0ef41Sopenharmony_ci<head> 41cb0ef41Sopenharmony_ci <meta charset="utf-8"> 51cb0ef41Sopenharmony_ci <title>Event.cancelBubble</title> 61cb0ef41Sopenharmony_ci <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> 71cb0ef41Sopenharmony_ci <link rel="help" href="https://dom.spec.whatwg.org/#dom-event-cancelbubble"> 81cb0ef41Sopenharmony_ci <meta name="flags" content="dom"> 91cb0ef41Sopenharmony_ci <script src="/resources/testharness.js"></script> 101cb0ef41Sopenharmony_ci <script src="/resources/testharnessreport.js"></script> 111cb0ef41Sopenharmony_ci</head> 121cb0ef41Sopenharmony_ci<body> 131cb0ef41Sopenharmony_ci <div id="outer"> 141cb0ef41Sopenharmony_ci <div id="middle"> 151cb0ef41Sopenharmony_ci <div id="inner"></div> 161cb0ef41Sopenharmony_ci </div> 171cb0ef41Sopenharmony_ci </div> 181cb0ef41Sopenharmony_ci <script> 191cb0ef41Sopenharmony_citest(function () { 201cb0ef41Sopenharmony_ci // See https://dom.spec.whatwg.org/#stop-propagation-flag 211cb0ef41Sopenharmony_ci var e = document.createEvent('Event'); 221cb0ef41Sopenharmony_ci assert_false(e.cancelBubble, "cancelBubble must be false after event creation."); 231cb0ef41Sopenharmony_ci}, "cancelBubble must be false when an event is initially created."); 241cb0ef41Sopenharmony_ci 251cb0ef41Sopenharmony_citest(function () { 261cb0ef41Sopenharmony_ci // See https://dom.spec.whatwg.org/#concept-event-initialize 271cb0ef41Sopenharmony_ci 281cb0ef41Sopenharmony_ci // Event which bubbles. 291cb0ef41Sopenharmony_ci var one = document.createEvent('Event'); 301cb0ef41Sopenharmony_ci one.cancelBubble = true; 311cb0ef41Sopenharmony_ci one.initEvent('foo', true/*bubbles*/, false/*cancelable*/); 321cb0ef41Sopenharmony_ci assert_false(one.cancelBubble, "initEvent() must set cancelBubble to false. [bubbles=true]"); 331cb0ef41Sopenharmony_ci // Re-initialization. 341cb0ef41Sopenharmony_ci one.cancelBubble = true; 351cb0ef41Sopenharmony_ci one.initEvent('foo', true/*bubbles*/, false/*cancelable*/); 361cb0ef41Sopenharmony_ci assert_false(one.cancelBubble, "2nd initEvent() call must set cancelBubble to false. [bubbles=true]"); 371cb0ef41Sopenharmony_ci 381cb0ef41Sopenharmony_ci // Event which doesn't bubble. 391cb0ef41Sopenharmony_ci var two = document.createEvent('Event'); 401cb0ef41Sopenharmony_ci two.cancelBubble = true; 411cb0ef41Sopenharmony_ci two.initEvent('foo', false/*bubbles*/, false/*cancelable*/); 421cb0ef41Sopenharmony_ci assert_false(two.cancelBubble, "initEvent() must set cancelBubble to false. [bubbles=false]"); 431cb0ef41Sopenharmony_ci // Re-initialization. 441cb0ef41Sopenharmony_ci two.cancelBubble = true; 451cb0ef41Sopenharmony_ci two.initEvent('foo', false/*bubbles*/, false/*cancelable*/); 461cb0ef41Sopenharmony_ci assert_false(two.cancelBubble, "2nd initEvent() call must set cancelBubble to false. [bubbles=false]"); 471cb0ef41Sopenharmony_ci}, "Initializing an event must set cancelBubble to false."); 481cb0ef41Sopenharmony_ci 491cb0ef41Sopenharmony_citest(function () { 501cb0ef41Sopenharmony_ci // See https://dom.spec.whatwg.org/#dom-event-stoppropagation 511cb0ef41Sopenharmony_ci var e = document.createEvent('Event'); 521cb0ef41Sopenharmony_ci e.stopPropagation(); 531cb0ef41Sopenharmony_ci assert_true(e.cancelBubble, "stopPropagation() must set cancelBubble to true."); 541cb0ef41Sopenharmony_ci}, "stopPropagation() must set cancelBubble to true."); 551cb0ef41Sopenharmony_ci 561cb0ef41Sopenharmony_citest(function () { 571cb0ef41Sopenharmony_ci // See https://dom.spec.whatwg.org/#dom-event-stopimmediatepropagation 581cb0ef41Sopenharmony_ci var e = document.createEvent('Event'); 591cb0ef41Sopenharmony_ci e.stopImmediatePropagation(); 601cb0ef41Sopenharmony_ci assert_true(e.cancelBubble, "stopImmediatePropagation() must set cancelBubble to true."); 611cb0ef41Sopenharmony_ci}, "stopImmediatePropagation() must set cancelBubble to true."); 621cb0ef41Sopenharmony_ci 631cb0ef41Sopenharmony_citest(function () { 641cb0ef41Sopenharmony_ci var one = document.createEvent('Event'); 651cb0ef41Sopenharmony_ci one.stopPropagation(); 661cb0ef41Sopenharmony_ci one.cancelBubble = false; 671cb0ef41Sopenharmony_ci assert_true(one.cancelBubble, "cancelBubble must still be true after attempting to set it to false."); 681cb0ef41Sopenharmony_ci}, "Event.cancelBubble=false must have no effect."); 691cb0ef41Sopenharmony_ci 701cb0ef41Sopenharmony_citest(function (t) { 711cb0ef41Sopenharmony_ci var outer = document.getElementById('outer'); 721cb0ef41Sopenharmony_ci var middle = document.getElementById('middle'); 731cb0ef41Sopenharmony_ci var inner = document.getElementById('inner'); 741cb0ef41Sopenharmony_ci 751cb0ef41Sopenharmony_ci outer.addEventListener('barbaz', t.step_func(function () { 761cb0ef41Sopenharmony_ci assert_unreached("Setting Event.cancelBubble=false after setting Event.cancelBubble=true should have no effect."); 771cb0ef41Sopenharmony_ci }), false/*useCapture*/); 781cb0ef41Sopenharmony_ci 791cb0ef41Sopenharmony_ci middle.addEventListener('barbaz', function (e) { 801cb0ef41Sopenharmony_ci e.cancelBubble = true;// Stop propagation. 811cb0ef41Sopenharmony_ci e.cancelBubble = false;// Should be a no-op. 821cb0ef41Sopenharmony_ci }, false/*useCapture*/); 831cb0ef41Sopenharmony_ci 841cb0ef41Sopenharmony_ci var barbazEvent = document.createEvent('Event'); 851cb0ef41Sopenharmony_ci barbazEvent.initEvent('barbaz', true/*bubbles*/, false/*cancelable*/); 861cb0ef41Sopenharmony_ci inner.dispatchEvent(barbazEvent); 871cb0ef41Sopenharmony_ci}, "Event.cancelBubble=false must have no effect during event propagation."); 881cb0ef41Sopenharmony_ci 891cb0ef41Sopenharmony_citest(function () { 901cb0ef41Sopenharmony_ci // See https://dom.spec.whatwg.org/#concept-event-dispatch 911cb0ef41Sopenharmony_ci // "14. Unset event’s [...] stop propagation flag," 921cb0ef41Sopenharmony_ci var e = document.createEvent('Event'); 931cb0ef41Sopenharmony_ci e.initEvent('foobar', true/*bubbles*/, true/*cancelable*/); 941cb0ef41Sopenharmony_ci document.body.addEventListener('foobar', function listener(e) { 951cb0ef41Sopenharmony_ci e.stopPropagation(); 961cb0ef41Sopenharmony_ci }); 971cb0ef41Sopenharmony_ci document.body.dispatchEvent(e); 981cb0ef41Sopenharmony_ci assert_false(e.cancelBubble, "cancelBubble must be false after an event has been dispatched."); 991cb0ef41Sopenharmony_ci}, "cancelBubble must be false after an event has been dispatched."); 1001cb0ef41Sopenharmony_ci 1011cb0ef41Sopenharmony_citest(function (t) { 1021cb0ef41Sopenharmony_ci var outer = document.getElementById('outer'); 1031cb0ef41Sopenharmony_ci var middle = document.getElementById('middle'); 1041cb0ef41Sopenharmony_ci var inner = document.getElementById('inner'); 1051cb0ef41Sopenharmony_ci 1061cb0ef41Sopenharmony_ci var propagationStopper = function (e) { 1071cb0ef41Sopenharmony_ci e.cancelBubble = true; 1081cb0ef41Sopenharmony_ci }; 1091cb0ef41Sopenharmony_ci 1101cb0ef41Sopenharmony_ci // Bubble phase 1111cb0ef41Sopenharmony_ci middle.addEventListener('bar', propagationStopper, false/*useCapture*/); 1121cb0ef41Sopenharmony_ci outer.addEventListener('bar', t.step_func(function listenerOne() { 1131cb0ef41Sopenharmony_ci assert_unreached("Setting cancelBubble=true should stop the event from bubbling further."); 1141cb0ef41Sopenharmony_ci }), false/*useCapture*/); 1151cb0ef41Sopenharmony_ci 1161cb0ef41Sopenharmony_ci var barEvent = document.createEvent('Event'); 1171cb0ef41Sopenharmony_ci barEvent.initEvent('bar', true/*bubbles*/, false/*cancelable*/); 1181cb0ef41Sopenharmony_ci inner.dispatchEvent(barEvent); 1191cb0ef41Sopenharmony_ci 1201cb0ef41Sopenharmony_ci // Capture phase 1211cb0ef41Sopenharmony_ci outer.addEventListener('qux', propagationStopper, true/*useCapture*/); 1221cb0ef41Sopenharmony_ci middle.addEventListener('qux', t.step_func(function listenerTwo() { 1231cb0ef41Sopenharmony_ci assert_unreached("Setting cancelBubble=true should stop the event from propagating further, including during the Capture Phase."); 1241cb0ef41Sopenharmony_ci }), true/*useCapture*/); 1251cb0ef41Sopenharmony_ci 1261cb0ef41Sopenharmony_ci var quxEvent = document.createEvent('Event'); 1271cb0ef41Sopenharmony_ci quxEvent.initEvent('qux', false/*bubbles*/, false/*cancelable*/); 1281cb0ef41Sopenharmony_ci inner.dispatchEvent(quxEvent); 1291cb0ef41Sopenharmony_ci}, "Event.cancelBubble=true must set the stop propagation flag."); 1301cb0ef41Sopenharmony_ci </script> 1311cb0ef41Sopenharmony_ci</body> 1321cb0ef41Sopenharmony_ci</html> 133