81 lines
3.6 KiB
HTML
81 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>getInnerHTML </title>
|
|
<link rel='author' href='mailto:masonf@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='../../html/resources/common.js'></script>
|
|
|
|
<body>
|
|
|
|
<script>
|
|
function testElementType(allowsShadowDom, elementType, applyToShadow, mode, delegatesFocus) {
|
|
const t = test(t => {
|
|
// Create and attach element
|
|
let wrapper;
|
|
if (applyToShadow) {
|
|
const host = document.createElement('div');
|
|
t.add_cleanup(function() { host.remove(); });
|
|
document.body.appendChild(host);
|
|
wrapper = host.attachShadow({mode: 'open'});
|
|
} else {
|
|
wrapper = document.createElement('div');
|
|
t.add_cleanup(function() { wrapper.remove(); });
|
|
document.body.appendChild(wrapper);
|
|
}
|
|
const element = document.createElement(elementType);
|
|
wrapper.appendChild(element);
|
|
|
|
const isOpen = mode === 'open';
|
|
if (allowsShadowDom) {
|
|
const delegatesAttr = delegatesFocus ? ' shadowrootdelegatesfocus=""' : '';
|
|
const correctShadowHtml = `<template shadowrootmode="${mode}"${delegatesAttr}><slot></slot></template>`;
|
|
const correctHtml = `<${elementType}>${correctShadowHtml}</${elementType}>`;
|
|
const emptyElement = `<${elementType}></${elementType}>`;
|
|
const shadowRoot = element.attachShadow({mode: mode, delegatesFocus: delegatesFocus});
|
|
shadowRoot.appendChild(document.createElement('slot'));
|
|
if (isOpen) {
|
|
// We can only test this for open roots
|
|
assert_equals(wrapper.getInnerHTML(),correctHtml,'The default for includeShadowRoots should be true');
|
|
} else {
|
|
// Closed shadow roots should not be returned unless closedRoots contains the shadow root:
|
|
assert_equals(wrapper.getInnerHTML({includeShadowRoots: true}), emptyElement);
|
|
assert_equals(wrapper.getInnerHTML({includeShadowRoots: true, closedRoots: []}), emptyElement);
|
|
}
|
|
assert_equals(wrapper.getInnerHTML({includeShadowRoots: true, closedRoots: [shadowRoot]}),correctHtml);
|
|
// ClosedRoots are not included if includeShadowRoots is false:
|
|
assert_equals(wrapper.getInnerHTML({includeShadowRoots: false, closedRoots: [shadowRoot]}),emptyElement);
|
|
} else {
|
|
// For non-shadow hosts, getInnerHTML() should also match .innerHTML
|
|
assert_equals(wrapper.getInnerHTML({includeShadowRoots: true}),wrapper.innerHTML);
|
|
assert_equals(wrapper.getInnerHTML(),wrapper.innerHTML);
|
|
}
|
|
|
|
// Either way, make sure getInnerHTML({includeShadowRoots: false}) matches .innerHTML
|
|
assert_equals(wrapper.getInnerHTML({includeShadowRoots: false}),wrapper.innerHTML,'getInnerHTML() with includeShadowRoots false should return the same as .innerHTML');
|
|
|
|
}, `${applyToShadow ? 'ShadowRoot' : 'Element'}.getInnerHTML() on <${elementType}>${allowsShadowDom ? `, with mode=${mode}, delegatesFocus=${delegatesFocus}.` : ''}`);
|
|
}
|
|
|
|
function runAllTests() {
|
|
const allElements = [...HTML5_ELEMENTS, 'htmlunknown'];
|
|
const safelisted = HTML5_SHADOW_ALLOWED_ELEMENTS;
|
|
for (const elementName of allElements) {
|
|
const allowsShadowDom = safelisted.includes(elementName);
|
|
for (const applyToShadow of [false, true]) {
|
|
if (allowsShadowDom) {
|
|
for (const delegatesFocus of [false, true]) {
|
|
for (const mode of ['open', 'closed']) {
|
|
testElementType(true, elementName, applyToShadow, mode, delegatesFocus);
|
|
}
|
|
}
|
|
} else {
|
|
testElementType(false, elementName, applyToShadow);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
runAllTests();
|
|
|
|
</script>
|