pseudo-host-parameter-matches-shadow-host.html

<!doctype html>
<html>
<head>
<script src="resources/shadow-dom.js"></script>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
  <div id="sandbox"></div>
</body>
<script>
var borderColor;

function borderColorOf(node)
{
    return document.defaultView.getComputedStyle(node, null).getPropertyValue('border-color');
}

function borderColorShouldBe(selector, color)
{
    var text = 'borderColorOf(getNodeInComposedTree("' + selector + '"))';
    shouldBeEqualToString(text, color);
}

function cleanUp()
{
    document.getElementById('sandbox').innerHTML = '';
}

description('Test that :host(selector) can match a shadow host when the host matches the selector: http://crbug.com/313935.');

var sandbox = document.getElementById('sandbox');

// id selector
sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(#host) { border: 1px solid green; }')),
            createDOM('div', {}))));

borderColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

// class selector
sandbox.appendChild(
    createDOM('div', {'id': 'host', 'class': 'bar'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(.bar) { border: 1px solid green; }')),
            createDOM('div', {}))));

borderColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

// attribute selector
sandbox.appendChild(
    createDOM('div', {'id': 'host', 'foo': 'bar'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host([foo=bar]) { border: 1px solid green; }')),
            createDOM('div', {}))));

borderColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

// tag selector
sandbox.appendChild(
    createDOM('span', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(span) { border: 1px solid green; }')),
            createDOM('div', {}))));

borderColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

// tag, class, id selectors
sandbox.appendChild(
    createDOM('span', {'id': 'host', 'class': 'foo'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(span.foo#host) { border: 1px solid green; }')),
            createDOM('div', {}))));

borderColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

// attribute selector with :host
sandbox.appendChild(
    createDOM('div', {'id': 'host', 'foo': 'bar'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host([foo=bar]:host) { border: 1px solid green; }')),
            createDOM('div', {}))));

borderColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();

// tag, class, id selectors with :host.
sandbox.appendChild(
    createDOM('span', {'id': 'host', 'class': 'foo'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(':host(span.foo#host:host) { border: 1px solid green; }')),
            createDOM('div', {}))));

borderColorShouldBe('host', 'rgb(0, 128, 0)');

cleanUp();


</script>
</html>
chromium/third_party/blink/web_tests/fast/dom/shadow/pseudo-host-parameter-matches-shadow-host.html
