diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/shadow-dom/untriaged | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/untriaged')
67 files changed, 3866 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/untriaged/README b/testing/web-platform/tests/shadow-dom/untriaged/README new file mode 100644 index 0000000000..5b7572bda4 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/README @@ -0,0 +1,2 @@ +This directory contains tests that have been written before the slot proposal had been adopted by the spec. +These tests need to be triaged, fixed, and merged back into shadow-dom directory. diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/attributes/test-006.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/attributes/test-006.html new file mode 100644 index 0000000000..bfbfde36e2 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/attributes/test-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_02_01_06</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/#shadow-aware-attributes"> +<meta name="assert" content="Extensions to Element Interface: shadowRoot of type ShadowRoot"> +<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> +test(function () { + + var d = newHTMLDocument(); + + var host = d.createElement('div'); + d.body.appendChild(host); + + assert_equals(host.shadowRoot, null, 'attribute shadowRoot must return null if no shadow tree is accesible'); + + +}, 'A_10_02_01_06_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/methods/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/methods/test-001.html new file mode 100644 index 0000000000..c1c44980e1 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/methods/test-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_02_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-20130514/#shadow-aware-methods"> +<meta name="assert" content="Extensions to Element Interface: attachShadow method creates new instance of Shadow root object"> +<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> +test(function () { + + var d = newHTMLDocument(); + + var host = d.createElement('div'); + d.body.appendChild(host); + + var s = host.attachShadow({mode: 'open'}); + + assert_true(s instanceof ShadowRoot, 'attachShadow() method should create new instance ' + + 'of ShadowRoot object'); + +}, 'A_10_02_02_01_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/methods/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/methods/test-002.html new file mode 100644 index 0000000000..f7e1595a01 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/extensions-to-element-interface/methods/test-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_02_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-20130514/#shadow-aware-methods"> +<meta name="assert" content="Extensions to Element Interface: attachShadow method"> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + host.appendChild(span); + + var s = host.attachShadow({mode: 'open'}); + + // span should become invisible as shadow root content + assert_equals(span.offsetTop, 0, 'attachShadow() method should establish ' + + 'the context object as the shadow host of the ShadowRoot object'); + +}), 'A_10_02_02_02_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/activeElement-confirm-return-null.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/activeElement-confirm-return-null.html new file mode 100644 index 0000000000..417995d75e --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/activeElement-confirm-return-null.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Confirm activeElement return null</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Masaya Iseki" href="mailto:iseki.m.aa@gmail.com"> +<link rel="help" href="http://w3c.github.io/webcomponents/spec/shadow/#attributes"> +<meta name="assert" content="ShadowRoot Object: confirm activeElement return null"> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + assert_equals(s.activeElement, null, 'activeElement attribute of the ShadowRoot must return null if there\'s no focused element'); + +}), 'confirm activeElement return null'); + + +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var inp = d.createElement('input'); + d.body.appendChild(inp); + + inp.focus(); + + assert_equals(s.activeElement, null, 'activeElement attribute of the ShadowRoot must return null if there\'s no focused element in the shadow tree'); + +}), 'confirm activeElement return null when there is other element in body'); + + +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var inp = d.createElement('input'); + d.body.appendChild(inp); + + var inp2 = d.createElement('input'); + s.appendChild(inp2); + + inp.focus(); + + assert_equals(s.activeElement, null, 'activeElement attribute of the ShadowRoot must return null if there\'s no focused element in the shadow tree'); + +}), 'confirm activeElement return null when focus on the element in the outer shadow tree'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-007.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-007.html new file mode 100644 index 0000000000..d8868f5695 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-007.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_01_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/#shadow-root-attributes"> +<meta name="assert" content="ShadowRoot Object: readonly attribute Element? activeElement; actual value"> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('id', 'shRoot'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var inp = d.createElement('input'); + inp.setAttribute('type', 'text'); + inp.setAttribute('id', 'inpId'); + inp.setAttribute('value', 'Some text'); + s.appendChild(inp); + + inp.focus(); + + assert_true(s.activeElement != null, 'Point 1: activeElement attribute of the ShadowRoot ' + + 'must return the currently focused element in the shadow tree'); + assert_equals(s.activeElement.tagName, 'INPUT', 'Point 2: activeElement attribute of the ShadowRoot ' + + 'must return the currently focused element in the shadow tree'); + +}), 'A_10_01_01_03_01_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-009.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-009.html new file mode 100644 index 0000000000..219c578266 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-009.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_01_04_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/#shadow-root-attributes"> +<meta name="assert" content="ShadowRoot Object: innerHTML of type DOMString; Test getter"> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + assert_equals(s.innerHTML.toLowerCase(), '<span>some text</span>', + 'Wrong value of ShadowRoot innerHTML attribute'); + +}), 'A_10_01_01_04_01_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-010.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-010.html new file mode 100644 index 0000000000..4207065867 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-010.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_01_04_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/#shadow-root-attributes"> +<meta name="assert" content="ShadowRoot Object: innerHTML of type DOMString; Test setter"> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + s.innerHTML = '<input type="text"><div>new text</div>'; + + assert_equals(s.innerHTML.toLowerCase(), '<input type="text"><div>new text</div>', + 'Wrong value of ShadowRoot innerHTML attribute'); + +}), 'A_10_01_01_04_02_T01_01'); + + +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.setAttribute('id', 'spanId'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + s.innerHTML = '<input type="text" id="inputId"><div id="divId">new text</div>'; + + assert_equals(s.querySelector('#spanId'), null, 'Point 1:innerHTML attribute must replace all content of ' + + 'the ShadowRoot object'); + + assert_true(s.querySelector('#inputId') != null, 'Point 2:innerHTML attribute must replace all content of ' + + 'the ShadowRoot object'); + assert_equals(s.querySelector('#inputId').getAttribute('id'), 'inputId', + 'Point 3:innerHTML attribute must replace all content of the ShadowRoot object'); + + assert_true(s.querySelector('#divId') != null, 'Point 3:innerHTML attribute must replace all content of ' + + 'the ShadowRoot object'); + assert_equals(s.querySelector('#divId').getAttribute('id'), 'divId', + 'Point 4:innerHTML attribute must replace all content of the ShadowRoot object'); +}), 'A_10_01_01_04_02_T01_02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-011.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-011.html new file mode 100644 index 0000000000..74c2c9877f --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-011.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_01_05_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/#shadow-root-attributes"> +<meta name="assert" content="ShadowRoot Object: styleSheets of type StyleSheetList, readonly"> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + assert_true(s.styleSheets != null, 'ShadowRoot styleSheets attribute shouldn\'t be null'); + assert_equals(s.styleSheets.length, 0, 'attribute must return the shadow root style sheets only'); + +}), 'A_10_01_01_05_01_T01'); + + +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var style = d.createElement('style'); + s.appendChild(style); + + assert_true(s.styleSheets != null, 'ShadowRoot styleSheets attribute shouldn\'t be null'); + assert_equals(s.styleSheets.length, 1, 'attribute must return the shadow root style sheets'); + +}), 'A_10_01_01_05_01_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-012.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-012.html new file mode 100644 index 0000000000..af06e4fafb --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-012.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_01_06</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/#shadow-root-attributes"> +<meta name="assert" content="ShadowRoot Object: The nodeType attribute of a ShadowRoot instance must return DOCUMENT_FRAGMENT_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> +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + assert_equals(s.nodeType, 11, 'The nodeType attribute of a ShadowRoot ' + + 'instance must return DOCUMENT_FRAGMENT_NODE'); + +}), 'A_10_01_01_06_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-013.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-013.html new file mode 100644 index 0000000000..3f754c0381 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-attributes/test-013.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_01_07</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/#shadow-root-attributes"> +<meta name="assert" content="ShadowRoot Object: The nodeName attribute of a ShadowRoot instance must return "#document-fragment"."> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + assert_equals(s.nodeName, '#document-fragment', 'The nodeName attribute of a ShadowRoot instance ' + + 'must return "#document-fragment".'); + +}), 'A_10_01_01_07_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-001.html new file mode 100644 index 0000000000..6093313a0e --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_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-20130514/#shadow-root-methods"> +<meta name="assert" content="ShadowRoot Object: HTMLElement getElementById(DOMString elementId) method"> +<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> +test(function () { + + var d = newHTMLDocument(); + + var el = d.createElement('div'); + d.body.appendChild(el); + + var s = el.attachShadow({mode: 'open'}); + + var child = d.createElement('span'); + child.setAttribute('id', 'span_id'); + s.appendChild(child); + + assert_true(s.getElementById('span_id') != null, 'Point 1: ShadowRoot getElementById() ' + + 'method should return child element'); + assert_equals(s.getElementById('span_id').getAttribute('id'), 'span_id', 'Point 2: ' + + 'ShadowRoot getElementById() method should return child element'); + +}, 'A_10_01_02_01_T01'); + + + +test(function () { + + var d = newHTMLDocument(); + + var el = d.createElement('div'); + d.body.appendChild(el); + + var s = el.attachShadow({mode: 'open'}); + + assert_true(s.getElementById('span_id') == null, ' ShadowRoot getElementById() ' + + 'method should return null if matching element not found'); + +}, 'A_10_01_02_01_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-004.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-004.html new file mode 100644 index 0000000000..dc087680dd --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_02_04</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/#shadow-root-methods"> +<meta name="assert" content="ShadowRoot Object: Selection? getSelection() method"> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + var range = d.createRange(); + range.setStart(span.firstChild, 0); + range.setEnd(span.firstChild, 3); + + var selection = s.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + + var sl = s.getSelection(); + assert_equals(sl.toString(), 'Som', 'The getSelection() method of the shadow root object must return ' + + 'the current selection in this shadow tree'); + +}), 'A_10_01_02_04_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-006.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-006.html new file mode 100644 index 0000000000..cf10846cc9 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-006.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_02_06_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/#shadow-root-methods"> +<meta name="assert" content="ShadowRoot Object: Element? elementFromPoint(float x, float y) method"> +<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> +test(function () { + + var d = newHTMLDocument(); + + var el = d.createElement('div'); + d.body.appendChild(el); + + try { + el.elementFromPoint(1, 1); + assert_true(false, 'TypeMismatchError should be thrown'); + } catch(e) { + assert_true(e instanceof TypeError, 'Wrong error type'); + } + +}, 'A_10_01_02_06_01_T01'); + +// Added test for checking if elementFromPoint() method is existing on Shadowroot. +test(function () { + + var d = newHTMLDocument(); + + var el = d.createElement('div'); + + var s = el.attachShadow({mode: 'open'}); + d.body.appendChild(el); + + if (typeof(s) == 'undefined' || typeof (s.elementFromPoint(1, 1)) != 'object') { + assert_true(false, 'Shadowroot doesn\'t have elementFromPoint() method.' ); + } + +}, 'A_10_01_02_06_01_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-007.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-007.html new file mode 100644 index 0000000000..371c5fa851 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-007.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_02_06_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/#shadow-root-methods"> +<meta name="assert" content="ShadowRoot Object: Element? elementFromPoint(float x, float y) method"> +<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> +test(function () { + + var d = newHTMLDocument(); + + var el = d.createElement('div'); + d.body.appendChild(el); + + var s = el.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + assert_equals(s.elementFromPoint(-1, 1), null, 'If x argument of elementFromPoint(x, y) is less ' + + 'than zero then method shold return null'); + +}, 'A_10_01_02_06_02_T01'); + + +test(function () { + + var d = newHTMLDocument(); + + var el = d.createElement('div'); + d.body.appendChild(el); + + var s = el.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + assert_equals(s.elementFromPoint(1, -1), null, 'If y argument of elementFromPoint(x, y) is less ' + + 'than zero then method shold return null'); + +}, 'A_10_01_02_06_02_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-010.html b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-010.html new file mode 100644 index 0000000000..8e11f739ce --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/elements-and-dom-objects/shadowroot-object/shadowroot-methods/test-010.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_10_01_02_09</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="https://dom.spec.whatwg.org/#dom-node-clonenode"> +<meta name="assert" content="If context object is a shadow root, throw a NotSupportedError exception."> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + try { + s.cloneNode(); + assert_true(false, 'Invoking the cloneNode() method on a ShadowRoot instance must always ' + + 'throw a NotSupportedError (code 9) exception.'); + } catch (e) { + assert_equals(e.code, 9, 'Wrong exception type'); + assert_equals(e.name, 'NotSupportedError', 'Wrong exception name'); + } +}), 'A_10_01_02_09_T01'); +</script> +</body> +</html> 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> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-001.html new file mode 100644 index 0000000000..2783e5f15e --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-001.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_08_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-20130514/#html-forms"> +<meta name="assert" content="HTML Elements in shadow trees: Form elements and form-associated elements in shadow tree are not accessible using document DOM object's tree accessors"> +<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> +//test form-associated elements +test(function () { + var d = newHTMLDocument(); + + var form = d.createElement('form'); + form.setAttribute('id', 'form_id'); + d.body.appendChild(form); + + var div = d.createElement('div'); + d.body.appendChild(div); + var s = div.attachShadow({mode: 'open'}); + + + HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { + + var el = d.createElement(tagName); + el.setAttribute('form', 'form_id'); + el.setAttribute('id', tagName + '_id'); + s.appendChild(el); + + assert_equals(d.querySelector('#' + tagName + '_id'), null, 'Form-associated element ' + tagName + + ' in shadow tree must not be accessible using owner\'s document tree accessors'); + }); +}, 'A_08_02_01_T01'); + + +//test form elements +test(function () { + var d = newHTMLDocument(); + + var form = d.createElement('form'); + d.body.appendChild(form); + + var div = d.createElement('div'); + form.appendChild(div); + s = div.attachShadow({mode: 'open'}); + + HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { + + var el = d.createElement(tagName); + el.setAttribute('id', tagName + '_id'); + s.appendChild(el); + + assert_equals(d.querySelector('#' + tagName + '_id'), null, 'Form element ' + tagName + + ' in shadow tree must not be accessible using owner\'s document tree accessors'); + }); +}, 'A_08_02_01_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-002.html new file mode 100644 index 0000000000..597d985bee --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-002.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_08_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-20130514/#html-forms"> +<meta name="assert" content="HTML Elements in shadow trees: Form elements and form-associated elements in shadow tree must be accessible using shadow tree accessors"> +<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> +//test form-associated elements +test(function () { + var d = newHTMLDocument(); + + var form = d.createElement('form'); + form.setAttribute('id', 'form_id'); + d.body.appendChild(form); + + var div = d.createElement('div'); + d.body.appendChild(div); + var s = div.attachShadow({mode: 'open'}); + + + HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { + + var el = d.createElement(tagName); + el.setAttribute('form', 'form_id'); + el.setAttribute('id', tagName + '_id'); + s.appendChild(el); + + assert_true(s.querySelector('#' + tagName + '_id') != null, 'Form-associated element ' + tagName + + ' in shadow tree must be accessible shadow tree accessors'); + assert_equals(s.querySelector('#' + tagName + '_id').getAttribute('id'), tagName + '_id', + 'Form-associated element ' + tagName + ' in shadow tree must be accessible shadow tree accessors'); + }); +}, 'A_08_02_02_T01'); + + +//test form elements +test(function () { + var d = newHTMLDocument(); + + var form = d.createElement('form'); + d.body.appendChild(form); + + var div = d.createElement('div'); + form.appendChild(div); + var s = div.attachShadow({mode: 'open'}); + + HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { + + var el = d.createElement(tagName); + el.setAttribute('id', tagName + '_id'); + s.appendChild(el); + + assert_true(s.querySelector('#' + tagName + '_id') != null, 'Form-associated element ' + tagName + + ' in shadow tree must be accessible shadow tree accessors'); + assert_equals(s.querySelector('#' + tagName + '_id').getAttribute('id'), tagName + '_id', + 'Form element ' + tagName + ' in shadow tree must be accessible shadow tree accessors'); + }); +}, 'A_08_02_02_T02'); + + +//test distributed form elements +test(function () { + var d = newHTMLDocument(); + + HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { + + var form = d.createElement('form'); + d.body.appendChild(form); + + var div = d.createElement('div'); + form.appendChild(div); + + var el = d.createElement(tagName); + el.setAttribute('id', tagName + '_id'); + el.setAttribute('slot', tagName + '_slot'); + div.appendChild(el); + + var s = div.attachShadow({mode: 'open'}); + s.innerHTML = '<slot name="' + tagName + '_slot"></slot>'; + + assert_true(s.querySelector('#' + tagName + '_id') == null, 'Distributed form-associated element ' + tagName + + ' in shadow tree must not be accessible shadow tree accessors'); + }); +}, 'A_08_02_02_T03'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-003.html b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-003.html new file mode 100644 index 0000000000..96c1027473 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/html-forms/test-003.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_08_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/#inertness-of-html-elements-in-a-shadow-tree"> +<meta name="assert" content="HTML Elements in shadow trees: form should not submit elements in shadow tree"> +<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_08_02_03_T01 = async_test('A_08_02_03_T01'); + +var checkIframeContent = A_08_02_03_T01.step_func(function () { + // remember value to check before cleaning the context (it'll destroy the iframe) + var valueToCheck = A_08_02_03_T01.iframe.contentWindow.document.URL; + cleanContext(A_08_02_03_T01.ctx); + + assert_true(valueToCheck.indexOf('inp1=value1') > 0, + 'html form should submit all of its fields'); + + // Form data crossing shadow boundary should not be submitted. + // https://github.com/w3c/webcomponents/issues/65 + assert_equals(valueToCheck.indexOf('inp2=value2'), -1, + 'html form should not submit fields in the shadow tree'); + + A_08_02_03_T01.done(); +}); + + +A_08_02_03_T01.step(function () { + + A_08_02_03_T01.ctx = newContext(); + var d = newRenderedHTMLDocument(A_08_02_03_T01.ctx); + + //create iframe + var iframe = document.createElement('iframe'); + A_08_02_03_T01.iframe = iframe; + + iframe.src = '../../resources/blank.html'; + iframe.setAttribute('name', 'targetIframe'); + + // create form + var form = d.createElement('form'); + form.setAttribute('target', 'targetIframe'); + form.setAttribute('method', 'GET'); + form.setAttribute('action', '../../resources/blank.html'); + d.body.appendChild(form); + + // create shadow root + var root = d.createElement('div'); + form.appendChild(root); + var s = root.attachShadow({mode: 'open'}); + + var input1 = d.createElement('input'); + input1.setAttribute('type', 'text'); + input1.setAttribute('name', 'inp1'); + input1.setAttribute('value', 'value1'); + form.appendChild(input1); + + var input2 = d.createElement('input'); + input2.setAttribute('type', 'text'); + input2.setAttribute('name', 'inp2'); + input2.setAttribute('value', 'value2'); + s.appendChild(input2); + + // Wait for the first 'load' event for blank.html. + iframe.onload = A_08_02_03_T01.step_func(() => { + // Wait for the second 'load' event for the submission. + iframe.onload = checkIframeContent; + form.submit(); + }); + d.body.appendChild(iframe); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/inert-html-elements/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/inert-html-elements/test-001.html new file mode 100644 index 0000000000..f8dd40ea2a --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/inert-html-elements/test-001.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_08_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/#inert-html-elements"> +<meta name="assert" content="HTML Elements in shadow trees: base element must behave as inert, or not part of the document tree"> +<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_08_01_01_T01 = async_test('A_08_01_01_T01'); + +A_08_01_01_T01.checkIframeContent = A_08_01_01_T01.step_func(function () { + //remember value to check before cleaning the context (it'll destroy the iframe) + var valueToCheck = A_08_01_01_T01.iframe.contentWindow; + cleanContext(A_08_01_01_T01.ctx); + + assert_equals(valueToCheck, null, + 'base html element ih a shadow tree must beahve like inert one'); + + A_08_01_01_T01.done(); +}); + + +A_08_01_01_T01.step(function () { + + A_08_01_01_T01.ctx = newContext(); + var d = newRenderedHTMLDocument(A_08_01_01_T01.ctx); + + //create iframe + var iframe = document.createElement('iframe'); + + iframe.src = '../../resources/blank.html'; + iframe.setAttribute('name', 'targetIframe'); + d.body.appendChild(iframe); + + A_08_01_01_T01.iframe = iframe; + + // create a link + var link = d.createElement('a'); + link.setAttribute('href', '../../resources/bobs_page.html'); + link.innerHTML = 'the link'; + d.body.appendChild(link); + + //create Shadow root + var root = d.createElement('div'); + d.body.appendChild(root); + var s = root.attachShadow({mode: 'open'}); + + // create base element, set iframe as a target + var base = d.createElement('base'); + base.setAttribute('target', 'targetIframe'); + s.appendChild(base); + + //click the link + link.click(); + + //Expected: base should be inert therefore document d + // should be reloaded, so iframe context shouldn't be affected + + // set timeout to give the iframe time to load content + step_timeout(A_08_01_01_T01.checkIframeContent, 2000); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/inert-html-elements/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/inert-html-elements/test-002.html new file mode 100644 index 0000000000..397acd83e7 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/html-elements-in-shadow-trees/inert-html-elements/test-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_08_01_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/#inert-html-elements"> +<meta name="assert" content="HTML Elements in shadow trees: link element must behave as inert not as part of the document tree"> +<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(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + var link = d.createElement('link'); + link.setAttribute('rel', 'stylesheet'); + + //create Shadow root + var root = d.createElement('div'); + d.body.appendChild(root); + var s = root.attachShadow({mode: 'open'}); + + s.appendChild(link); + + assert_equals(d.styleSheets.length, 0, 'link element must behave as inert not as part of the document tree'); + + +}), 'A_08_01_02_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/resources/blank.html b/testing/web-platform/tests/shadow-dom/untriaged/resources/blank.html new file mode 100644 index 0000000000..5469aa6d0a --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/resources/blank.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> +<head></head> +<body></body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/shadow-dom/untriaged/resources/bobs_page.html b/testing/web-platform/tests/shadow-dom/untriaged/resources/bobs_page.html new file mode 100644 index 0000000000..92dfb0d3c8 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/resources/bobs_page.html @@ -0,0 +1,35 @@ +<html> +<head> +</head> +<body> + <ul class='stories'> + <li id='li1'><a href='#1'>Link1</a></li> + <li id='li2' title="li2"><a href='#2'>Link 2</a></li> + <li id='li3' class='shadow'><a href='#3'>Link 3 Shadow</a></li> + <li id='li4' class='shadow2'><a href='#4'>Link 4 Shadow 2</a></li> + <li id='li5'><a id="a5" class="shadow" href='#5'>Link 5</a></li> + <li id='li6' class='shadow'><a href='#5'>Link 6 Shadow</a></li> + </ul> + <div id="divid" class='breaking'> + <span id='spandex'>Some text</span> + <ul id="ul2"> + <li id='li11'>Item 11</li> + <li id='li12'>Item 12</li> + <li id='li13' class='shadow'>Item 13 Shadow</li> + <li id='li14' class='shadow2'>Item 14 Shadow 2</li> + <li id='li15'>Item 15</li> + <li id='li16' class='shadow'>Item 16 Shadow</li> + </ul> + </div> + <div id="links-wrapper"> + <a href='#10' id='link10'>Link 10</a> + <a href='#11' id='link11'>Link 11</a> + </div> + <div id="inputs-wrapper"> + <input type='text' id='inp1' disabled/> + <input type='text' id='inp2'/> + <input type='checkbox' id='chb1' checked> + <input type='checkbox' id='chb2'> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/nested-shadow-trees/nested_tree_reftest-ref.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/nested-shadow-trees/nested_tree_reftest-ref.html new file mode 100644 index 0000000000..3050cefe9d --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/nested-shadow-trees/nested_tree_reftest-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" > + <title>Shadow DOM Test Ref file - Tests nested shadow tree.</title> + <link rel="author" title="shingo.miyazawa" href="mailto:kumatronik@gmail.com" > + <script src="../../../../html/resources/common.js"></script> + <meta name="assert" content="nested shadow tree style is valid." > + <style> + #host { + width: 100px; + height: 100px; + background-color: red; + } + </style> + </head> + <body> + <p>The test passes if there is a green square. Test failed if there is a red square.</p> + <div id='host'> + <div id="sub" style="width: 100%;height:100%;"> + <div style="width:100%; height:100%;background-color: green;"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/nested-shadow-trees/nested_tree_reftest.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/nested-shadow-trees/nested_tree_reftest.html new file mode 100644 index 0000000000..8d02227fcf --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/nested-shadow-trees/nested_tree_reftest.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" > + <title>Shadow DOM Test - Tests nested shadow tree.</title> + <link rel="match" href="nested_tree_reftest-ref.html" > + <link rel="author" title="shingo.miyazawa" href="mailto:kumatronik@gmail.com" > + <link rel="help" href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#nested-shadow-trees" > + <script src="../../../../html/resources/common.js"></script> + <meta name="assert" content="nested shadow tree style is valid." > + <style> + #host { + width: 100px; + height: 100px; + background-color: red; + } + </style> + </head> + <body> + <p>The test passes if there is a green square. Test failed if there is a red square.</p> + <div id='host'> + </div> + <script> + var shadowRoot = document.getElementById('host').attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<div id="sub" style="width: 100%;height:100%;"></div>'; + var nestedRoot = shadowRoot.getElementById('sub').attachShadow({mode: 'open'}); + nestedRoot.innerHTML = '<div style="width:100%; height:100%;background-color: green;"></div>'; + </script> + </body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/reprojection/reprojection-001-ref.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/reprojection/reprojection-001-ref.html new file mode 100644 index 0000000000..c74cf99e70 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/reprojection/reprojection-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Shadow DOM Test: Basic reprojection (reference)</title> +<link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com"> +<link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> +<style> +.pass { color: green; } +</style> +</head> +<body> +<p>You should see green text saying "Apple" and "Orange" below.</p> +<div id="host"> + <div id="host2"> + <div>Hello a Shadow Root2.</div> + <div> + Hello a Shadow Root. + <div class="pass">Apple.</div> + <div class="pass">Orange.</div> + <div>Banana.</div> + </div> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/reprojection/reprojection-001.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/reprojection/reprojection-001.html new file mode 100644 index 0000000000..e2f5212b9a --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/reprojection/reprojection-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Shadow DOM Test - Tests a reprojection.</title> +<link rel="match" href="reprojection-001-ref.html"> +<link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com"> +<link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#reprojection"> +<meta name="assert" content="a node is distributed into more than one insertion point."> +<script src="../../../../html/resources/common.js"></script> +<style> +.pass { color: green; } +</style> +</head> +<body> +<p>You should see green text saying "Apple" and "Orange" below.</p> +<div id="host"> + <div class="pass">Apple.</div> + <div class="pass">Orange.</div> +</div> +<script> + var shadowRoot = host.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<div id="host2">Hello a Shadow Root.<slot></slot><div>Banana.</div></div>'; + var host2 = shadowRoot.getElementById("host2"); + var shadowRoot2 = host2.attachShadow({mode: 'open'}); + shadowRoot2.innerHTML = '<div>Hello a Shadow Root2.</div><div><slot></slot></div>'; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-001-ref.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-001-ref.html new file mode 100644 index 0000000000..619f337853 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Basic shadow root (reference)</title> +<link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<style> +p { color: black; } +div { color: green; } +</style> +</head> +<body> +<p>You should see green text saying "PASS" below.</p> +<div>PASS</div> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-001.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-001.html new file mode 100644 index 0000000000..99cacded05 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Basic shadow root</title> +<link rel="match" href="shadow-root-001-ref.html"> +<link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#shadow-trees"> +<meta name="assert" content="When a shadow root is attached, the shadow tree is rendered."> +<script src="../../../html/resources/common.js"></script> +<style> +p { color: black; } +* { color: red; } +</style> +</head> +<body> +<p>You should see green text saying "PASS" below.</p> +<div id="host">FAIL</div> +<script> +var shadowRoot = window.host.attachShadow({mode: 'open'}); +shadowRoot.innerHTML = + '<style>#pass { color: green; }</style>\n' + + '<div id="pass">PASS</div>'; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-002-ref.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-002-ref.html new file mode 100644 index 0000000000..eda41b9c04 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-002-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Basic distribution (reference)</title> +<link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<style> +p { color: black; } +div { color: green; } +</style> +</head> +<body> +<p> +You should see four lines of green text "A", "B", "C" and "D" below, +in this order. +</p> +<div>A</div> +<div>B</div> +<div>C</div> +<div>D</div> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-002.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-002.html new file mode 100644 index 0000000000..a26e817aae --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/shadow-root-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Shadow DOM Test: Basic distribution</title> +<link rel="match" href="shadow-root-002-ref.html"> +<link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#shadow-trees"> +<meta name="assert" content="On distribution, content element is replaced with the shadow host's children."> +<script src="../../../html/resources/common.js"></script> +<style> +p { color: black; } +.pass { color: green; } +* { color: red; } +</style> +</head> +<body> +<p> +You should see four lines of green text "A", "B", "C" and "D" below, +in this order. +</p> +<div id="host"> +<div class="pass">B</div> +<div class="pass">C</div> +</div> +<script> +var shadowRoot = window.host.attachShadow({mode: 'open'}); + +shadowRoot.innerHTML = + '<style>\n' + + '.shadow-pass { color: green; }\n' + + '* { color: red; }\n' + + '</style>' + + '<div class="shadow-pass">A</div>\n' + + '<slot>FAIL</slot>' + + '<div class="shadow-pass">D</div>'; +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/dom-tree-accessors-001.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/dom-tree-accessors-001.html new file mode 100644 index 0000000000..3007fafc54 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/dom-tree-accessors-001.html @@ -0,0 +1,218 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Upper-boundary encapsulation: document's DOM tree accessors</title> +<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The shadow nodes and named shadow elements are not accessible using shadow host's document DOM tree accessors."> +<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> +// A document's "DOM tree accessors" include: +// (document.)head, title, body, images, embeds, plugins, links, forms, +// scripts, getElementsByName(), cssElementMap, and currentScript +// +// Of these, it is unclear how document.cssElementMap can be tested. +// Except for it, there is a test corresponding to each accessor. +// +// Additionally, there are obsolete accessors +// <http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#other-elements,-attributes-and-apis>: +// (document.)anchors, applets, and all. +// +// and some accessors defined in the DOM specification (formerly known as +// "DOM Core") <http://dom.spec.whatwg.org/#interface-document>: +// (document.)documentElement, getElementsByTagName(), +// getElementsByTagNameNS(), getElementsByClassName(), and getElementById(). +// +// As it seems reasonable to have tests for these accessors, this file also +// includes tests for them, except for document.documentElement which is +// unclear whether we can test; the distribution process of Shadow DOM does not +// alter the host element, so the document element (e.g. <html>) cannot be +// replaced with an element in a shadow tree. + +// ---------------------------------------------------------------------------- +// Constants and utility functions + +// Place the same HTML content into both the host document and the shadow root. +// To differentiate these two, a class name is assigned to every element by +// populateTestContentToHostDocument() and populateTestContentToShadowRoot(). +var HTML_CONTENT = [ + '<head>', + '<title></title>', + '<link rel="help" href="#">', + '</head>', + '<body>', + '<p></p>', + '<a name="test-name"></a>', + '<a href="#"></a>', + '<area href="#">', + '<img src="#" alt="">', + '<embed></embed>', + '<form></form>', + '<script><' + '/script>', + '</body>' +].join('\n'); + +function addClassNameToAllElements(document, root, className) { + var nodeIterator = document.createNodeIterator( + root, NodeFilter.SHOW_ELEMENT, null); + var node; + while (node = nodeIterator.nextNode()) + node.className = className; +} + +function populateTestContentToHostDocument(document) { + document.documentElement.innerHTML = HTML_CONTENT; + addClassNameToAllElements(document, document.documentElement, 'host'); +} + +function populateTestContentToShadowRoot(shadowRoot) { + shadowRoot.innerHTML = HTML_CONTENT; + addClassNameToAllElements(shadowRoot.ownerDocument, shadowRoot, 'shadow'); +} + +function createDocumentForTesting() { + var doc = document.implementation.createHTMLDocument(''); + populateTestContentToHostDocument(doc); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + populateTestContentToShadowRoot(shadowRoot); + return doc; +} + +// Make sure the given HTMLCollection contains at least one elements and +// all elements have the class named "host". This function works well with +// HTMLCollection, HTMLAllCollection, and NodeList consisting of elements. +function assert_collection(collection) { + assert_true(collection.length > 0); + Array.prototype.forEach.call(collection, function (element) { + assert_equals(element.className, 'host'); + }); +} + +// ---------------------------------------------------------------------------- +// Tests for DOM tree accessors defined in HTML specification + +test(function () { + var doc = createDocumentForTesting(); + assert_equals(doc.head.className, 'host'); + assert_equals(doc.body.className, 'host'); +}, + '<head> and <body> in a shadow tree should not be accessible from ' + + 'owner document\'s "head" and "body" properties, respectively.' +); + +test(function () { + var doc = document.implementation.createHTMLDocument(''); + populateTestContentToHostDocument(doc); + + // Note: this test is originally written to replace document.documentElement + // with shadow contents, but among Shadow DOM V1 allowed elements body is the + // most approximate to it, though some test may make lesser sense. + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + populateTestContentToShadowRoot(shadowRoot); + + // Replace the content of <title> to distinguish elements in a host + // document and a shadow tree. + doc.getElementsByTagName('title')[0].textContent = 'Title of host document'; + shadowRoot.querySelector('title').textContent = + 'Title of shadow tree'; + + assert_equals(doc.title, 'Title of host document'); +}, + 'The content of title element in a shadow tree should not be accessible ' + + 'from owner document\'s "title" attribute.' +); + +function testHTMLCollection(accessor) { + var doc = createDocumentForTesting(); + assert_collection(doc[accessor]); +} + +generate_tests( + testHTMLCollection, + ['images', 'embeds', 'plugins', 'links', 'forms', 'scripts'].map( + function (accessor) { + return [ + 'Elements in a shadow tree should not be accessible from ' + + 'owner document\'s "' + accessor + '" attribute.', + accessor + ]; + })); + +test(function () { + var doc = createDocumentForTesting(); + assert_collection(doc.getElementsByName('test-name')); +}, + 'Elements in a shadow tree should not be accessible from owner ' + + 'document\'s getElementsByName() method.' +); + +// ---------------------------------------------------------------------------- +// Tests for obsolete accessors + +generate_tests( + testHTMLCollection, + ['anchors', 'all'].map( + function (accessor) { + return [ + 'Elements in a shadow tree should not be accessible from ' + + 'owner document\'s "' + accessor + '" attribute.', + accessor + ]; + })); + +// ---------------------------------------------------------------------------- +// Tests for accessors defined in DOM specification + +test(function () { + var doc = createDocumentForTesting(); + assert_collection(doc.getElementsByTagName('p')); +}, + 'Elements in a shadow tree should not be accessible from owner ' + + 'document\'s getElementsByTagName() method.' +); + +test(function () { + // Create a XML document. + var namespace = 'http://www.w3.org/1999/xhtml'; + var doc = document.implementation.createDocument(namespace, 'html'); + doc.documentElement.appendChild(doc.createElementNS(namespace, 'head')); + var body = doc.createElementNS(namespace, 'body'); + var pHost = doc.createElementNS(namespace, 'p'); + pHost.className = "host"; + body.appendChild(pHost); + doc.documentElement.appendChild(body); + + var shadowRoot = body.attachShadow({mode: 'open'}); + var pShadow = doc.createElementNS(namespace, 'p'); + pShadow.className = "shadow"; + shadowRoot.appendChild(pShadow); + + assert_collection(doc.getElementsByTagNameNS(namespace, 'p')); +}, + 'Elements in a shadow tree should not be accessible from owner ' + + 'document\'s getElementsByTagNameNS() method.' +); + +test(function () { + var doc = document.implementation.createHTMLDocument(''); + populateTestContentToHostDocument(doc); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + populateTestContentToShadowRoot(shadowRoot); + + shadowRoot.querySelectorAll('p')[0].id = 'test-id'; + assert_equals(doc.getElementById('test-id'), null); +}, + 'Elements in a shadow tree should not be accessible from owner ' + + 'document\'s getElementById() method.' +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/dom-tree-accessors-002.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/dom-tree-accessors-002.html new file mode 100644 index 0000000000..88a2efc2d3 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/dom-tree-accessors-002.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Upper-boundary encapsulation: shadow root's DOM tree accessors</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The nodes are accessible using shadow root's DOM tree accessor methods."> +<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> +function assert_singleton_node_list(nodeList, expectedNode) { + assert_equals(nodeList.length, 1); + assert_equals(nodeList[0], expectedNode); +} + +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var image = doc.createElement('img'); + shadowRoot.appendChild(image); + + assert_singleton_node_list(shadowRoot.querySelectorAll('img'), image); +}, + 'Elements in a shadow tree should be accessible via shadow root\'s ' + + 'querySelectorAll() DOM tree accessor.' +); + +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var div = doc.createElement('div'); + div.className = 'div-class'; + shadowRoot.appendChild(div); + + assert_singleton_node_list( + shadowRoot.querySelectorAll('.div-class'), div); +}, + 'Elements with a specific class in a shadow tree should be accessible via' + + 'shadow root\'s querySelectorAll() DOM tree accessor.' +); + +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var div = doc.createElement('div'); + div.id = 'div-id'; + shadowRoot.appendChild(div); + + assert_equals(shadowRoot.getElementById('div-id'), div); +}, + 'Elements in a shadow tree should be accessible via shadow root\'s ' + + 'getElementById() DOM tree accessor.' +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/ownerdocument-001.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/ownerdocument-001.html new file mode 100644 index 0000000000..58c8adc087 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/ownerdocument-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Upper-boundary encapsuration on ownerDocument: basic tests</title> +<link rel="author" title="Aleksei Yu. Semenov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The ownerDocument property of all nodes in shadow tree refers to the document of the shadow host."> +<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> +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + doc.body.innerHTML = '<div>A<div>B</div>C<div><span>D</span></div>E</div>'; + var nodeIterator = doc.createNodeIterator(doc.body, + NodeFilter.SHOW_ELEMENT, null); + var node; + while (node = nodeIterator.nextNode()) { + var shadowRoot = node.attachShadow({mode: 'open'}); + assert_equals(shadowRoot.ownerDocument, doc); + } +}, 'ownerDocument property of a shadow root should be the document of the ' + + 'shadow host, regardless of the location of the shadow host.'); + +test(function () { + var MAX_DEPTH = 16; + var doc = document.implementation.createHTMLDocument('Test'); + var tail = doc.body; + for (var depth = 1; depth <= MAX_DEPTH; ++depth) { + var div = doc.createElement('div'); + div.id = 'depth-' + depth; + tail.appendChild(div); + tail = div; + } + + for (var depth = 1; depth <= MAX_DEPTH; ++depth) { + var host = doc.getElementById('depth-' + depth); + var shadowRoot = host.attachShadow({mode: 'open'}); + assert_equals(shadowRoot.ownerDocument, doc, + 'ownerDocument mismatch for #depth-' + depth); + } +}, 'ownerDocument property of elements in a shadow tree should match ' + + 'the document of the shadow host, regardless of the element\'s location ' + + 'in a shadow tree.'); + +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var div = doc.createElement('div'); + shadowRoot.appendChild(div); + assert_equals(div.ownerDocument, doc); +}, 'Elements added to a shadow tree should automatically get a valid ' + + 'ownerDocument.'); + +test(function () { + var doc1 = document.implementation.createHTMLDocument('Test 1'); + var doc2 = document.implementation.createHTMLDocument('Test 2'); + var shadowRoot = doc1.body.attachShadow({mode: 'open'}); + var div = doc2.createElement('div'); + shadowRoot.appendChild(div); + assert_equals(div.ownerDocument, doc1); +}, 'ownerDocument property of an element in a shadow tree should be the ' + + 'document of the shadow host, even if the host element is created from ' + + 'another document.'); + +test(function () { + var doc1 = document.implementation.createHTMLDocument('Test 1'); + var doc2 = document.implementation.createHTMLDocument('Test 2'); + var shadowRoot = doc1.body.attachShadow({mode: 'open'}); + doc2.body.innerHTML = + '<div id="root">A<div>B</div>C<div><span>D</span></div>E</div>'; + shadowRoot.appendChild(doc2.getElementById('root')); + var nodeIterator = doc1.createNodeIterator( + shadowRoot.getElementById('root'), 0xFFFFFFFF, null); + var node; + while (node = nodeIterator.nextNode()) { + assert_equals(node.ownerDocument, doc1); + } +}, 'All children nodes of a shadow root get a valid ownerDocument when ' + + 'added to a shadow tree.'); + +test(function () { + var doc1 = document.implementation.createHTMLDocument('Test 1'); + var doc2 = document.implementation.createHTMLDocument('Test 2'); + var shadowRoot = doc1.body.attachShadow({mode: 'open'}); + doc2.body.innerHTML = '<div id="parent"><div id="child"></div></div>'; + shadowRoot.appendChild(doc2.getElementById('child')); + assert_equals(doc2.getElementById('parent').ownerDocument, doc2); +}, 'ownerDocument property of a node should remain the same, even if its ' + + 'child is adopted into a shadow tree.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/ownerdocument-002.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/ownerdocument-002.html new file mode 100644 index 0000000000..3ef53fc5ab --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/ownerdocument-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Upper-boundary encapsuration on ownerDocument: with all HTML5 elements</title> +<link rel="author" title="Aleksei Yu. Semenov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The ownerDocument property of all nodes in shadow tree refers to the document of the shadow host."> +<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> +function testElement(elementName) { + var doc = document.implementation.createHTMLDocument('Test'); + var element = doc.createElement(elementName); + doc.body.appendChild(element); + var shadowRoot = element.attachShadow({mode: 'open'}); + HTML5_SHADOW_ALLOWED_ELEMENTS.forEach(function (name) { + shadowRoot.appendChild(doc.createElement(name)); + }); + + var iterator = doc.createNodeIterator(shadowRoot, 0xFFFFFFFF, null); + var node; + while (node = iterator.nextNode()) { + assert_equals(node.ownerDocument, doc); + } +} + +var testParameters = HTML5_SHADOW_ALLOWED_ELEMENTS.map(function (name) { + return [ + 'ownerDocument property of any elements in a shadow tree should ' + + 'match the document of the shadow host, when the host is a "' + + name + '" element.', + name + ]; +}); + +generate_tests(testElement, testParameters); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/selectors-api-001.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/selectors-api-001.html new file mode 100644 index 0000000000..f3ca2b786f --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/selectors-api-001.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Upper-boundary encapsulation: document's Selector APIs</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: Nodes in a shadow tree must not be accessible through selector APIs of owner document."> +<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> +// Return a document containing the structure below: +// +// <body> - - - - - {shadow-root} +// | | +// | +-- <p class="test-class" id="test-id"> +// | +// +-- <p class="test-class" id="test-id"> +function createTestDocument() { + var doc = document.implementation.createHTMLDocument('Test'); + var pHost = doc.createElement('p'); + pHost.className = 'test-class'; + pHost.id = 'test-id'; + doc.body.appendChild(pHost); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var pShadow = doc.createElement('p'); + pShadow.className = 'test-class'; + pShadow.id = 'test-id'; + shadowRoot.appendChild(pShadow); + return { + doc: doc, + pHost: pHost, + pShadow: pShadow + }; +} + +test(function () { + var documentObject = createTestDocument(); + var doc = documentObject.doc; + var pHost = documentObject.pHost; + assert_equals(doc.querySelector('p'), pHost); + assert_equals(doc.querySelector('.test-class'), pHost); + assert_equals(doc.querySelector('#test-id'), pHost); +}, + 'Elements in a shadow tree should not be accessible from ' + + 'owner document\'s querySelector() method.' +); + +function assert_singleton_node_list(nodeList, expectedNode) { + assert_equals(nodeList.length, 1); + assert_equals(nodeList[0], expectedNode); +} + +test(function () { + var documentObject = createTestDocument(); + var doc = documentObject.doc; + var pHost = documentObject.pHost; + assert_singleton_node_list(doc.querySelectorAll('p'), pHost); + assert_singleton_node_list(doc.querySelectorAll('.test-class'), pHost); + assert_singleton_node_list(doc.querySelectorAll('#test-id'), pHost); +}, + 'Elements in a shadow tree should not be accessible from ' + + 'owner document\'s querySelectorAll() method.' +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/selectors-api-002.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/selectors-api-002.html new file mode 100644 index 0000000000..6167f57e4e --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/selectors-api-002.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Upper-boundary encapsulation: shadow root's Selector APIs</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: Nodes in a shadow tree must be accessible through selector APIs of the shadow root."> +<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> +// Return a document containing the structure below: +// +// <body> - - - - - {shadow-root} +// | | +// | +-- <p class="test-class" id="test-id"> +// | +// +-- <p class="test-class" id="test-id"> +function createTestDocument() { + var doc = document.implementation.createHTMLDocument('Test'); + var pHost = doc.createElement('p'); + pHost.className = 'test-class'; + pHost.id = 'test-id'; + doc.body.appendChild(pHost); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var pShadow = doc.createElement('p'); + pShadow.className = 'test-class'; + pShadow.id = 'test-id'; + shadowRoot.appendChild(pShadow); + return { + doc: doc, + shadowRoot: shadowRoot, + pHost: pHost, + pShadow: pShadow + }; +} + +test(function () { + var documentObject = createTestDocument(); + var shadowRoot = documentObject.shadowRoot; + var pShadow = documentObject.pShadow; + assert_equals(shadowRoot.querySelector('p'), pShadow); + assert_equals(shadowRoot.querySelector('.test-class'), pShadow); + assert_equals(shadowRoot.querySelector('#test-id'), pShadow); +}, + 'Elements in a shadow tree should be accessible from ' + + 'shadow root\'s querySelector() method.' +); + +function assert_singleton_node_list(nodeList, expectedNode) { + assert_equals(nodeList.length, 1); + assert_equals(nodeList[0], expectedNode); +} + +test(function () { + var documentObject = createTestDocument(); + var shadowRoot = documentObject.shadowRoot; + var pShadow = documentObject.pShadow; + assert_singleton_node_list(shadowRoot.querySelectorAll('p'), pShadow); + assert_singleton_node_list(shadowRoot.querySelectorAll('.test-class'), + pShadow); + assert_singleton_node_list(shadowRoot.querySelectorAll('#test-id'), + pShadow); +}, + 'Elements in a shadow tree should be accessible from ' + + 'shadow root\'s querySelectorAll() method.' +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/shadow-root-001.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/shadow-root-001.html new file mode 100644 index 0000000000..97f5c35717 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/shadow-root-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Shadow root's parentNode() and parentElement()</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The parentNode and parentElement attributes of the shadow root object must always return null."> +<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> +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + assert_equals(shadowRoot.parentNode, null); +}, 'The parentNode attribute of a shadow root must always return null.'); + +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + assert_equals(shadowRoot.parentElement, null); +}, 'The parentElement attribute of a shadow root must always return null.'); + +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var outerShadowRoot = doc.body.attachShadow({mode: 'open'}); + var div = doc.createElement('div'); + outerShadowRoot.appendChild(div); + var innerShadowRoot = div.attachShadow({mode: 'open'}); + assert_equals(innerShadowRoot.parentNode, null); +}, + 'The parentNode attribute of a shadow root must always return null, ' + + 'even if the shadow root is nested inside another shadow root.' +); + +test(function () { + var doc = document.implementation.createHTMLDocument('Test'); + var outerShadowRoot = doc.body.attachShadow({mode: 'open'}); + var div = doc.createElement('div'); + outerShadowRoot.appendChild(div); + var innerShadowRoot = div.attachShadow({mode: 'open'}); + assert_equals(innerShadowRoot.parentElement, null); +}, + 'The parentElement attribute of a shadow root must always return null, ' + + 'even if the shadow root is nested inside another shadow root.' +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-005.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-005.html new file mode 100644 index 0000000000..b82a9523a9 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-005.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_04_01_05</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/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation:The nodes with a unique id and named elements are not addressable from any attributes of elements in shadow host's document"> +<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> +// check label.for attribute +test(function () { + var d = newHTMLDocument(); + var div = d.createElement('div'); + d.body.appendChild(div); + var s = div.attachShadow({mode: 'open'}); + + // node in shadow with id + var input = d.createElement('input'); + input.setAttribute('type', 'text'); + input.setAttribute('id', 'input_id'); + d.body.appendChild(input); + s.appendChild(input); + + // node in host with a reference to host element with id + var label = d.createElement('label'); + label.setAttribute('for', 'input_id'); + d.body.appendChild(label); + + assert_equals(label.control, null, 'Elements in shadow DOM must not be accessible from ' + + 'owner\'s document label.for attribute'); + +}, 'A_04_01_05_T01'); + +// check form associated elements +test(function () { + + HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { + var d = newHTMLDocument(); + var div = d.createElement('div'); + d.body.appendChild(div); + var s = div.attachShadow({mode: 'open'}); + + var form = d.createElement('form'); + form.setAttribute('id', 'form_id'); + d.body.appendChild(form); + + var el = d.createElement(tagName); + el.setAttribute('form', 'form_id'); + d.body.appendChild(el); + + s.appendChild(form); + + assert_equals(el.form, null, 'Elements in shadow DOM must not be accessible from ' + + 'owner\'s document ' + tagName + '.form attribute'); + }); +}, 'A_04_01_05_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-007.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-007.html new file mode 100644 index 0000000000..0cfe169b44 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-007.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_04_01_07</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/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation:The nodes with a unique id and named elements are addressable from any attributes of elements in the same 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> +// check for label.control +test(function () { + var d = newHTMLDocument(); + var div = d.createElement('div'); + d.body.appendChild(div); + var s = div.attachShadow({mode: 'open'}); + + var input = d.createElement('input'); + input.setAttribute('type', 'text'); + input.setAttribute('id', 'input_id'); + d.body.appendChild(input); + + var label = d.createElement('label'); + label.setAttribute('for', 'input_id'); + s.appendChild(label); + s.appendChild(input); + + assert_equals(label.control, input, 'Elements in shadow DOM must be accessible from ' + + 'shadow document label.for attribute'); + +}, 'A_04_01_07_T01'); + +// check for elem.form associated elements +test(function () { + + HTML5_FORM_ASSOCIATED_ELEMENTS.forEach(function (tagName) { + d = newHTMLDocument(); + + var form = d.createElement('form'); + var el = d.createElement(tagName); + + d.body.appendChild(form); + d.body.appendChild(el); + + form.setAttribute('id', 'form_id'); + el.setAttribute('form', 'form_id'); + + div = d.createElement('div'); + d.body.appendChild(div); + + var s = div.attachShadow({mode: 'open'}); + s.appendChild(form); + s.appendChild(el); + + assert_equals(el.form, form, 'Elements in shadow DOM must be accessible from ' + + 'shadow document ' + tagName + '.form attribute'); + }); +}, 'A_04_01_07_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-009.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-009.html new file mode 100644 index 0000000000..f37f17bc1a --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-009.html @@ -0,0 +1,235 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_04_01_09</title> +<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Mikhail Fursov" href="mailto:mfursov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: no nodes other than shadow root descendants are accessible with shadow root DOM tree accessor methods"> +<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_04_01_09 = new Object(); + +A_04_01_09.setupBlock = function (ctx, prefix, root) { + // create <div id='prefix+_id1' class='cls'><p class='cls'><div id='prefix+_id2' class='cls'></div></p></div> like structure + // where <p> will be used as shadow host element + + ctx[prefix + '_div1'] = ctx.d.createElement('div'); + ctx[prefix + '_div1'].setAttribute('id', prefix + '_id1'); + ctx[prefix + '_div1'].setAttribute('class', 'cls'); + + ctx[prefix + '_p1'] = ctx.d.createElement('p'); + ctx[prefix + '_p1'].setAttribute('class', 'cls'); + ctx[prefix + '_p1'].setAttribute('test', 'A_04_01_09'); + + ctx[prefix + '_div2'] = ctx.d.createElement('div'); + ctx[prefix + '_div2'].setAttribute('id', prefix + '_id2'); + ctx[prefix + '_div2'].setAttribute('class', 'cls'); + ctx[prefix + '_div2'].setAttribute('test', 'A_04_01_09'); + + root.appendChild(ctx[prefix + '_div1']); + ctx[prefix + '_div1'].appendChild(ctx[prefix + '_p1']); + ctx[prefix + '_p1'].appendChild(ctx[prefix + '_div2']); +}; + +A_04_01_09.setup = function () { + var ctx = {}; + + ctx.d = newHTMLDocument(); + A_04_01_09.setupBlock(ctx, 'd', ctx.d.body); + + ctx.s1 = ctx.d_p1.attachShadow({mode: 'open'}); + A_04_01_09.setupBlock(ctx, 's1', ctx.s1); + + ctx.s2 = ctx.s1_p1.attachShadow({mode: 'open'}); + A_04_01_09.setupBlock(ctx, 's2', ctx.s2); + + assert_true(ctx.d_div1 != null, 'setup:d_div1'); + assert_true(ctx.d_div2 != null, 'setup:d_div2'); + assert_true(ctx.s1_div1 != null, 'setup: s1_div1'); + assert_true(ctx.s1_div2 != null, 'setup: s1_div2'); + assert_true(ctx.s2_div1 != null, 'setup: s2_div1'); + assert_true(ctx.s2_div2 != null, 'setup: s2_div2'); + + return ctx; +}; + +//check querySelectorAll +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder( + ctx.s1.querySelectorAll('div'), [ctx.s1_div1, ctx.s1_div2], + 'nodes, other than shadow root descendants, should not be accessible with ' + + 'ShadowRoot.getElementsByTagName (s1)'); + + assert_nodelist_contents_equal_noorder( + ctx.s2.querySelectorAll('div'), [ctx.s2_div1, ctx.s2_div2], + 'nodes, other than shadow root descendants, should not be accessible with ' + + 'ShadowRoot.getElementsByTagName (s2)'); + +}, 'A_04_01_09_T01'); + +//check querySelectorAll for class +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder( + ctx.s1.querySelectorAll('.cls'), [ctx.s1_div1, ctx.s1_p1, ctx.s1_div2], + 'nodes, other than shadow root descendants, should not be accessible with ' + + 'ShadowRoot.getElementsByClassName (s1)'); + + assert_nodelist_contents_equal_noorder( + ctx.s2.querySelectorAll('.cls'), [ctx.s2_div1, ctx.s2_p1, ctx.s2_div2], + 'nodes, other than shadow root descendants, should not be accessible with ' + + 'ShadowRoot.getElementsByClassName (s2)'); + +}, 'A_04_01_09_T03'); + +// check querySelector for id +test(function () { + var ctx = A_04_01_09.setup(); + + assert_equals(ctx.d.querySelector('#s1_id1'), null, 'Expected no access to s1_div1 from d.querySelector()'); + assert_equals(ctx.d.querySelector('#s1_id2'), null, 'Expected no access to s1_div2 from d.querySelector()'); + assert_equals(ctx.d.querySelector('#s2_id1'), null, 'Expected no access to s2_div1 from d.querySelector()'); + assert_equals(ctx.d.querySelector('#s2_id2'), null, 'Expected no access to s2_div1 from d.querySelector()'); + + assert_equals(ctx.s1.querySelector('#d_id1'), null, 'Expected no access to d_div1 from s1.querySelector()'); + assert_equals(ctx.s1.querySelector('#d_id2'), null, 'Expected no access to d_div2 from s1.querySelector()'); + assert_equals(ctx.s2.querySelector('#d_id1'), null, 'Expected no access to d_div1 from s2.querySelector()'); + assert_equals(ctx.s2.querySelector('#d_id2'), null, 'Expected no access to d_div1 from s2.querySelector()'); + + assert_equals(ctx.d.querySelector('#d_id1'), ctx.d_div1, 'Expected access to d_div1 form d.querySelector()'); + assert_equals(ctx.d.querySelector('#d_id2'), ctx.d_div2, 'Expected access to d_div2 form d.querySelector()'); + assert_equals(ctx.s1.querySelector('#s1_id1'), ctx.s1_div1, 'Expected access to s1_div1 form s1.querySelector()'); + assert_equals(ctx.s1.querySelector('#s1_id2'), ctx.s1_div2, 'Expected access to s1_div2 form s1.querySelector()'); + assert_equals(ctx.s2.querySelector('#s2_id1'), ctx.s2_div1, 'Expected access to s2_div1 form s2.querySelector()'); + assert_equals(ctx.s2.querySelector('#s2_id2'), ctx.s2_div2, 'Expected access to s2_div2 form s2.querySelector()'); + + assert_equals(ctx.s1.querySelector('#s2_id1'), null, 'Expected no access to s2_div1 form s1.querySelector()'); + assert_equals(ctx.s1.querySelector('#s2_id2'), null, 'Expected no access to s2_div2 form s1.querySelector()'); + assert_equals(ctx.s2.querySelector('#s1_id1'), null, 'Expected no access to s1_div1 form s2.querySelector()'); + assert_equals(ctx.s2.querySelector('#s1_id2'), null, 'Expected no access to s1_div2 form s2.querySelector()'); + +}, 'A_04_01_09_T05'); + + +//check querySelector for element +test(function () { + var ctx = A_04_01_09.setup(); + + assert_equals(ctx.d.querySelector('p'), ctx.d_p1, 'Expected access to d_p1 from d.querySelector()'); + assert_equals(ctx.s1.querySelector('p'), ctx.s1_p1, 'Expected access to s1_p1 from s1.querySelector()'); + assert_equals(ctx.s2.querySelector('p'), ctx.s2_p1, 'Expected access to s2_p1 from s2.querySelector()'); + +}, 'A_04_01_09_T06'); + +// check querySelectorAll for element +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('p'), [ctx.d_p1], 'Expected access to d_p1 from d.querySelectorAll()'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('p'), [ctx.s1_p1], 'Expected access to s1_p1 s1.querySelectorAll'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('p'), [ctx.s2_p1], 'Expected access to s2_p1 from s2.querySelectorAll'); + +}, 'A_04_01_09_T07'); + +// check querySelectorAll for class +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('.cls'), [ctx.d_div1, ctx.d_p1, ctx.d_div2], 'd.querySelectorAll() return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('.cls'), [ctx.s1_div1, ctx.s1_p1, ctx.s1_div2], 's1.querySelectorAll() return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('.cls'), [ctx.s2_div1, ctx.s2_p1, ctx.s2_div2], 's2.querySelectorAll() return wrong result'); + +}, 'A_04_01_09_T08'); + +//check querySelectorAll with whildcat +test(function () { + var ctx = A_04_01_09.setup(); + + //assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('*'), [ctx.d_div1, ctx.d_p1, ctx.d_div2], 'd.querySelectorAll'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('*'), [ctx.s1_div1, ctx.s1_p1, ctx.s1_div2], 's1.querySelectorAll(\'*\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('*'), [ctx.s2_div1, ctx.s2_p1, ctx.s2_div2], 's2.querySelectorAll(\'*\') return wrong result'); + +}, 'A_04_01_09_T09'); + +//check querySelectorAll with attribute value +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('[test=A_04_01_09]'), [ctx.d_p1, ctx.d_div2], 'd.querySelectorAll(\'[test=A_04_01_09]\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('[test=A_04_01_09]'), [ctx.s1_p1, ctx.s1_div2], 's1.querySelectorAll(\'[test=A_04_01_09]\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('[test=A_04_01_09]'), [ctx.s2_p1, ctx.s2_div2], 's2.querySelectorAll(\'[test=A_04_01_09]\') return wrong result'); + +}, 'A_04_01_09_T10'); + +//check querySelectorAll with parent-child selection +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('div:first-child'), [ctx.d_div1, ctx.d_div2], 'd.querySelectorAll(\'div:first-child\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('div:first-child'), [ctx.s1_div1,ctx.s1_div2], 's1.querySelectorAll(\'div:first-child\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('div:first-child'), [ctx.s2_div1,ctx.s2_div2], 's2.querySelectorAll(\'div:first-child\') return wrong result'); + +}, 'A_04_01_09_T11'); + +//check querySelectorAll with parent-child selection +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('div:last-child'), [ctx.d_div1, ctx.d_div2], 'd.querySelectorAll(\'div:last-child\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('div:last-child'), [ctx.s1_div1, ctx.s1_div2], 's1.querySelectorAll(\'div:last-child\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('div:last-child'), [ctx.s2_div1, ctx.s2_div2], 's2.querySelectorAll(\'div:last-child\') return wrong result'); + +}, 'A_04_01_09_T12'); + +//check querySelectorAll with parent-child selection +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('p:only-child'), [ctx.d_p1], 'd.querySelectorAll(\'p:only-child\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('p:only-child'), [ctx.s1_p1], 's1.querySelectorAll(\'p:only-child\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('p:only-child'), [ctx.s2_p1], 's2.querySelectorAll(\'p:only-child\') return wrong result'); + +}, 'A_04_01_09_T13'); + +//check querySelectorAll with parent-child selection +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('div:empty'), [ctx.d_div2], 'd.querySelectorAll(\'div:empty\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('div:empty'), [ctx.s1_div2], 's1.querySelectorAll(\'div:empty\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('div:empty'), [ctx.s2_div2], 's2.querySelectorAll(\'div:empty\') return wrong result'); + +}, 'A_04_01_09_T14'); + +//check querySelectorAll with parent-child selection +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('p div'), [ctx.d_div2], 'd.querySelectorAll(\'p div\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('p div'), [ctx.s1_div2], 's1.querySelectorAll(\'p div\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('p div'), [ctx.s2_div2], 's2.querySelectorAll(\'p div\') return wrong result'); + +}, 'A_04_01_09_T15'); + +//check querySelectorAll with parent-child selection +test(function () { + var ctx = A_04_01_09.setup(); + + assert_nodelist_contents_equal_noorder(ctx.d.querySelectorAll('p > div'), [ctx.d_div2], 'd.querySelectorAll(\'p > div\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s1.querySelectorAll('p > div'), [ctx.s1_div2], 's1.querySelectorAll(\'p > div\') return wrong result'); + assert_nodelist_contents_equal_noorder(ctx.s2.querySelectorAll('p > div'), [ctx.s2_div2], 's2.querySelectorAll(\'p > div\') return wrong result'); + +}, 'A_04_01_09_T16'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-011.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-011.html new file mode 100644 index 0000000000..48ac1c7540 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/test-011.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_04_01_11</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/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation:The style sheets, represented by the shadow nodes are not accessible using shadow host document's CSSOM extensions"> +<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> +// check that <link> element added to head is not exposed +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + var initialStyleSheetsCount = d.styleSheets.length; + + var link = d.createElement('link'); + link.setAttribute('rel', 'stylesheet'); + d.body.appendChild(link); + + //create Shadow root + var root = d.createElement('div'); + d.body.appendChild(root); + var s = root.attachShadow({mode: 'open'}); + + s.appendChild(link); + + assert_equals(d.styleSheets.length, initialStyleSheetsCount, 'stylesheet link elements in shadow DOM must not be ' + + 'exposed via the document.styleSheets collection'); + + +}), 'A_04_01_11_T2'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-001.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-001.html new file mode 100644 index 0000000000..6e4cbbd9b7 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Window object named properties: Frames</title> +<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The nodes and named elements are not accessible from Window object named properties."> +<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> +test(function () { + var host = document.createElement('div'); + try { + host.style.display = 'none'; + document.body.appendChild(host); + var shadowRoot = host.attachShadow({mode: 'open'}); + var iframe = document.createElement('iframe'); + iframe.style.display = 'none'; + iframe.name = 'test-name'; + shadowRoot.appendChild(iframe); + assert_false('test-name' in window); + } finally { + if (host.parentNode) + host.parentNode.removeChild(host); + } +}, + 'An iframe element in a shadow tree should not be accessible from ' + + 'window\'s named properties with its "name" attribute value.' +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-002.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-002.html new file mode 100644 index 0000000000..957e087e86 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Window object named properties: "name" attribute</title> +<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The nodes and named elements are not accessible from Window object named properties."> +<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> +function testNameAttribute(elementName) { + var doc = document.implementation.createHTMLDocument('Title'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var element = doc.createElement(elementName); + element.name = 'test-name'; + shadowRoot.appendChild(element); + assert_false('test-name' in window); +} + +var namedElements = [ + 'a', 'applet', 'area', 'embed', 'form', 'frameset', 'img', 'object' +]; + +var nameAttributeTestParameter = namedElements.map(function (elementName) { + return [ + '"' + elementName + '" element with name attribute in a shadow tree ' + + 'should not be accessible from window object\'s named property.', + elementName + ]; +}); + +generate_tests(testNameAttribute, nameAttributeTestParameter); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-003.html b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-003.html new file mode 100644 index 0000000000..00d3931266 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/shadow-trees/upper-boundary-encapsulation/window-named-properties-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Window object named properties: "id" attribute</title> +<link rel="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#upper-boundary-encapsulation"> +<meta name="assert" content="Upper-boundary encapsulation: The nodes and named elements are not accessible from Window object named properties."> +<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> +function testIDAttribute(elementName) { + var doc = document.implementation.createHTMLDocument('Title'); + var shadowRoot = doc.body.attachShadow({mode: 'open'}); + var element = doc.createElement(elementName); + element.id = 'test-id'; + shadowRoot.appendChild(element); + assert_false('test-id' in window); +} + +var idAttributeTestParameter = HTML5_ELEMENTS.map(function (elementName) { + return [ + '"' + elementName + '" element with id attribute in a shadow tree ' + + 'should not be accessible from window object\'s named property.', + elementName + ]; +}); + +generate_tests(testIDAttribute, idAttributeTestParameter); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001-ref.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001-ref.html new file mode 100644 index 0000000000..947c01a8f5 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test</title> +<link rel="author" title="Kazuhito Hokamura" href="mailto:k.hokamura@gmail.com"> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +</head> +<body> +<p>Test passes if following box is green.</p> +<div></div> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001.html new file mode 100644 index 0000000000..99c130ef59 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test - Tests CSS rules must not apply in a shadow root</title> +<link rel="match" href="not-apply-in-shadow-root-001-ref.html"> +<link rel="author" title="Kazuhito Hokamura" href="mailto:k.hokamura@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#styles"> +<meta name="assert" content="Styles: CSS rules declared in an enclosing tree must not apply in a shadow tree if apply-author-styles flag is not set."> +<script src="../../../html/resources/common.js"></script> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +</head> +<body> +<p>Test passes if following box is green.</p> +<div id="shadow-host"></div> +<script> +var shadowHost = document.getElementById('shadow-host'); +var shadowRoot = shadowHost.attachShadow({mode: 'open'}); +var style = document.createElement('style'); +style.innerHTML = 'div { background: red }'; + +shadowRoot.appendChild(style); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-001.html new file mode 100644 index 0000000000..d773d248c1 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-001.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_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/#styles"> +<meta name="assert" content="Styles: CSS rules declared in an enclosing tree must not apply in a shadow tree if apply-author-styles flag is set to false for this tree"> +<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 apply-author-styles flag of ShadowRoot object (default value) +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + d.head.innerHTML = '<style>' + + '.invis {' + + 'display:none;' + + '}' + + '</style>'; + + var host = d.createElement('div'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var div1 = d.createElement('div'); + div1.innerHTML ='<span id="shd" class="invis">This is the shadow tree</span>'; + s.appendChild(div1); + + //apply-author-styles flag is false by default. Invisible style shouldn't be applied + assert_true(s.querySelector('#shd').offsetTop > 0, + 'CSS styles declared in enclosing tree must not be applied in a shadow tree ' + + 'if the apply-author-styles flag is set to false'); + + +}), 'A_06_00_01_T01'); + + +//test apply-author-styles flag of ShadowRoot object (set it) +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + d.head.innerHTML = '<style>' + + '.invis {' + + 'display:none;' + + '}' + + '</style>'; + + var host = d.createElement('div'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var div1 = d.createElement('div'); + div1.innerHTML ='<span id="shd" class="invis">This is the shadow tree</span>'; + s.appendChild(div1); + + //apply-author-styles flag is set to false. Invisible style shouldn't be applied + assert_true(s.querySelector('#shd').offsetTop > 0, + 'CSS styles declared in enclosing tree must not be applied in a shadow tree ' + + 'if the apply-author-styles flag is set to false'); + + +}), 'A_06_00_01_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-003.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-003.html new file mode 100644 index 0000000000..b5b2529861 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_00_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/#styles"> +<meta name="assert" content="Styles: Each shadow root has an associated list of zero or more style sheets, named shadow root style sheets"> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + var host = d.createElement('div'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + assert_equals(s.styleSheets.length, 0, 'There should be no style sheets'); +}), 'A_06_00_03_T01'); + + +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + var host = d.createElement('div'); + host.setAttribute('style', 'width:100px'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + assert_equals(s.styleSheets.length, 0, 'There should be no style sheets'); +}), 'A_06_00_03_T02'); + +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + var host = d.createElement('div'); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var style = d.createElement('style'); + style.textContent = 'div {width: 50%;}'; + s.appendChild(style); + + d.body.appendChild(host); + assert_equals(s.styleSheets.length, 1, 'Style sheet is not accessible via styleSheets'); +}), 'A_06_00_03_T03'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-005.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-005.html new file mode 100644 index 0000000000..94dbb551dc --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-005.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_00_06</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/#styles"> +<meta name="assert" content="Styles:CSS rules declared in a shadow root style sheets must not apply in the document tree,"> +<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> +//check querySelector method +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + d.body.innerHTML = + '<div>' + + '<span class="invis" id="theTreeSpan">This is an element in the document tree</span>' + + '</div>' + + '<div id="sr">' + + '</div>'; + + var host = d.querySelector('#sr'); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var style = d.createElement('style'); + style.innerHTML ='.invis {display:none}'; + s.appendChild(style); + + var span = d.createElement('span'); + span.setAttribute('id', 'theShadowSpan'); + span.setAttribute('class', 'invis'); + s.appendChild(span); + + //theTreeSpan should be visible, theShadowSpan not + assert_true(d.querySelector('#theTreeSpan').offsetTop > 0, + 'CSS styles declared in shadow tree must not be applied to the elements ' + + 'in the document tree'); + + //theTreeSpan should be visible, theShadowSpan not + assert_equals(s.querySelector('#theShadowSpan').offsetTop, 0, + 'CSS styles declared in shadow tree must be applied to the element ' + + 'in the same shadow tree'); + +}), 'A_06_00_06_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-008.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-008.html new file mode 100644 index 0000000000..4b810af1c8 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-008.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_00_09</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/#styles"> +<meta name="assert" content="Styles:the styles of the shadow host are inherited by the children of the shadow root"> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + d.body.innerHTML = '' + + '<div id="shHost" style="font-size:10px">' + + '<span id="spn1">This is a shadow host child</span>' + + '</div>'; + + var host = d.querySelector('#shHost'); + + var s = host.attachShadow({mode: 'open'}); + + var div = d.createElement('div'); + div.innerHTML ='<span id="spn2">This is a shadow root child</span>'; + s.appendChild(div); + + assert_equals(d.querySelector('#spn1').offsetTop, 0, + 'Element should not be rendered'); + assert_true(s.querySelector('#spn2').offsetTop > 0, + 'Element should be rendered'); + + var oldHeight = s.querySelector('#spn2').offsetHeight; + + host.setAttribute('style', 'font-size:20px'); + + assert_true(s.querySelector('#spn2').offsetHeight > oldHeight, + 'Shadow host style must be aplied to the shadow root children'); + +}), 'A_06_00_09_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/active-element/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/active-element/test-001.html new file mode 100644 index 0000000000..9d4b026ad8 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/active-element/test-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_07_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/#active-element"> +<meta name="assert" content="User Interaction: each shadow root must also have an activeElement property to store the value of the focused element in the shadow tree."> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var inp = d.createElement('input'); + inp.setAttribute('type', 'text'); + inp.setAttribute('id', 'inpId'); + inp.setAttribute('value', 'Some text'); + s.appendChild(inp); + + inp.focus(); + + assert_equals(s.activeElement.tagName, 'INPUT', 'Point 1:activeElement property of shadow root ' + + 'must return the value of the focused element in the shadow tree'); + assert_equals(s.activeElement.getAttribute('id'), 'inpId', 'Point 2:activeElement property of shadow root ' + + 'must return the value of the focused element in the shadow tree'); + +}), 'A_07_03_01_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/active-element/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/active-element/test-002.html new file mode 100644 index 0000000000..af3165afeb --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/active-element/test-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_07_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/#active-element"> +<meta name="assert" content="User Interaction: Document's activeElement property must be adjusted"> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.setAttribute('id', 'shRoot'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var inp = d.createElement('input'); + inp.setAttribute('type', 'text'); + inp.setAttribute('id', 'inpId'); + inp.setAttribute('value', 'Some text'); + s.appendChild(inp); + + inp.focus(); + + assert_equals(d.activeElement.tagName, 'DIV', 'Point 1: document\'s activeElement property ' + + 'must return adjusted the value of the focused element in the shadow tree'); + assert_equals(d.activeElement.getAttribute('id'), 'shRoot', 'Point 2: document\'s activeElement property ' + + 'must return adjusted the value of the focused element in the shadow tree'); + +}), 'A_07_03_02_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/editing/inheritance-of-content-editable-001.html b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/editing/inheritance-of-content-editable-001.html new file mode 100644 index 0000000000..c09832cd7e --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/editing/inheritance-of-content-editable-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: Inheritance of contentEditable attribute</title> +<link rel="author" title="Moto Ishizawa" href="mailto:summerwind.jp@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#editing"> +<meta name="assert" content="User Interaction: Shadow trees must not be propagated contentEditable attribute from shadow host"> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.contentEditable = "true"; + d.body.appendChild(host); + + var s = host.attachShadow({mode: 'open'}); + + assert_equals(host.contentEditable, "true"); + assert_equals(s.contentEditable, undefined); +}), 'contentEditable of shadow trees must be undefined when contentEditable attribute of shadow host is "true"'); + +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + host.contentEditable = "false"; + d.body.appendChild(host); + + var s = host.attachShadow({mode: 'open'}); + + assert_equals(host.contentEditable, 'false'); + assert_equals(s.contentEditable, undefined); +}), 'contentEditable of shadow trees must be undefined when contentEditable of shadow host is "false"'); + +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + d.body.contentEditable = "true"; + + var s = host.attachShadow({mode: 'open'}); + + assert_equals(host.contentEditable, 'inherit'); + assert_equals(s.contentEditable, undefined); +}), 'contentEditable of shadow trees must be undefined when contentEditable attribute of shadow host is "inherit"'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/ranges-and-selections/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/ranges-and-selections/test-001.html new file mode 100644 index 0000000000..3a234e8b81 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/ranges-and-selections/test-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_07_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/#ranges-and-selection"> +<meta name="assert" content="User Interaction: Selection, returned by the window.getSelection() method must never return a selection within a shadow tree"> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + var range = d.createRange(); + range.setStart(span.firstChild, 0); + range.setEnd(span.firstChild, 3); + + var selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + + var sl = window.getSelection(); + assert_equals(sl.toString(), '', 'window.getSelection() method must never return a selection ' + + 'within a shadow tree'); + +}), 'A_07_07_01_T01'); + + +// test distributed nodes +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + span.setAttribute('slot', 'span'); + host.appendChild(span); + + var s = host.attachShadow({mode: 'open'}); + s.innerHTML = '<slot name="span"></slot>'; + + var range = d.createRange(); + range.setStart(span.firstChild, 0); + range.setEnd(span.firstChild, 3); + + var selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + + var sl = window.getSelection(); + assert_equals(sl.toString(), '', 'window.getSelection() method must never return a selection ' + + 'within a shadow tree'); + +}), 'A_07_07_01_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/ranges-and-selections/test-002.html b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/ranges-and-selections/test-002.html new file mode 100644 index 0000000000..55cd91e458 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/user-interaction/ranges-and-selections/test-002.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_07_01_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/#ranges-and-selection"> +<meta name="assert" content="User Interaction: The getSelection() method of the shadow root object must return the current selection in this shadow tree."> +<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(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + var s = host.attachShadow({mode: 'open'}); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + s.appendChild(span); + + var range = d.createRange(); + range.setStart(span.firstChild, 0); + range.setEnd(span.firstChild, 3); + + var selection = d.defaultView.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + + var sl = s.getSelection(); + assert_equals(sl.toString(), 'Som', 'The getSelection() method of the shadow root object must return ' + + 'the current selection in this shadow tree'); + +}), 'A_07_01_02_T01'); + + +//test distributed nodes +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + var host = d.createElement('div'); + d.body.appendChild(host); + + var span = d.createElement('span'); + span.innerHTML = 'Some text'; + span.setAttribute('slot', 'slot'); + host.appendChild(span); + + var s = host.attachShadow({mode: 'open'}); + s.innerHTML = '<slot name="slot"></slot>'; + + var range = d.createRange(); + range.setStart(span.firstChild, 0); + range.setEnd(span.firstChild, 3); + + var selection = d.defaultView.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + + var sl = s.getSelection(); + assert_equals(sl.toString(), 'Som', 'The getSelection() method of the shadow root object must return ' + + 'the current selection in this shadow tree'); + +}), 'A_07_07_02_T02'); +</script> +</body> +</html> |