css-cascade-inner-scope-important.html

<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/resources/shadow-dom.js"></script>
<div id="sandbox"></div>
<script>
description('Inner scope !important rules wins, regardless of specificity.');

sandbox.appendChild(
    createDOM('div', {'id': 'host'},
        attachShadow(
            {'mode': 'open'},
            createDOM('style', {},
                document.createTextNode(
                    '::slotted(span) { color: green !important; }')),
            createDOM('slot', {})),
        createDOM('style', {},
            document.createTextNode(
                '#target { color: red !important; }')),
        createDOM('span', {'id': 'target'})));

shouldBeEqualToString('getComputedStyle(target).color', 'rgb(0, 128, 0)');
</script>

chromium/third_party/blink/web_tests/shadow-dom/css-cascade-inner-scope-important.html