diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/declarative')
| -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 |
3 files changed, 123 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); } } } |