LayoutTests/imported/w3c/web-platform-tests/shadow-dom/event-post-dispatch.html - WebKit - Git at Google

 <!DOCTYPE html>
 <title>Shadow DOM: Event dispatch post result for event properties.</title>
 <meta name="author" title="Eriko Kurimoto" href="mailto:elkurin@google.com">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="resources/shadow-dom.js"></script>
 <script src="resources/event-path-test-helpers.js"></script>

 <div id="test1">
   <div id="d1">
     <div id="target"></div>
   </div>
 </div>

 <script>
 let n1 = createTestTree(test1);
 document.body.appendChild(n1.test1);
 test(() => {
   let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: true }));
   assert_equals(log.event.target, n1.target);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch without ShadowRoots (composed: true).');

 test(() => {
   let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: false }));
   assert_equals(log.event.target, n1.target);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch without ShadowRoots (composed: false).');
 document.body.removeChild(n1.test1);
 </script>

 <div id="test2">
   <div id="host">
     <template id="sr" data-mode="open">
       <div id="target"></div>
     </template>
   </div>
 </div>

 <script>
 let n2 = createTestTree(test2);
 document.body.appendChild(n2.test2);
 test(() => {
   let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: true }));
   assert_equals(log.event.target, n2.host);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with an open ShadowRoot (composed: true).');

 test(() => {
   let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: false }));
   assert_equals(log.event.target, null);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with an open ShadowRoot (composed: false).');
 document.body.removeChild(n2.test2);
 </script>

 <div id="test3">
   <div id="host">
     <template id="sr" data-mode="closed">
       <div id="target"></div>
     </template>
   </div>
 </div>

 <script>
 let n3 = createTestTree(test3);
 document.body.appendChild(n3.test3);
 test(() => {
   let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: true }));
   assert_equals(log.event.target, n3.host);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with a closed ShadowRoot (composed: true).');

 test(() => {
   let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: false }));
   assert_equals(log.event.target, null);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with a closed ShadowRoot (composed: false).');
 document.body.removeChild(n3.test3);
 </script>

 <div id="test4">
   <div id="host1">
     <template id="sr" data-mode="open">
       <div id="host2">
         <template id="sr" data-mode="open">
           <div id="target"></div>
         </template>
       </div>
     </template>
   </div>
 </div>

 <script>
 let n4 = createTestTree(test4);
 document.body.appendChild(n4.test4);
 test(() => {
   let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: true }));
   assert_equals(log.event.target, n4.host1);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with nested ShadowRoots (composed: true).');

 test(() => {
   let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: false }));
   assert_equals(log.event.target, null);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with nested ShadowRoots (composed: false).');
 document.body.removeChild(n4.test4);
 </script>

 <div id="test5">
   <div id="host">
     <template id="sr" data-mode="open">
       <div id="relatedTarget">
         <div id="target"></div>
       </div>
     </template>
   </div>
 </div>

 <script>
 let n5 = createTestTree(test5);
 document.body.appendChild(n5.test5);
 test(() => {
   let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, compoesed: true, relatedTarget: n5.relatedTarget}));
   assert_equals(log.event.target, null);
   assert_equals(log.event.relatedTarget, null);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: true)');

 test(() => {
   let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, compoesed: false, relatedTarget: n5.relatedTarget}));
   assert_equals(log.event.target, null);
   assert_equals(log.event.relatedTarget, null);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: false)');
 document.body.removeChild(n5.test5);
 </script>

 <div id="test6">
   <div id="host">
     <template id="sr" data-mode="open">
       <div id="target"></div>
     </template>
   </div>
   <div id="relatedTarget"></div>
 </div>

 <script>
 let n6 = createTestTree(test6);
 document.body.appendChild(n6.test6);
 test(() => {
   let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n6.relatedTarget}));
   assert_equals(log.event.target, n6.host);
   assert_equals(log.event.relatedTarget, n6.relatedTarget);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: true)');

 test(() => {
   let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n6.relatedTarget}));
   assert_equals(log.event.target, null);
   assert_equals(log.event.relatedTarget, null);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: false)');
 document.body.removeChild(n6.test6);
 </script>

 <div id="test7">
   <div id="host1">
     <template id="sr1" data-mode="open">
       <div id="target"></div>
     </template>
   </div>
   <div id="host2">
     <template id="sr2" data-mode="open">
       <div id="relatedTarget"></div>
     </template>
   </div>
 </div>

 <script>
 let n7 = createTestTree(test7);
 document.body.appendChild(n7.test7);
 test(() => {
   let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n7.relatedTarget}));
   assert_equals(log.event.target, n7.host1);
   assert_equals(log.event.relatedTarget, n7.host2);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: true)');

 test(() => {
   let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n7.relatedTarget}));
   assert_equals(log.event.target, null);
   assert_equals(log.event.relatedTarget, null);
   assert_equals(log.event.eventPhase, 0);
   assert_equals(log.event.currentTarget, null);
   assert_equals(log.event.composedPath().length, 0);
 }, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: false)');
 document.body.removeChild(n7.test7);
 </script>
	<!DOCTYPE html>
	<title>Shadow DOM: Event dispatch post result for event properties.</title>
	<meta name="author" title="Eriko Kurimoto" href="mailto:elkurin@google.com">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="resources/shadow-dom.js"></script>
	<script src="resources/event-path-test-helpers.js"></script>

	<div id="test1">
	<div id="d1">
	<div id="target"></div>
	</div>
	</div>

	<script>
	let n1 = createTestTree(test1);
	document.body.appendChild(n1.test1);
	test(() => {
	let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: true }));
	assert_equals(log.event.target, n1.target);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch without ShadowRoots (composed: true).');

	test(() => {
	let log = dispatchEventWithEventLog(n1, n1.target, new Event('my-event', { bubbles: true, composed: false }));
	assert_equals(log.event.target, n1.target);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch without ShadowRoots (composed: false).');
	document.body.removeChild(n1.test1);
	</script>

	<div id="test2">
	<div id="host">
	<template id="sr" data-mode="open">
	<div id="target"></div>
	</template>
	</div>
	</div>

	<script>
	let n2 = createTestTree(test2);
	document.body.appendChild(n2.test2);
	test(() => {
	let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: true }));
	assert_equals(log.event.target, n2.host);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with an open ShadowRoot (composed: true).');

	test(() => {
	let log = dispatchEventWithEventLog(n2, n2.target, new Event('my-event', { bubbles: true, composed: false }));
	assert_equals(log.event.target, null);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with an open ShadowRoot (composed: false).');
	document.body.removeChild(n2.test2);
	</script>

	<div id="test3">
	<div id="host">
	<template id="sr" data-mode="closed">
	<div id="target"></div>
	</template>
	</div>
	</div>

	<script>
	let n3 = createTestTree(test3);
	document.body.appendChild(n3.test3);
	test(() => {
	let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: true }));
	assert_equals(log.event.target, n3.host);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with a closed ShadowRoot (composed: true).');

	test(() => {
	let log = dispatchEventWithEventLog(n3, n3.target, new Event('my-event', { bubbles: true, composed: false }));
	assert_equals(log.event.target, null);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with a closed ShadowRoot (composed: false).');
	document.body.removeChild(n3.test3);
	</script>

	<div id="test4">
	<div id="host1">
	<template id="sr" data-mode="open">
	<div id="host2">
	<template id="sr" data-mode="open">
	<div id="target"></div>
	</template>
	</div>
	</template>
	</div>
	</div>

	<script>
	let n4 = createTestTree(test4);
	document.body.appendChild(n4.test4);
	test(() => {
	let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: true }));
	assert_equals(log.event.target, n4.host1);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with nested ShadowRoots (composed: true).');

	test(() => {
	let log = dispatchEventWithEventLog(n4, n4.target, new Event('my-event', { bubbles: true, composed: false }));
	assert_equals(log.event.target, null);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with nested ShadowRoots (composed: false).');
	document.body.removeChild(n4.test4);
	</script>

	<div id="test5">
	<div id="host">
	<template id="sr" data-mode="open">
	<div id="relatedTarget">
	<div id="target"></div>
	</div>
	</template>
	</div>
	</div>

	<script>
	let n5 = createTestTree(test5);
	document.body.appendChild(n5.test5);
	test(() => {
	let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, compoesed: true, relatedTarget: n5.relatedTarget}));
	assert_equals(log.event.target, null);
	assert_equals(log.event.relatedTarget, null);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: true)');

	test(() => {
	let log = dispatchEventWithEventLog(n5, n5.target, new MouseEvent('my-event', {bubbles: true, compoesed: false, relatedTarget: n5.relatedTarget}));
	assert_equals(log.event.target, null);
	assert_equals(log.event.relatedTarget, null);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with relatedTarget in the same shadow tree. (composed: false)');
	document.body.removeChild(n5.test5);
	</script>

	<div id="test6">
	<div id="host">
	<template id="sr" data-mode="open">
	<div id="target"></div>
	</template>
	</div>
	<div id="relatedTarget"></div>
	</div>

	<script>
	let n6 = createTestTree(test6);
	document.body.appendChild(n6.test6);
	test(() => {
	let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n6.relatedTarget}));
	assert_equals(log.event.target, n6.host);
	assert_equals(log.event.relatedTarget, n6.relatedTarget);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: true)');

	test(() => {
	let log = dispatchEventWithEventLog(n6, n6.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n6.relatedTarget}));
	assert_equals(log.event.target, null);
	assert_equals(log.event.relatedTarget, null);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with relatedTarget in the document tree and the shadow tree. (composed: false)');
	document.body.removeChild(n6.test6);
	</script>

	<div id="test7">
	<div id="host1">
	<template id="sr1" data-mode="open">
	<div id="target"></div>
	</template>
	</div>
	<div id="host2">
	<template id="sr2" data-mode="open">
	<div id="relatedTarget"></div>
	</template>
	</div>
	</div>

	<script>
	let n7 = createTestTree(test7);
	document.body.appendChild(n7.test7);
	test(() => {
	let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: true, relatedTarget: n7.relatedTarget}));
	assert_equals(log.event.target, n7.host1);
	assert_equals(log.event.relatedTarget, n7.host2);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: true)');

	test(() => {
	let log = dispatchEventWithEventLog(n7, n7.target, new MouseEvent('my-event', {bubbles: true, composed: false, relatedTarget: n7.relatedTarget}));
	assert_equals(log.event.target, null);
	assert_equals(log.event.relatedTarget, null);
	assert_equals(log.event.eventPhase, 0);
	assert_equals(log.event.currentTarget, null);
	assert_equals(log.event.composedPath().length, 0);
	}, 'Event properties post dispatch with relatedTarget in the different shadow trees. (composed: false)');
	document.body.removeChild(n7.test7);
	</script>