diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom')
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html | 2 | ||||
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/declarative/gethtml-ordering.html | 69 | ||||
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/declarative/gethtml.html (renamed from testing/web-platform/tests/shadow-dom/declarative/gethtml.tentative.html) | 76 | ||||
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/host-with-namespace.xhtml | 27 | ||||
| -rw-r--r-- | testing/web-platform/tests/shadow-dom/selection-direction.tentative.html | 42 |
5 files changed, 192 insertions, 24 deletions
diff --git a/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html b/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html index 9cee41f2f3..a2bfa488fb 100644 --- a/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html +++ b/testing/web-platform/tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html @@ -55,7 +55,7 @@ test((t) => { </script> <div id=open2> - <template shadowrootmode=open shadowrootdelegatesfocus shadowrootclonable serializable> + <template shadowrootmode=open shadowrootdelegatesfocus shadowrootclonable shadowrootserializable> Open, delegates focus (not the default), clonable (not the default) serializable (not the default), named slot assignment (the default) </template> diff --git a/testing/web-platform/tests/shadow-dom/declarative/gethtml-ordering.html b/testing/web-platform/tests/shadow-dom/declarative/gethtml-ordering.html new file mode 100644 index 0000000000..6ac32e2902 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/declarative/gethtml-ordering.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title>getHTML ordering behavior</title> +<link rel='author' href='mailto:masonf@chromium.org'> +<link rel='help' href='https://github.com/whatwg/html/pull/10139'> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> + + +<div id=tests> + <div data-name="base"> + <template shadowrootmode=open shadowrootdelegatesfocus shadowrootserializable shadowrootclonable> + <slot></slot> + </template> + <span class=content>Content 1</span> + <span class=content>Content 2</span> + </div> + + <div data-name="template position"> + <span class=content>Content 1</span> + <template shadowrootmode=open shadowrootdelegatesfocus shadowrootserializable shadowrootclonable> + <slot></slot> + </template> + <span class=content>Content 2</span> + </div> + + <div data-name="attribute position"> + <template shadowrootclonable shadowrootserializable shadowrootdelegatesfocus shadowrootmode=open> + <slot></slot> + </template> + <span class=content>Content 1</span> + <span class=content>Content 2</span> + </div> + + <div data-name="both template and attribute position"> + <span class=content>Content 1</span> + <span class=content>Content 2</span> + <template shadowrootclonable shadowrootserializable shadowrootdelegatesfocus shadowrootmode=open> + <slot></slot> + </template> + </div> +</div> + +<script> + function removeWhitespaceNodes(el) { + el.shadowRoot && removeWhitespaceNodes(el.shadowRoot); + var iter = document.createNodeIterator(el, NodeFilter.SHOW_TEXT, + (node) => (node.data.replace(/\s/g,'').length === 0) ? + NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT); + let node; + while (node = iter.nextNode()) { + node.remove(); + } + return el; + } + const serialize = (host) => host.getHTML({shadowRoots: [host.shadowRoot]}); + + const testCases = Array.from(document.querySelectorAll('#tests>div')); + assert_true(testCases.length > 1); + const baseHost = removeWhitespaceNodes(testCases[0]); + const correctSerialization = serialize(baseHost); + baseHost.remove(); + for(let i=1;i<testCases.length;++i) { + const thisHost = removeWhitespaceNodes(testCases[i]); + test(t => { + assert_equals(serialize(thisHost),correctSerialization,'Serialization should be identical'); + thisHost.remove(); + },thisHost.dataset.name); + } +</script> diff --git a/testing/web-platform/tests/shadow-dom/declarative/gethtml.tentative.html b/testing/web-platform/tests/shadow-dom/declarative/gethtml.html index eabd39131b..d950ca7734 100644 --- a/testing/web-platform/tests/shadow-dom/declarative/gethtml.tentative.html +++ b/testing/web-platform/tests/shadow-dom/declarative/gethtml.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <title>getHTML behavior</title> +<meta name="timeout" content="long"> <link rel='author' href='mailto:masonf@chromium.org'> <link rel='help' href='https://github.com/whatwg/html/issues/8867'> <script src='/resources/testharness.js'></script> @@ -9,7 +10,9 @@ <body> <script> -function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, declarativeShadowDom, mode, delegatesFocus, serializable, clonable) { +function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, + lightDOMContent, declarativeShadowDom, mode, delegatesFocus, + serializable, clonable) { const t = test(t => { // Create and attach element let wrapper; @@ -36,11 +39,13 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, d default: throw new Error(`Invalid serializable ${serializable}`); } const delegatesAttr = delegatesFocus ? ' shadowrootdelegatesfocus=""' : ''; - const serializableAttr = expectedSerializable ? ' serializable=""' : ''; + const serializableAttr = expectedSerializable ? ' shadowrootserializable=""' : ''; const clonableAttr = clonable ? ' shadowrootclonable=""' : ''; if (allowsShadowDom && declarativeShadowDom) { - const html = `<${elementType}><template shadowrootmode=${mode}${delegatesAttr}${serializableAttr}${clonableAttr}>`; + const html = `<${elementType}>${lightDOMContent}<template ` + + `shadowrootmode=${mode}${delegatesAttr}${serializableAttr}` + + `${clonableAttr}>`; wrapper.setHTMLUnsafe(html); if (isOpen) { shadowRoot = wrapper.firstElementChild.shadowRoot; @@ -52,6 +57,9 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, d // Imperative shadow dom const element = document.createElement(elementType); wrapper.appendChild(element); + const temp = document.createElement('div'); + temp.innerHTML = lightDOMContent; + element.append(...temp.childNodes); if (allowsShadowDom) { shadowRoot = element.attachShadow(initDict); } @@ -59,28 +67,39 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, d assert_true(!allowsShadowDom || !!shadowRoot); if (allowsShadowDom) { - const correctShadowHtml = `<template shadowrootmode="${mode}"${delegatesAttr}${serializableAttr}${clonableAttr}><slot></slot></template>`; - const correctHtml = `<${elementType}>${correctShadowHtml}</${elementType}>`; + const correctShadowHtml = `<template shadowrootmode="${mode}"` + + `${delegatesAttr}${serializableAttr}${clonableAttr}><slot></slot>` + + `</template>`; + const correctHtml = `<${elementType}>${correctShadowHtml}` + + `${lightDOMContent}</${elementType}>`; assert_equals(shadowRoot.mode,mode); assert_equals(shadowRoot.delegatesFocus,delegatesFocus); assert_equals(shadowRoot.serializable,expectedSerializable); assert_equals(shadowRoot.clonable,clonable); shadowRoot.appendChild(document.createElement('slot')); - const emptyElement = `<${elementType}></${elementType}>`; + const emptyElement = `<${elementType}>${lightDOMContent}</${elementType}>`; if (isOpen) { if (expectedSerializable) { - assert_equals(wrapper.getHTML({serializableShadowRoots: true}), correctHtml); + assert_equals(wrapper.getHTML({serializableShadowRoots: true}), + correctHtml); + assert_equals(wrapper.firstElementChild.getHTML({ + serializableShadowRoots: true}), + `${correctShadowHtml}${lightDOMContent}`); } else { assert_equals(wrapper.getHTML({serializableShadowRoots: true}), emptyElement); } } else { // Closed shadow roots should not be returned unless shadowRoots specifically contains the shadow root: - assert_equals(wrapper.getHTML({serializableShadowRoots: true}), emptyElement); - assert_equals(wrapper.getHTML({serializableShadowRoots: true, shadowRoots: []}), emptyElement); + assert_equals(wrapper.getHTML({serializableShadowRoots: true}), + emptyElement); + assert_equals(wrapper.getHTML({serializableShadowRoots: true, + shadowRoots: []}), emptyElement); } // If we provide the shadow root, serialize it, regardless of serializableShadowRoots. - assert_equals(wrapper.getHTML({serializableShadowRoots: true, shadowRoots: [shadowRoot]}),correctHtml); - assert_equals(wrapper.getHTML({serializableShadowRoots: false, shadowRoots: [shadowRoot]}),correctHtml); + assert_equals(wrapper.getHTML({serializableShadowRoots: true, shadowRoots: + [shadowRoot]}),correctHtml); + assert_equals(wrapper.getHTML({serializableShadowRoots: false, shadowRoots: + [shadowRoot]}),correctHtml); assert_equals(wrapper.getHTML({shadowRoots: [shadowRoot]}),correctHtml); } else { // For non-shadow hosts, getHTML() should also match .innerHTML @@ -88,11 +107,17 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, d } // Either way, make sure getHTML({serializableShadowRoots: false}) matches .innerHTML - assert_equals(wrapper.getHTML({serializableShadowRoots: false}),wrapper.innerHTML,'getHTML() with serializableShadowRoots false should return the same as .innerHTML'); + assert_equals(wrapper.getHTML({serializableShadowRoots: false}),wrapper.innerHTML, + 'getHTML() with serializableShadowRoots false should return the same as .innerHTML'); // ...and that the default for serializableShadowRoots is false. - assert_equals(wrapper.getHTML(),wrapper.innerHTML,'The default for serializableShadowRoots should be false'); + assert_equals(wrapper.getHTML(),wrapper.innerHTML, + 'The default for serializableShadowRoots should be false'); - }, `${runGetHTMLOnShadowRoot ? 'ShadowRoot' : 'Element'}.getHTML() on <${elementType}>${allowsShadowDom ? `, with ${declarativeShadowDom ? 'declarative' : 'imperative'} shadow, mode=${mode}, delegatesFocus=${delegatesFocus}, serializable=${serializable}, clonable=${clonable}.` : ''}`); + }, `${runGetHTMLOnShadowRoot ? 'ShadowRoot' : 'Element'}.getHTML() on ` + + `<${elementType}>${lightDOMContent}${allowsShadowDom ? + `, with ${declarativeShadowDom ? 'declarative' : 'imperative'} shadow, ` + + `mode=${mode}, delegatesFocus=${delegatesFocus}, ` + + `serializable=${serializable}, clonable=${clonable}.` : ''}`); } function runAllTests() { @@ -101,20 +126,25 @@ function runAllTests() { for (const elementName of allElements) { const allowsShadowDom = safelisted.includes(elementName); for (const runGetHTMLOnShadowRoot of [false, true]) { - if (allowsShadowDom) { - for (const declarativeShadowDom of [false, true]) { - for (const delegatesFocus of [false, true]) { - for (const clonable of [false, true]) { - for (const mode of ['open', 'closed']) { - for (const serializable of [undefined, 'false', 'true']) { - testElementType(true, elementName, runGetHTMLOnShadowRoot, declarativeShadowDom, mode, delegatesFocus, serializable, clonable); + for (const lightDOMContent of ['','<span>light</span>']) { + if (allowsShadowDom) { + for (const declarativeShadowDom of [false, true]) { + for (const delegatesFocus of [false, true]) { + for (const clonable of [false, true]) { + for (const mode of ['open', 'closed']) { + for (const serializable of [undefined, 'false', 'true']) { + testElementType(true, elementName, runGetHTMLOnShadowRoot, + lightDOMContent, declarativeShadowDom, mode, + delegatesFocus, serializable, clonable); + } } } } } + } else { + testElementType(false, elementName, runGetHTMLOnShadowRoot, + lightDOMContent); } - } else { - testElementType(false, elementName, runGetHTMLOnShadowRoot); } } } diff --git a/testing/web-platform/tests/shadow-dom/host-with-namespace.xhtml b/testing/web-platform/tests/shadow-dom/host-with-namespace.xhtml new file mode 100644 index 0000000000..243728a015 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/host-with-namespace.xhtml @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" lang="en" > +<head> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="default-namespace"></div> + <xhtml:div id="explicit-namespace"></xhtml:div> + + <script> + <![CDATA[ + test(function() { + const defaultNamespaceHost = document.getElementById('default-namespace'); + defaultNamespaceHost.attachShadow({mode: 'open'}); + assert_not_equals(defaultNamespaceHost.shadowRoot, null, "attachShadow should work on node with default namespace"); + }, 'attachShadow with a default-namespaced element'); + + test(function() { + const explicitNamespaceHost = document.getElementById('explicit-namespace'); + explicitNamespaceHost.attachShadow({mode: 'open'}); + assert_not_equals(explicitNamespaceHost.shadowRoot, null, "attachShadow should work on node with explicit namespace"); + }, 'Test attachShadow with a namespaced element'); + ]]> + </script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/selection-direction.tentative.html b/testing/web-platform/tests/shadow-dom/selection-direction.tentative.html index 3a2512dcc7..b5b3f6044c 100644 --- a/testing/web-platform/tests/shadow-dom/selection-direction.tentative.html +++ b/testing/web-platform/tests/shadow-dom/selection-direction.tentative.html @@ -6,6 +6,9 @@ <link rel="help" href="https://w3c.github.io/selection-api/#dom-selection-getcomposedrange"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src='/resources/testdriver-vendor.js'></script> <div id="container"></div> <script> @@ -58,6 +61,45 @@ test(() => { assert_equals(getSelection().direction, 'backward'); }, 'direction returns "backward" when there is a forward selection that crosses shadow boundaries'); +promise_test(async () => { + container.innerHTML = 'hello, world'; + const doubleClick = new test_driver.Actions() + .pointerMove(0, 0, container.firstChild) + .pointerDown() + .pointerUp() + .pointerDown() + .pointerUp() + .send(); + await doubleClick; + + const sel = getSelection(); + assert_equals(sel.anchorNode, container.firstChild); + assert_equals(sel.anchorOffset, 0); + assert_equals(sel.focusNode, container.firstChild); + assert_equals(sel.focusOffset, 5); // hello + assert_equals(sel.direction, 'none'); +}, 'direction returns "none" when there is a double click selection(directionless)'); + +promise_test(async () => { + container.innerHTML = 'hello, world'; + const tripleClick = new test_driver.Actions() + .pointerMove(0, 0, container.firstChild) + .pointerDown() + .pointerUp() + .pointerDown() + .pointerUp() + .pointerDown() + .pointerUp() + .send(); + await tripleClick; + + const sel = getSelection(); + assert_equals(sel.anchorNode, container); + assert_equals(sel.anchorOffset, 0); + assert_equals(sel.focusNode, container); + assert_equals(sel.focusOffset, 1); + assert_equals(sel.direction, 'none'); +}, 'direction returns "none" when there is a triple click selection(directionless)'); </script> </body> </html> |