<!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>