diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/untriaged/events')
11 files changed, 921 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/event-dispatch/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/events/event-dispatch/test-002.html new file mode 100644 index 0000000000..663337526a --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/event-dispatch/test-002.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_05_02</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#event-dispatch"> +<meta name="assert" content="Event Dispatch: The MouseEvent relatedTarget attribute must return the adjusted related target"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_05_02_T01 = async_test('A_05_05_02_T01'); + +A_05_05_02_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var invoked = false; + + roots = createTestMediaPlayer(d); + + //expected result of what relative target should be see + //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example + + //For #volume-shadow-root adjusted related target #volume-shadow-root + roots.volumeShadowRoot.addEventListener('mouseover', + A_05_05_02_T01.step_func(function(event) { + invoked = true; + assert_equals(event.relatedTarget, roots.volumeShadowRoot, + 'Wrong relatedTarget'); + }), false); + + + + + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("mouseover", true, false, window, + 0, 10, 10, 10, 10, false, false, false, false, 0, roots.volumeShadowRoot); + + roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(evt); + assert_true(invoked, 'Event listener was not invoked'); + A_05_05_02_T01.done(); +})); + +//TODO (sgrekhov) Add tests for other nodes from http://www.w3.org/TR/shadow-dom/#event-retargeting-example +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/event-dispatch/test-003.html b/testing/web-platform/tests/shadow-dom/untriaged/events/event-dispatch/test-003.html new file mode 100644 index 0000000000..bd81521018 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/event-dispatch/test-003.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_05_03</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#event-path-trimming"> +<meta name="assert" content="Event Path Trimming: In cases where both relatedTarget and target of a trusted event are part of the same shadow tree, the conforming UAs must stop events at the shadow root to avoid the appearance of spurious mouseover and mouseout events firing from the same node."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_05_03_T01 = async_test('A_05_05_03_T01'); + +A_05_05_03_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + s.id = 'shadow'; + + var input1 = d.createElement('input'); + input1.setAttribute('id', 'input1'); + s.appendChild(input1); + + var input2 = d.createElement('input'); + input2.setAttribute('id', 'input2'); + s.appendChild(input2); + + input1.addEventListener('focusin', A_05_05_03_T01.step_func(function(event) { + assert_equals(event.composed, true); + assert_equals(event.composedPath().length, 7); + assert_equals(event.composedPath()[0].id, 'input1'); + assert_equals(event.composedPath()[1].id, 'shadow'); + assert_equals(event.composedPath()[2].id, 'host'); + assert_equals(event.composedPath()[3].tagName, 'BODY'); + assert_equals(event.composedPath()[4].tagName, 'HTML'); + assert_equals(event.composedPath()[5], d); + assert_equals(event.composedPath()[6], ctx.iframes[0].contentWindow); + }), false); + + input1.addEventListener('focusout', A_05_05_03_T01.step_func(function(event) { + assert_equals(event.composed, true); + }), false); + + input2.addEventListener('focusin', A_05_05_03_T01.step_func(function(event) { + assert_equals(event.composedPath().length, 2); + assert_equals(event.composedPath()[0].id, 'input2'); + assert_equals(event.composedPath()[1].id, 'shadow'); + A_05_05_03_T01.done(); + }), false); + + // Expected event path for #input1: + // <input>, #shadow-root, <div>, <body>, <html>, #document, window + input1.focus(); + + // Causes a "focusin" event, from #input1 to #input2 + // In this case, original relatedTarget is #input1, and original target + // is #input2. + // It should be viewed outside the shadow as "target == relatedTarget" + // after event retargeting, therefore, event.composedPath() above the shadow + // host will be trimmed. + // Expected event path for #input2: + // <input>, #shadow-root + input2.focus(); +})); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/event-retargeting/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/events/event-retargeting/test-001.html new file mode 100644 index 0000000000..4ad3ac5ce9 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/event-retargeting/test-001.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_01_01</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#event-retargeting"> +<meta name="assert" content="Event Retargeting:test that event.target is retargeted when event crosses shadow boundary and vice versa"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_01_01_T1 = async_test('A_05_01_01_T1'); + +A_05_01_01_T1.step(function () { + var iframe = document.createElement('iframe'); + iframe.src = '../../resources/blank.html'; + document.body.appendChild(iframe); + + iframe.onload = A_05_01_01_T1.step_func(function () { + + try { + var d = iframe.contentDocument; + var div = d.createElement('div'); + d.body.appendChild(div); + + var s = div.attachShadow({mode: 'open'}); + + var div2 = d.createElement('div'); + s.appendChild(div2); + + var inp = d.createElement('input'); + inp.setAttribute('type', 'text'); + inp.setAttribute('id', 'inpid'); + div2.appendChild(inp); + + div2.addEventListener('click', A_05_01_01_T1.step_func(function (event) { + assert_equals(event.target.tagName, 'INPUT', 'Information about target of the event that ' + + 'doesn\'t cross the shadow boundaries should not be adjusted'); + }), false); + + var event = d.createEvent('HTMLEvents'); + event.initEvent ("click", true, false); + inp.dispatchEvent(event); + } finally { + iframe.parentNode.removeChild(iframe); + } + A_05_01_01_T1.done(); + }); +}); + + + +var A_05_01_01_T2 = async_test('A_05_01_01_T2'); + +A_05_01_01_T2.step(function () { + var iframe = document.createElement('iframe'); + iframe.src = '../../resources/blank.html'; + document.body.appendChild(iframe); + + iframe.onload = A_05_01_01_T2.step_func(function () { + + try { + var d = iframe.contentDocument; + + var div = d.createElement('div'); + d.body.appendChild(div); + + var s = div.attachShadow({mode: 'open'}); + + var div2 = d.createElement('div'); + s.appendChild(div2); + + var inp = d.createElement('input'); + inp.setAttribute('type', 'text'); + inp.setAttribute('id', 'inpid'); + div2.appendChild(inp); + + div.addEventListener('click', A_05_01_01_T2.step_func(function (event) { + assert_equals(event.target.tagName, 'DIV', 'Information about event target crossing ' + + 'the shadow boundaries should be adjusted'); + }), false); + + var event = d.createEvent('HTMLEvents'); + event.initEvent ("click", true, false); + inp.dispatchEvent(event); + } finally { + iframe.parentNode.removeChild(iframe); + } + A_05_01_01_T2.done(); + }); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/event-retargeting/test-003.html b/testing/web-platform/tests/shadow-dom/untriaged/events/event-retargeting/test-003.html new file mode 100644 index 0000000000..23ee9ad723 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/event-retargeting/test-003.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_01_03</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#event-retargeting"> +<meta name="assert" content="Event Retargeting:Event retargeting for fallback content"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_01_03_T01 = async_test('A_05_01_03_T01'); + +A_05_01_03_T01.step(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + d.body.innerHTML = '' + + '<div id="main">' + + '<div id="shadow-root">' + + '<span>1</span>' + + '<span>2</span>' + + '<span>3</span>' + + '</div>' + + '</div>'; + + var ul = d.querySelector('#shadow-root'); + var s = ul.attachShadow({mode: 'open'}); + + //make shadow subtree + var div = document.createElement('div'); + div.innerHTML = '<slot name="shadow"><span id="flbk">Fallback item</span></slot>'; + s.appendChild(div); + + d.body.addEventListener('click', A_05_01_03_T01.step_func(function (event) { + assert_equals(event.target.getAttribute('id'), 'shadow-root', 'Information about ' + + 'event target crossing the shadow boundaries should be adjusted for the fallback ' + + 'content'); + }), false); + + var event = d.createEvent('HTMLEvents'); + event.initEvent ("click", true, false); + s.querySelector('#flbk').dispatchEvent(event); + + A_05_01_03_T01.done(); +})); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-001.html new file mode 100644 index 0000000000..ce21769e3a --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-001.html @@ -0,0 +1,313 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_03_01</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#retargeting-focus-events"> +<meta name="assert" content="Retargeting focus events:The focus, DOMFocusIn, blur, and DOMFocusOut events must be treated in the same way as events with a relatedTarget, where the corresponding node that is losing focus as a result of target gaining focus or the node that is gaining focus, and thus causing the blurring of target acts as the related target"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +//blur and focus events are not bubbling. So this test tests only DOMFocusIn and DOMFocusOut +//which do bubble + +//test DOMFocusOut event +var A_05_03_01_T01 = async_test('A_05_03_01_T01'); + +A_05_03_01_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('style', 'height:50%; width:100%'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var inp1 = d.createElement('input'); + inp1.setAttribute('id', 'inp1'); + inp1.setAttribute('type', 'checkbox'); + s.appendChild(inp1); + + var inp2 = d.createElement('input'); + inp2.setAttribute('id', 'inp2'); + inp2.setAttribute('type', 'checkbox'); + d.body.appendChild(inp2); + + s.addEventListener('DOMFocusOut', A_05_03_01_T01.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadow tree: Wrong target'); + }), false); + + d.body.addEventListener('DOMFocusOut', A_05_03_01_T01.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'host', 'Inside shadow tree: Wrong target'); + }), false); + + inp1.focus(); + inp2.focus(); + + A_05_03_01_T01.done(); +})); + + +//test DOMFocusIn event +var A_05_03_01_T02 = async_test('A_05_03_01_T02'); + +A_05_03_01_T02.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('style', 'height:50%; width:100%'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var inp1 = d.createElement('input'); + inp1.setAttribute('id', 'inp1'); + inp1.setAttribute('type', 'checkbox'); + s.appendChild(inp1); + + var inp2 = d.createElement('input'); + inp2.setAttribute('id', 'inp2'); + inp2.setAttribute('type', 'checkbox'); + d.body.appendChild(inp2); + + inp2.focus(); + + s.addEventListener('DOMFocusIn', A_05_03_01_T02.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadoe tree: Wrong target'); + }), false); + + d.body.addEventListener('DOMFocusIn', A_05_03_01_T02.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'host', 'Outside shadow tree: Wrong target'); + }), false); + + inp1.focus(); + + A_05_03_01_T02.done(); +})); + + +//gaining and loosing focus elements are in the same tree. +//DOMFocusIn event should be stopped at shadow boundary +var A_05_03_01_T03 = async_test('A_05_03_01_T03'); + + +A_05_03_01_T03.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('style', 'height:50%; width:100%'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var inp1 = d.createElement('input'); + inp1.setAttribute('id', 'inp1'); + inp1.setAttribute('type', 'checkbox'); + s.appendChild(inp1); + + var inp2 = d.createElement('input'); + inp2.setAttribute('id', 'inp2'); + inp2.setAttribute('type', 'checkbox'); + s.appendChild(inp2); + + inp1.focus(); + + d.body.addEventListener('DOMFocusIn', A_05_03_01_T03.step_func(function(event) { + assert_true(false, 'Event should be stopped at Shadow boundary'); + }), false); + + inp2.focus(); + + A_05_03_01_T03.done(); +})); + + + + +//gaining and loosing focus elements are in the same tree. +//DOMFocusOut event should be stopped at shadow boundary +var A_05_03_01_T04 = async_test('A_05_03_01_T04'); + +A_05_03_01_T04.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('style', 'height:50%; width:100%'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var inp1 = d.createElement('input'); + inp1.setAttribute('id', 'inp1'); + inp1.setAttribute('type', 'checkbox'); + s.appendChild(inp1); + + var inp2 = d.createElement('input'); + inp2.setAttribute('id', 'inp2'); + inp2.setAttribute('type', 'checkbox'); + s.appendChild(inp2); + + inp1.focus(); + + d.body.addEventListener('DOMFocusOut', A_05_03_01_T04.step_func(function(event) { + assert_true(false, 'Event should be stopped at Shadow boundary'); + }), false); + + inp2.focus(); + + A_05_03_01_T04.done(); +})); + + + + +//Retargeting shouldn't occur for DOM tree nodes distributed +//among insertion point. Check DOMFocusOut +var A_05_03_01_T05 = async_test('A_05_03_01_T05'); + +A_05_03_01_T05.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + var inp1 = d.createElement('input'); + inp1.setAttribute('id', 'inp1'); + inp1.setAttribute('type', 'checkbox'); + inp1.setAttribute('slot', 'slot1'); + host.appendChild(inp1); + + var inp2 = d.createElement('input'); + inp2.setAttribute('id', 'inp2'); + inp2.setAttribute('type', 'checkbox'); + inp2.setAttribute('slot', 'slot2'); + host.appendChild(inp2); + + var inp3 = d.createElement('input'); + inp3.setAttribute('id', 'inp3'); + inp3.setAttribute('type', 'checkbox'); + inp3.setAttribute('slot', 'slot1'); + host.appendChild(inp3); + + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var shadowDiv = document.createElement('div'); + shadowDiv.innerHTML = '<slot name="slot1"></slot>'; + s.appendChild(shadowDiv); + + //element outside the shadow tree + var inp4 = d.createElement('input'); + inp4.setAttribute('id', 'inp4'); + inp4.setAttribute('type', 'checkbox'); + inp4.setAttribute('slot', 'slot1'); + d.body.appendChild(inp4); + + inp1.focus(); + + s.addEventListener('DOMFocusOut', A_05_03_01_T05.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadow tree: ' + + 'Event for nodes, distributed ' + + 'agains insertion points shouldn\'t be retargeted'); + }), false); + + + d.body.addEventListener('DOMFocusOut', A_05_03_01_T05.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'inp1', 'Outside shadow tree: ' + + 'Event for nodes, distributed ' + + 'agains insertion points shouldn\'t be retargeted'); + }), false); + + inp4.focus(); + + A_05_03_01_T05.done(); +})); + + +//Retargeting shouldn't occur for DOM tree nodes distributed +//among insertion points. Check DOMFocusIn +var A_05_03_01_T06 = async_test('A_05_03_01_T06'); + +A_05_03_01_T06.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + var inp1 = d.createElement('input'); + inp1.setAttribute('id', 'inp1'); + inp1.setAttribute('type', 'checkbox'); + inp1.setAttribute('slot', 'slot1'); + host.appendChild(inp1); + + var inp2 = d.createElement('input'); + inp2.setAttribute('id', 'inp2'); + inp2.setAttribute('type', 'checkbox'); + inp2.setAttribute('slot', 'slot2'); + host.appendChild(inp2); + + var inp3 = d.createElement('input'); + inp3.setAttribute('id', 'inp3'); + inp3.setAttribute('type', 'checkbox'); + inp3.setAttribute('slot', 'slot1'); + host.appendChild(inp3); + + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var shadowDiv = document.createElement('div'); + shadowDiv.innerHTML = '<slot name="slot1"></slot>'; + s.appendChild(shadowDiv); + + //element outside the shadow tree + var inp4 = d.createElement('input'); + inp4.setAttribute('id', 'inp4'); + inp4.setAttribute('type', 'checkbox'); + inp4.setAttribute('slot', 'slot1'); + d.body.appendChild(inp4); + + inp4.focus(); + + s.addEventListener('DOMFocusIn', A_05_03_01_T06.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'inp1', 'Inside shadow tree: ' + + 'Event for nodes, distributed ' + + 'agains insertion points shouldn\'t be retargeted'); + }), false); + + + d.body.addEventListener('DOMFocusIn', A_05_03_01_T05.step_func(function(event) { + assert_equals(event.target.getAttribute('id'), 'inp1', 'Outside shadow tree: ' + + 'Event for nodes, distributed ' + + 'agains insertion points shouldn\'t be retargeted'); + }), false); + + inp1.focus(); + + A_05_03_01_T06.done(); +})); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-002.html new file mode 100644 index 0000000000..9c0eb23ae4 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-002.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_03_02</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#retargeting-focus-events"> +<meta name="assert" content="Retargeting focus events:The blur event must be treated in the same way as events with a relatedTarget, where the node that is gaining focus causing the blurring of target acts as the related target"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +//test blur event +var A_05_03_02_T01 = async_test('A_05_03_02_T01'); + + +A_05_03_02_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var invoked = false; + + var roots = createTestMediaPlayer(d); + + roots.playerShadowRoot.querySelector('.volume-slider').focus(); + + //expected result of what relative target should be see + //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example + + //For #volume-slider relative target is #volume-slider + roots.playerShadowRoot.querySelector('.volume-slider').addEventListener('blur', + A_05_03_02_T01.step_func(function(event) { + invoked = true; + assert_equals(event.target.getAttribute('id'), 'volume-slider', + 'Wrong target'); + }), false); + + // move focus out of shadow tree. blur should be fired + d.querySelector('#outside-control').focus(); + + assert_true(invoked, 'Event listener was not invoked'); + + A_05_03_02_T01.done(); +})); + + +//TODO (sgrekhov) add test for the case when related target differs from the +//node on which event listener is invoked +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-003.html b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-003.html new file mode 100644 index 0000000000..55fdde1307 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-focus-events/test-003.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_03_03</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#retargeting-focus-events"> +<meta name="assert" content="Retargeting focus events:The focus event must be treated in the same way as events with a relatedTarget, where the corresponding node that is losing focus as a result of target gaining focus or the node that is gaining focus"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +//test focus event +var A_05_03_03_T01 = async_test('A_05_03_03_T01'); + + +A_05_03_03_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var invoked = false; + + var roots = createTestMediaPlayer(d); + + d.querySelector('#outside-control').focus(); + + //expected result of what relative target should be see + //see at http://www.w3.org/TR/shadow-dom/#event-retargeting-example + + //For #volume-slider relative target is #volume-slider + roots.playerShadowRoot.querySelector('.volume-slider').addEventListener('focus', + A_05_03_03_T01.step_func(function(event) { + invoked = true; + assert_equals(event.target.getAttribute('id'), 'volume-slider', + 'Wrong target'); + }), false); + + roots.playerShadowRoot.querySelector('.volume-slider').focus(); + + assert_true(invoked, 'Event listener was not invoked'); + + A_05_03_03_T01.done(); +})); + + +//TODO (sgrekhov) add test for the case when related target differs from the +//node on which event listener is invoked +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-001.html new file mode 100644 index 0000000000..5b0ed3fddd --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-001.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_02_01</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-201305214#retargeting-related-target"> +<meta name="assert" content="Retargeting relatedTarget:Event retargeting is a process of computing relative targets for each ancestor of the node at which the event is dispatched. A relative target is a DOM node that most accurately represents the target of a dispatched event at a given ancestor while maintaining the upper boundary encapsulation."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_02_01_T01 = async_test('A_05_02_01_T1'); + +A_05_02_01_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('style', 'height:100%; width:100%'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var div1 = d.createElement('div'); + div1.setAttribute('style', 'height:40px; width:100%'); + div1.setAttribute('id', 'div1'); + s.appendChild(div1); + + var div2 = d.createElement('div'); + div2.setAttribute('style', 'height:40px; width:100%'); + div2.setAttribute('id', 'div2'); + s.appendChild(div2); + + s.addEventListener('mouseover', A_05_02_01_T01.step_func(function(event) { + assert_equals(event.relatedTarget.getAttribute('id'), 'div1', 'Wrong relatedTarget'); + }), false); + + d.body.addEventListener('mouseover', A_05_02_01_T01.step_func(function(event) { + assert_true(false, 'Event must be stopped at Shadow boundary'); + }), false); + + + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("mouseover", true, false, window, + 0, 10, 10, 10, 10, false, false, false, false, 0, div1); + + div2.dispatchEvent(evt); + + + A_05_02_01_T01.done(); +})); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-002.html new file mode 100644 index 0000000000..3a8ea47e76 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-002.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_02_02</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-201305214#retargeting-related-target"> +<meta name="assert" content="Retargeting relatedTarget:For a given node, the relatedTarget must be changed to its ancestor (or self) that is in the same shadow tree as the node"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_02_02_T01 = async_test('A_05_02_02_T01'); + +A_05_02_02_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('style', 'height:50%; width:100%'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var div1 = d.createElement('div'); + div1.setAttribute('style', 'height:100%; width:100%'); + div1.setAttribute('id', 'div1'); + s.appendChild(div1); + + var div2 = d.createElement('div'); + div2.setAttribute('style', 'height:100%; width:100%'); + div2.setAttribute('id', 'div2'); + d.body.appendChild(div2); + + d.body.addEventListener('mouseover', A_05_02_02_T01.step_func(function(event) { + assert_equals(event.relatedTarget.getAttribute('id'), 'host', 'Wrong related target'); + }), false); + + + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("mouseover", true, false, window, + 0, 10, 10, 10, 10, false, false, false, false, 0, div1); + + div2.dispatchEvent(evt); + + A_05_02_02_T01.done(); +})); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-003.html b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-003.html new file mode 100644 index 0000000000..900a3ac7fe --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/retargeting-relatedtarget/test-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_02_03</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="https://w3c.github.io/webcomponents/spec/shadow/#event-relatedtarget-retargeting"> +<meta name="assert" content="The value of the Event object's relatedTarget attribute must be the result of the retargeting algorithm with the event's currentTarget and relatedTarget as input. The result is called a relative related target."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../../html/resources/common.js"></script> +<script src="../../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_02_03_T01 = async_test('A_05_02_03_T01'); + +A_05_02_03_T01.step(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('style', 'height:50%; width:100%'); + host.setAttribute('id', 'host'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var div1 = d.createElement('div'); + div1.setAttribute('style', 'height:100%; width:100%'); + div1.setAttribute('id', 'div1'); + s.appendChild(div1); + + host.addEventListener('mouseover', A_05_02_03_T01.step_func(function(event) { + assert_unreached('Event listeners shouldn\'t be invoked if relative target and relative related target are the same'); + }), false); + + var evt = new MouseEvent("mouseover", + { relatedTarget: div1, relatedTargetScoped: true }); + div1.dispatchEvent(evt); + + A_05_02_03_T01.done(); +})); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/events/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/events/test-001.html new file mode 100644 index 0000000000..b150f282f4 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/events/test-001.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_05_00_01</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#events"> +<meta name="assert" content="Events:The mutation event types must never be dispatched in a shadow DOM subtree."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../html/resources/common.js"></script> +</head> +<body> +<div id="log"></div> +<script> +var A_05_00_01_T1 = async_test('A_05_00_01_T1'); + +A_05_00_01_T1.step(function () { + var iframe = document.createElement('iframe'); + iframe.src = '../resources/blank.html'; + document.body.appendChild(iframe); + + iframe.onload = A_05_00_01_T1.step_func(function () { + + try { + var d = iframe.contentDocument; + + var div = d.createElement('div'); + d.body.appendChild(div); + + var s = div.attachShadow({mode: 'open'}); + + var div2 = d.createElement('div'); + s.appendChild(div2); + + var inp = d.createElement('input'); + inp.setAttribute('type', 'text'); + inp.setAttribute('id', 'inpid'); + div2.appendChild(inp); + + div2.addEventListener('DOMAttrModified', A_05_00_01_T1.step_func(function (event) { + assert_true(false, 'The mutation event types must never be dispatched in a shadow DOM subtree'); + }), false); + /* + var attr = inp.getAttributeNode ("value"); + var event = d.createEvent('MutationEvent'); + event.initMutationEvent ("DOMAttrModified", true, true, attr, null, 'new value', "value", MutationEvent.MODIFICATION); + inp.dispatchEvent(event); + */ + inp.value = 'new value'; + inp.setAttribute ("newAttr" , "firstValue"); + inp.setAttribute ("newAttr" , "secondValue"); + inp.removeAttribute ("newAttr"); + } finally { + iframe.parentNode.removeChild(iframe); + } + A_05_00_01_T1.done(); + }); +}); +</script> +</body> +</html> |