sibling-rules-under-shadow-root.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 colorOf(node)
{
    return document.defaultView.getComputedStyle(node, null).getPropertyValue('color');
}

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

function colorShouldNotBe(selector, color)
{
    var text = 'colorOf(getNodeInComposedTree("' + selector + '"))';
    var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"") + '"';
    shouldNotBe(text, unevaledString);
}

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

description('crbug.com/337573: Test direct/indirect adjucent and positinal rules under shadow root.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('#child1.target + #child2 { color: green }')),
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')))));
document.body.offsetLeft;
getNodeInComposedTree('host/child1').className = 'target';
colorShouldBe('host/child2', 'rgb(0, 128, 0)');

cleanUp();

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('#child1.target ~ div { color: green }')),
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')),
            createDOM('div', {'id': 'child3'},
                document.createTextNode('third div')))));
document.body.offsetLeft;
getNodeInComposedTree('host/child1').className = 'target';
colorShouldBe('host/child2', 'rgb(0, 128, 0)');
colorShouldBe('host/child3', 'rgb(0, 128, 0)');

cleanUp();

// Test div:first-child under shadow-root.
sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')),
            createDOM('div', {'id': 'child3'},
                document.createTextNode('third div')),
            createDOM('style', {},
                document.createTextNode('div:first-child { color: green }')))));

colorShouldBe('host/child1', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child2', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child3', 'rgb(0, 128, 0)');

cleanUp();

// Test div:last-child under shadow-root.
sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('div:last-child { color: green }')),
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')),
            createDOM('div', {'id': 'child3'},
                document.createTextNode('third div')))));

colorShouldNotBe('host/child1', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child2', 'rgb(0, 128, 0)');
colorShouldBe('host/child3', 'rgb(0, 128, 0)');

cleanUp();

// Test div:nth-child under shadow-root.
sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('div:nth-child(3) { color: green }')),
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')),
            createDOM('div', {'id': 'child3'},
                document.createTextNode('third div')))));

colorShouldNotBe('host/child1', 'rgb(0, 128, 0)');
colorShouldBe('host/child2', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child3', 'rgb(0, 128, 0)');

cleanUp();

// Test div:first-of-type under shadow-root.
sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('span', {},
                document.createTextNode('first span')),
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')) ,
            createDOM('div', {'id': 'child3'},
                document.createTextNode('third div')),
            createDOM('style', {},
                document.createTextNode('div:first-of-type { color: green }')))));

colorShouldBe('host/child1', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child2', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child3', 'rgb(0, 128, 0)');

cleanUp();

// Test div:last-of-type under shadow-root.
sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('div:last-of-type { color: green }')),
            createDOM('span', {},
                document.createTextNode('first span')),
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')) ,
            createDOM('div', {'id': 'child3'},
                document.createTextNode('last div')),
            createDOM('span', {'id': 'child4'},
                document.createTextNode('last span')))));

colorShouldNotBe('host/child1', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child2', 'rgb(0, 128, 0)');
colorShouldBe('host/child3', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child4', 'rgb(0, 128, 0)');

cleanUp();

// Test div:nth-of-type under shadow-root.
sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode('div:nth-of-type(2) { color: green }')),
            createDOM('span', {},
                document.createTextNode('first span')),
            createDOM('div', {'id': 'child1'},
                document.createTextNode('first div')),
            createDOM('span', {},
                document.createTextNode('second span')),
            createDOM('div', {'id': 'child2'},
                document.createTextNode('second div')) ,
            createDOM('div', {'id': 'child3'},
                document.createTextNode('last div')),
            createDOM('span', {},
                document.createTextNode('last span')))));

colorShouldNotBe('host/child1', 'rgb(0, 128, 0)');
colorShouldBe('host/child2', 'rgb(0, 128, 0)');
colorShouldNotBe('host/child3', 'rgb(0, 128, 0)');

cleanUp();

</script>
</html>
chromium/third_party/blink/web_tests/fast/dom/shadow/sibling-rules-under-shadow-root.html
