text-node-in-shadow.html | Explore in Territory

<!doctype html>
<html>
<head>
<style>
span {
   text-align: top;
}
</style>
<script>
function testChildTextOfShadowRoot() {
    var host = document.getElementById("host");
    var shadowRoot = host.attachShadow({mode: 'open'});
    var span = document.createElement('span')
    span.textContent = "foo";
    shadowRoot.appendChild(span);
    shadowRoot.appendChild(document.createTextNode("bar"));
    document.body.offsetLeft;
    host.style.fontSize = '5em';
}

function testDistributedText() {
    var host = document.getElementById("hostWithDistribution");
    var shadowRoot = host.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = "<span id='span1'><slot></slot></span>"
    document.body.offsetLeft;
    shadowRoot.getElementById("span1").style.fontSize = '5em';
}

function runTests() {
    testChildTextOfShadowRoot();
    testDistributedText();
}
</script>
</head>
<body onload="runTests()">
  <!-- [bug 101116] Text nodes in shadow roots don't inherit style properly -->
  <!-- https://bugs.webkit.org/show_bug.cgi?id=101116 -->
  <div id="host"></div>
  <div id="hostWithDistribution">Foo<span>Bar</span></div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/shadow/text-node-in-shadow.html
