131 lines
2.4 KiB
HTML
131 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
||
|
|
|
||
|
|
<div id=host1></div>
|
||
|
|
<div id=host2 class="red"></div>
|
||
|
|
<div id=host3></div>
|
||
|
|
<div id=host4></div>
|
||
|
|
<div id=host5></div>
|
||
|
|
|
||
|
|
<template id=shadow1>
|
||
|
|
<style>
|
||
|
|
:host(.green) div {
|
||
|
|
background-color: green;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
width: 100px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<nav><div></div></nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template id=shadow2>
|
||
|
|
<style>
|
||
|
|
:host(.red) > div {
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
width: 100px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: green;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template id=shadow3>
|
||
|
|
<style>
|
||
|
|
:host([color=green]) div {
|
||
|
|
background-color: green;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
width: 100px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template id=shadow4>
|
||
|
|
<style>
|
||
|
|
:host(#green) div {
|
||
|
|
background-color: green;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
width: 100px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template id=shadow5>
|
||
|
|
<style>
|
||
|
|
:host div.green {
|
||
|
|
background-color: green;
|
||
|
|
}
|
||
|
|
div {
|
||
|
|
width: 100px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<div id=log></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function checkColor(host, expected)
|
||
|
|
{
|
||
|
|
const div = host.shadowRoot.querySelector("div");
|
||
|
|
const color = getComputedStyle(div).backgroundColor;
|
||
|
|
const width = getComputedStyle(div).width;
|
||
|
|
if (color != expected)
|
||
|
|
log.innerHTML += `FAIL: unexpected background color ${color}<br>`;
|
||
|
|
if (width != "100px")
|
||
|
|
log.innerHTML += `FAIL: unexpected width ${width}<br>`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function test(hostselector, shadowselector, mutation) {
|
||
|
|
const host = document.querySelector(hostselector);
|
||
|
|
const shadowTemplate = document.querySelector(shadowselector);
|
||
|
|
|
||
|
|
host.attachShadow({ mode: 'open' });
|
||
|
|
host.shadowRoot.appendChild(shadowTemplate.content.cloneNode(true));
|
||
|
|
|
||
|
|
checkColor(host, "rgb(255, 0, 0)");
|
||
|
|
|
||
|
|
mutation(host);
|
||
|
|
|
||
|
|
checkColor(host, "rgb(0, 128, 0)");
|
||
|
|
}
|
||
|
|
|
||
|
|
test("#host1", "#shadow1", (host) => {
|
||
|
|
host.classList.add('green');
|
||
|
|
});
|
||
|
|
test("#host2", "#shadow2", (host) => {
|
||
|
|
host.classList.remove('red');
|
||
|
|
});
|
||
|
|
test("#host3", "#shadow3", (host) => {
|
||
|
|
host.setAttribute('color','green');
|
||
|
|
});
|
||
|
|
test("#host4", "#shadow4", (host) => {
|
||
|
|
host.setAttribute('id','green');
|
||
|
|
});
|
||
|
|
test("#host5", "#shadow5", (host) => {
|
||
|
|
host.shadowRoot.querySelector('div').classList.add('green');
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|