| <!DOCTYPE html> |
| <title>Declarative Shadow DOM Element Attachment</title> |
| <link rel='author' title='Mason Freed' href='mailto:masonfreed@chromium.org'> |
| <link rel='help' href='https://github.com/whatwg/dom/issues/831'> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <script src='../resources/shadow-dom-utils.js'></script> |
| <script src="support/helpers.js"></script> |
| |
| <script> |
| const shadowContent = '<span>Shadow tree</span><slot></slot>'; |
| function getDeclarativeContent(mode, delegatesFocus) { |
| const delegatesFocusText = delegatesFocus ? ' shadowrootdelegatesfocus' : ''; |
| return `<template shadowroot=${mode}${delegatesFocusText}>${shadowContent}</template>`; |
| } |
| |
| const lightDomTextContent = 'Light DOM'; |
| function addDeclarativeShadowRoot(elementType, mode, delegatesFocus) { |
| const declarativeString = `<${elementType} id=theelement>${getDeclarativeContent(mode, delegatesFocus)} |
| <span class='lightdom'>${lightDomTextContent}</span></${elementType}>`; |
| const wrapper = document.createElement('div'); |
| setInnerHTML(wrapper, declarativeString); |
| const element = wrapper.querySelector('#theelement'); |
| return {wrapper: wrapper, element: element}; |
| } |
| |
| function testElementType(allowed, nochildren, elementType, mode, delegatesFocus) { |
| var t = test(function() { |
| const nodes = addDeclarativeShadowRoot(elementType, mode, delegatesFocus); |
| if (allowed) { |
| const element = nodes.element; |
| assert_true(!!element, 'Unable to locate the element'); |
| // Just one light DOM child, and no leftover template. |
| assert_true(!nodes.wrapper.querySelector('template')); |
| assert_equals(element.children.length, 1); |
| assert_equals(element.children[0].textContent, lightDomTextContent); |
| let originalShadowRoot = null; |
| if (mode === 'open') { |
| assert_true(!!element.shadowRoot, 'Shadow root should be present'); |
| assert_equals(element.shadowRoot.innerHTML, shadowContent, 'Correct shadow content'); |
| assert_equals(element.shadowRoot.delegatesFocus,delegatesFocus,'Correct delegatesFocus') |
| originalShadowRoot = element.shadowRoot; |
| } |
| |
| // Now, call attachShadow() and make sure we get back the same (original) shadowRoot, but empty. |
| const oppositeMode = (mode === 'open') ? 'closed' : 'open'; |
| const newShadow = element.attachShadow({mode: oppositeMode}); // Should be no exception here |
| if (mode === 'open') { |
| assert_equals(element.shadowRoot, originalShadowRoot, 'The same shadow root should be returned'); |
| assert_equals(element.shadowRoot.innerHTML, '', 'Empty shadow content'); |
| assert_equals(element.shadowRoot.mode, mode, 'Original shadow mode'); |
| } |
| } else { |
| const wrapper = nodes.wrapper; |
| if (!nochildren) { |
| // Invalid elements should retain a <template> element child with a shadowroot attribute. |
| const template = nodes.wrapper.querySelector('template[shadowroot]'); |
| assert_true(!!template); |
| assert_equals(template.getAttribute('shadowroot'), mode, `Template with shadowroot=${mode} should be left over`); |
| const span = nodes.wrapper.querySelector('span.lightdom'); |
| assert_true(!!span); |
| assert_equals(span.textContent, lightDomTextContent); |
| if (nodes.element) { |
| // For some tags (e.g. <html>) there won't be an element inside wrapper. |
| assert_true(!nodes.element.shadowRoot, 'Shadow root should not be present'); |
| } |
| } |
| } |
| }, `Declarative Shadow DOM as a child of <${elementType}>, with mode=${mode}, delegatesFocus=${delegatesFocus}. Should be ${allowed ? 'safelisted' : 'disallowed'}.`); |
| } |
| |
| function runAllTests() { |
| const noCheck = ['body']; |
| const safelisted = ATTACHSHADOW_SAFELISTED_ELEMENTS.filter(el => !noCheck.includes(el)); |
| const disallowed = ATTACHSHADOW_DISALLOWED_ELEMENTS.filter(el => !noCheck.includes(el)); |
| const noChildElements = ['iframe','noscript','script','select','style','textarea','title']; |
| for (let delegatesFocus of [false, true]) { |
| for (let mode of ['open', 'closed', 'invalid']) { |
| for (let elementName of safelisted) { |
| testElementType(mode !== 'invalid', false, elementName, mode, delegatesFocus); |
| } |
| for (let elementName of disallowed) { |
| testElementType(false, noChildElements.includes(elementName), elementName, mode, delegatesFocus); |
| } |
| } |
| } |
| } |
| |
| runAllTests(); |
| |
| </script> |
