66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
|
<script>
|
|
const host = document.createElement('div');
|
|
const shadowRoot = host.attachShadow({mode: 'closed'});
|
|
shadowRoot.innerHTML = `
|
|
<some-element class="item">
|
|
some-element:first-child
|
|
<style>
|
|
.item { display: block; width: 100px; height: 10px; background: red; color: green; font-size: 9px; overflow: hidden; }
|
|
some-element:first-child { background: green; }
|
|
section:nth-of-type(1) { background: green; }
|
|
section:nth-child(3) { background: green; }
|
|
.item:nth-last-child(6) { background: green; }
|
|
a-element:first-of-type { background: green; }
|
|
b-element:only-of-type { background: green; }
|
|
a-element:last-of-type { background: green; }
|
|
c-element:nth-last-of-type(1) { background: green; }
|
|
other-element:last-child { background: green; }
|
|
</style>
|
|
</some-element>
|
|
<section class="item">section:nth-of-type(1)</section>
|
|
<section class="item">section:nth-child(3)</section>
|
|
<section class="item">.item:nth-last-child(6)</section>
|
|
<a-element class="item">a-element:first-of-type</a-element>
|
|
<b-element class="item">b-element:only-of-type</b-element>
|
|
<a-element class="item">a-element:last-of-type</a-element>
|
|
<c-element class="item">c-element:nth-last-of-type(1)</c-element>
|
|
<other-element class="item">other-element:last-child</other-element>`;
|
|
document.body.appendChild(host);
|
|
|
|
const loneHost = document.createElement('div');
|
|
const loneShadowRoot = loneHost.attachShadow({mode: 'closed'});
|
|
loneShadowRoot.innerHTML = `<div class="item">.item:only-child
|
|
<style>
|
|
.item { display: block; width: 100px; height: 10px; background: red; color: green; font-size: 9px; overflow: hidden; }
|
|
.item:only-child { background: green; }
|
|
</style>
|
|
</div>`;
|
|
document.body.appendChild(loneHost);
|
|
|
|
for (const element of [...shadowRoot.querySelectorAll('.item'), loneShadowRoot.firstChild]) {
|
|
const selector = element.innerText;
|
|
if (!element.matches(selector))
|
|
logError(`${selector} did not match an element via element.matches`);
|
|
else {
|
|
const queryResult = element.getRootNode().querySelectorAll(selector);
|
|
if (queryResult.length != 1) {
|
|
console.log(queryResult);
|
|
logError(`${selector} matches ${queryResult.length} elements`);
|
|
}
|
|
}
|
|
}
|
|
|
|
function logError(error) {
|
|
const container = document.createElement('p');
|
|
container.textContent = error;
|
|
document.body.append(container);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|