update-text-of-style-in-shadow-dom.html

<!doctype html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
  <div id='sandbox'></div>
  <pre id='console'></pre>
</body>
<script>
description('Tests update the text of styles updates styles in shadow dom, crbug.com/247280');

var borderColor;

function shouldHaveBorderColor(element, color) {
    borderColor = window.getComputedStyle(element).borderColor;
    shouldBeEqualToString('borderColor', color);
}

document.getElementById('sandbox').appendChild(
    createDOM('div', {'id': 'host'},
        createShadowRoot(
            createDOM('style', {'id': 'style'},
                document.createTextNode('span { border: 1px solid red; }')),
            createDOM('span', {'id': 'target'},
                document.createTextNode('This span should have green border.')))));
document.body.offsetLeft;

getNodeInComposedTree('host/style').innerHTML = 'span { border: 1px solid green; }';

shouldHaveBorderColor(getNodeInComposedTree('host/target'), 'rgb(0, 128, 0)');
</script>
</html>

chromium/third_party/blink/web_tests/fast/dom/shadow/update-text-of-style-in-shadow-dom.html