1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Event.cancelBubble</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://dom.spec.whatwg.org/#dom-event-cancelbubble">
<meta name="flags" content="dom">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
<script>
test(function () {
// See https://dom.spec.whatwg.org/#stop-propagation-flag
var e = document.createEvent('Event');
assert_false(e.cancelBubble, "cancelBubble must be false after event creation.");
}, "cancelBubble must be false when an event is initially created.");
test(function () {
// See https://dom.spec.whatwg.org/#concept-event-initialize
// Event which bubbles.
var one = document.createEvent('Event');
one.cancelBubble = true;
one.initEvent('foo', true/*bubbles*/, false/*cancelable*/);
assert_false(one.cancelBubble, "initEvent() must set cancelBubble to false. [bubbles=true]");
// Re-initialization.
one.cancelBubble = true;
one.initEvent('foo', true/*bubbles*/, false/*cancelable*/);
assert_false(one.cancelBubble, "2nd initEvent() call must set cancelBubble to false. [bubbles=true]");
// Event which doesn't bubble.
var two = document.createEvent('Event');
two.cancelBubble = true;
two.initEvent('foo', false/*bubbles*/, false/*cancelable*/);
assert_false(two.cancelBubble, "initEvent() must set cancelBubble to false. [bubbles=false]");
// Re-initialization.
two.cancelBubble = true;
two.initEvent('foo', false/*bubbles*/, false/*cancelable*/);
assert_false(two.cancelBubble, "2nd initEvent() call must set cancelBubble to false. [bubbles=false]");
}, "Initializing an event must set cancelBubble to false.");
test(function () {
// See https://dom.spec.whatwg.org/#dom-event-stoppropagation
var e = document.createEvent('Event');
e.stopPropagation();
assert_true(e.cancelBubble, "stopPropagation() must set cancelBubble to true.");
}, "stopPropagation() must set cancelBubble to true.");
test(function () {
// See https://dom.spec.whatwg.org/#dom-event-stopimmediatepropagation
var e = document.createEvent('Event');
e.stopImmediatePropagation();
assert_true(e.cancelBubble, "stopImmediatePropagation() must set cancelBubble to true.");
}, "stopImmediatePropagation() must set cancelBubble to true.");
test(function () {
var one = document.createEvent('Event');
one.stopPropagation();
one.cancelBubble = false;
assert_true(one.cancelBubble, "cancelBubble must still be true after attempting to set it to false.");
}, "Event.cancelBubble=false must have no effect.");
test(function (t) {
var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
outer.addEventListener('barbaz', t.step_func(function () {
assert_unreached("Setting Event.cancelBubble=false after setting Event.cancelBubble=true should have no effect.");
}), false/*useCapture*/);
middle.addEventListener('barbaz', function (e) {
e.cancelBubble = true;// Stop propagation.
e.cancelBubble = false;// Should be a no-op.
}, false/*useCapture*/);
var barbazEvent = document.createEvent('Event');
barbazEvent.initEvent('barbaz', true/*bubbles*/, false/*cancelable*/);
inner.dispatchEvent(barbazEvent);
}, "Event.cancelBubble=false must have no effect during event propagation.");
test(function () {
// See https://dom.spec.whatwg.org/#concept-event-dispatch
// "14. Unset event’s [...] stop propagation flag,"
var e = document.createEvent('Event');
e.initEvent('foobar', true/*bubbles*/, true/*cancelable*/);
document.body.addEventListener('foobar', function listener(e) {
e.stopPropagation();
});
document.body.dispatchEvent(e);
assert_false(e.cancelBubble, "cancelBubble must be false after an event has been dispatched.");
}, "cancelBubble must be false after an event has been dispatched.");
test(function (t) {
var outer = document.getElementById('outer');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
var propagationStopper = function (e) {
e.cancelBubble = true;
};
// Bubble phase
middle.addEventListener('bar', propagationStopper, false/*useCapture*/);
outer.addEventListener('bar', t.step_func(function listenerOne() {
assert_unreached("Setting cancelBubble=true should stop the event from bubbling further.");
}), false/*useCapture*/);
var barEvent = document.createEvent('Event');
barEvent.initEvent('bar', true/*bubbles*/, false/*cancelable*/);
inner.dispatchEvent(barEvent);
// Capture phase
outer.addEventListener('qux', propagationStopper, true/*useCapture*/);
middle.addEventListener('qux', t.step_func(function listenerTwo() {
assert_unreached("Setting cancelBubble=true should stop the event from propagating further, including during the Capture Phase.");
}), true/*useCapture*/);
var quxEvent = document.createEvent('Event');
quxEvent.initEvent('qux', false/*bubbles*/, false/*cancelable*/);
inner.dispatchEvent(quxEvent);
}, "Event.cancelBubble=true must set the stop propagation flag.");
</script>
</body>
</html>
|
