| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Shadow DOM: Extensions to Event Interface</title> |
| <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| <meta name="assert" content="Event interface must have composedPath() as a method"> |
| <link rel="help" href="http://w3c.github.io/webcomponents/spec/shadow/#extensions-to-event-interface"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/event-path-test-helpers.js"></script> |
| </head> |
| <body> |
| <div id="log"></div> |
| <script> |
| |
| test(function () { |
| var event = new Event('my-event'); |
| assert_array_equals(event.composedPath(), []); |
| }, 'composedPath() must return an empty array when the event has not been dispatched'); |
| |
| test(function () { |
| var event = new Event('my-event'); |
| document.body.dispatchEvent(event); |
| assert_array_equals(event.composedPath(), []); |
| }, 'composedPath() must return an empty array when the event is no longer dispatched'); |
| |
| test(function () { |
| var event = new Event('my-event'); |
| assert_false(event.composed); |
| }, 'composed on EventInit must default to false'); |
| |
| test(function () { |
| var event = new Event('my-event', {composed: true}); |
| assert_true(event.composed); |
| |
| event = new Event('my-event', {composed: false}); |
| assert_false(event.composed); |
| }, 'composed on EventInit must set the composed flag'); |
| |
| /* |
| -SR: ShadowRoot -S: Slot target: (~) *: indicates start digit: event path order |
| A (4) --------------------------- A-SR (3) |
| + B ------------ B-SR + A1 (2) --- A1-SR (1) |
| + C + B1 --- B1-SR + A2-S + A1a (*; 0) |
| + D --- D-SR + B1a + B1b --- B1b-SR |
| + D1 + B1c-S + B1b1 |
| + B1b2 |
| */ |
| |
| function testComposedEvent(mode) { |
| test(function () { |
| var nodes = createFixedTestTree(mode); |
| var log = dispatchEventWithEventLog(nodes, nodes.A1a, new Event('my-event', {composed: true, bubbles: true})); |
| |
| var expectedPath = ['A1a', 'A1-SR', 'A1', 'A-SR', 'A']; |
| assert_array_equals(log.eventPath, expectedPath); |
| assert_equals(log.eventPath.length, log.pathAtTargets.length); |
| assert_array_equals(log.pathAtTargets[0], expectedPath); |
| assert_array_equals(log.pathAtTargets[1], expectedPath); |
| assert_array_equals(log.pathAtTargets[2], mode == 'open' ? expectedPath : ['A1', 'A-SR', 'A'], |
| 'composedPath must only contain unclosed nodes of the current target.'); |
| }, 'The event must propagate out of ' + mode + ' mode shadow boundaries when the composed flag is set'); |
| } |
| |
| testComposedEvent('open'); |
| testComposedEvent('closed'); |
| |
| /* |
| -SR: ShadowRoot -S: Slot target: (~) *: indicates start digit: event path order |
| A ------------------------------- A-SR |
| + B ------------ B-SR + A1 --- A1-SR (1) |
| + C + B1 --- B1-SR + A2-S + A1a (*; 0) |
| + D --- D-SR + B1a + B1b --- B1b-SR |
| + D1 + B1c-S + B1b1 |
| + B1b2 |
| */ |
| |
| function testNonComposedEvent(mode) { |
| test(function () { |
| var nodes = createFixedTestTree(mode); |
| var log = dispatchEventWithEventLog(nodes, nodes.A1a, new Event('my-event', {composed: false, bubbles: true})); |
| |
| var expectedPath = ['A1a', 'A1-SR']; |
| assert_array_equals(log.eventPath, expectedPath); |
| assert_equals(log.eventPath.length, log.pathAtTargets.length); |
| assert_array_equals(log.pathAtTargets[0], expectedPath); |
| assert_array_equals(log.pathAtTargets[1], expectedPath); |
| }, 'The event must not propagate out of ' + mode + ' mode shadow boundaries when the composed flag is unset'); |
| } |
| |
| testNonComposedEvent('open'); |
| testNonComposedEvent('closed'); |
| |
| /* |
| -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order |
| A ------------------------------- A-SR |
| + B ------------ B-SR + A1 ----------- A1-SR (1) |
| + C + B1 --- B1-SR + A2-S [*; 0-1] + A1a (*; 0) |
| + D --- D-SR + B1a + B1b --- B1b-SR |
| + D1 + B1c-S + B1b1 |
| + B1b2 |
| */ |
| |
| function testNonComposedEventWithRelatedTarget(mode) { |
| test(function () { |
| var nodes = createFixedTestTree(mode); |
| var log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {composed: false, bubbles: true, relatedTarget: nodes['A2-S']})); |
| |
| var expectedPath = ['A1a', 'A1-SR']; |
| assert_array_equals(log.eventPath, expectedPath); |
| assert_equals(log.eventPath.length, log.pathAtTargets.length); |
| assert_array_equals(log.pathAtTargets[0], expectedPath); |
| assert_array_equals(log.pathAtTargets[1], expectedPath); |
| assert_array_equals(log.relatedTargets, ['A2-S', 'A2-S']); |
| }, 'The event must not propagate out of ' + mode + ' mode shadow boundaries when the composed flag is unset on an event with relatedTarget'); |
| } |
| |
| testNonComposedEventWithRelatedTarget('open'); |
| testNonComposedEventWithRelatedTarget('closed'); |
| |
| /* |
| -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order |
| A ------------------------------------------------ A-SR |
| + B ------------ B-SR (4) + A1 --- A1-SR |
| + C + B1 (3) [0,3-4] --- B1-SR (2) + A2-S + A1a |
| + D --- D-SR + B1a (*; 0) + B1b [1-2] --- B1b-SR |
| + D1 + B1c-S (1) + B1b1 |
| + B1b2 [*] |
| */ |
| |
| function testScopedEventWithUnscopedRelatedTargetThroughSlot(mode) { |
| test(function () { |
| var nodes = createFixedTestTree(mode); |
| var log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {scoped: true, relatedTargetScoped: false, bubbles: true, relatedTarget: nodes['B1b2']})); |
| |
| var expectedPath = ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR']; |
| var pathExposedToB1a = ['B1a', 'B1', 'B-SR']; |
| assert_array_equals(log.eventPath, expectedPath); |
| assert_equals(log.eventPath.length, log.pathAtTargets.length); |
| assert_array_equals(log.pathAtTargets[0], mode == 'open' ? expectedPath : pathExposedToB1a); |
| assert_array_equals(log.pathAtTargets[1], expectedPath); |
| assert_array_equals(log.pathAtTargets[2], expectedPath); |
| assert_array_equals(log.pathAtTargets[3], mode == 'open' ? expectedPath : pathExposedToB1a); |
| assert_array_equals(log.pathAtTargets[4], mode == 'open' ? expectedPath : pathExposedToB1a); |
| assert_array_equals(log.relatedTargets, ['B1', 'B1b', 'B1b', 'B1', 'B1']); |
| }, 'The event must not propagate out of ' + mode + ' mode shadow tree of the target but must propagate out of inner shadow trees when the scoped flag is set'); |
| } |
| |
| testScopedEventWithUnscopedRelatedTargetThroughSlot('open'); |
| testScopedEventWithUnscopedRelatedTargetThroughSlot('closed'); |
| |
| /* |
| -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order |
| A ------------------------------- A-SR (3) |
| + B ------------ B-SR + A1 (2) ------- A1-SR (1) |
| + C + B1 --- B1-SR + A2-S [*; 0-3] + A1a (*; 0) |
| + D --- D-SR + B1a + B1b --- B1b-SR |
| + D1 + B1c-S + B1b1 |
| + B1b2 |
| */ |
| |
| function testComposedEventWithRelatedTarget(mode) { |
| test(function () { |
| var nodes = createFixedTestTree(mode); |
| log = dispatchEventWithEventLog(nodes, nodes.A1a, new MouseEvent('foo', {composed: true, bubbles: true, relatedTarget: nodes['A2-S']})); |
| |
| var expectedPath = ['A1a', 'A1-SR', 'A1', 'A-SR']; |
| var pathExposedToA1 = ['A1', 'A-SR']; |
| assert_array_equals(log.eventPath, expectedPath); |
| assert_equals(log.eventPath.length, log.pathAtTargets.length); |
| assert_array_equals(log.pathAtTargets[0], expectedPath); |
| assert_array_equals(log.pathAtTargets[1], expectedPath); |
| assert_array_equals(log.pathAtTargets[2], mode == 'open' ? expectedPath : pathExposedToA1); |
| assert_array_equals(log.pathAtTargets[3], mode == 'open' ? expectedPath : pathExposedToA1); |
| assert_array_equals(log.relatedTargets, ['A2-S', 'A2-S', 'A2-S', 'A2-S']); |
| }, 'The event must propagate out of ' + mode + ' mode shadow tree in which the relative target and the relative related target are the same'); |
| } |
| |
| testComposedEventWithRelatedTarget('open'); |
| testComposedEventWithRelatedTarget('closed'); |
| |
| /* |
| -SR: ShadowRoot -S: Slot target: (~) relatedTarget: [~] *: indicates start digit: event path order |
| A (8) [0-5,8] ---------------------------------------- A-SR (7) |
| + B (5) ------- B-SR (4) + A1 [6,7] --- A1-SR |
| + C + B1 (3) ------- B1-SR (2) + A2-S (6) + A1a [*] |
| + D --- D-SR + B1a (*; 0) + B1b ------- B1b-SR |
| + D1 + B1c-S (1) + B1b1 |
| + B1b2 |
| */ |
| |
| function testComposedEventThroughSlot(mode) { |
| test(function () { |
| var nodes = createFixedTestTree(mode); |
| log = dispatchEventWithEventLog(nodes, nodes.B1a, new MouseEvent('foo', {composed: true, bubbles: true, relatedTarget: nodes.A1a})); |
| |
| var expectedPath = ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A2-S', 'A-SR', 'A']; |
| var expectedRelatedTarget = ['A', 'A', 'A', 'A', 'A', 'A', 'A1', 'A1', 'A']; |
| var pathExposedToB1a = ['B1a', 'B1', 'B-SR', 'B', 'A']; |
| var pathExposedToB1cS = ['B1a', 'B1c-S', 'B1-SR', 'B1', 'B-SR', 'B', 'A']; |
| var pathExposedToB = [ 'B', 'A']; |
| var pathExposedToA1 = [ 'B', 'A2-S', 'A-SR', 'A']; |
| |
| assert_array_equals(log.eventPath, expectedPath); |
| assert_equals(log.eventPath.length, log.pathAtTargets.length); |
| assert_array_equals(log.pathAtTargets[0], mode == 'open' ? expectedPath : pathExposedToB1a); |
| assert_array_equals(log.pathAtTargets[1], mode == 'open' ? expectedPath : pathExposedToB1cS); |
| assert_array_equals(log.pathAtTargets[2], mode == 'open' ? expectedPath : pathExposedToB1cS); |
| assert_array_equals(log.pathAtTargets[3], mode == 'open' ? expectedPath : pathExposedToB1a); |
| assert_array_equals(log.pathAtTargets[4], mode == 'open' ? expectedPath : pathExposedToB1a); |
| assert_array_equals(log.pathAtTargets[5], mode == 'open' ? expectedPath : pathExposedToB); |
| assert_array_equals(log.pathAtTargets[6], mode == 'open' ? expectedPath : pathExposedToA1); |
| assert_array_equals(log.pathAtTargets[7], mode == 'open' ? expectedPath : pathExposedToA1); |
| assert_array_equals(log.pathAtTargets[8], mode == 'open' ? expectedPath : pathExposedToB); |
| assert_array_equals(log.relatedTargets, expectedRelatedTarget); |
| }, 'composedPath() must contain and only contain the unclosed nodes of target in ' + mode + ' mode shadow trees'); |
| } |
| |
| testComposedEventThroughSlot('open'); |
| testComposedEventThroughSlot('closed'); |
| |
| </script> |
| </body> |
| </html> |