attr-lang-inherit.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#container > div {
    border: green solid thin;
}
:lang(fr) { background:blue; color:white; }
:lang(ja) { background:green; color:white; }
</style>
<div id="container">
    <p>Test passes if "French" are all in blue and other text are all in green.</p>
    <div lang="ja">
        <div id="normal"></div>
        <div id="distributed"><div>Distributed</div></div>
        <div id="multilevel"><div>Multi-level Distributed</div></div>
    </div>
</div>
<script>
setup({ explicit_done: true });
var fr = "rgb(0, 0, 255)";
var ja = "rgb(0, 128, 0)";
var style = "<style>:lang(fr) { background:blue; color:white; } :lang(ja) { background:green; color:white; }</style>";

var host = document.getElementById("normal");
createShadowRootWithInnerHtml(host, style + "<div lang=fr>French</div><div>Inherit Normally</div>");
testLangInShadow("lang inherits into the shadow tree",
    [[host.shadowRoot.querySelector("div"), fr],
    [host.shadowRoot.lastChild, ja]]);

host = document.getElementById("distributed");
createShadowRootWithInnerHtml(host, style + "<div lang=fr><div>French</div><content></content></div>");
testLangInShadow("lang of the distributed content traverses the composed tree",
    [[host.shadowRoot.querySelector("div"), fr],
    [host.shadowRoot.host.firstChild, ja]]);

host = document.getElementById("multilevel");
var host2ndLevel = createShadowRootWithInnerHtml(host, "<div><content></content></div>").firstChild;
createShadowRootWithInnerHtml(host2ndLevel, style + "<div lang=fr><div>French</div><content></content></div>");
testLangInShadow("lang of the distributed content traverses the composed tree (multiple levels)",
    [[host2ndLevel.shadowRoot.querySelector("div"), fr],
    [host.firstChild, ja]]);

function testLangInShadow(description, elementAndExpectedList) {
    test(function () {
        elementAndExpectedList.forEach(function (elementAndExpected) {
            var element = elementAndExpected[0];
            var actual = getComputedStyle(element).backgroundColor;
            assert_equals(actual, elementAndExpected[1]);
        });
    }, description);
}

function createShadowRootWithInnerHtml(host, shadowHtml) {
    var root = host.attachShadow({mode: 'open'});
    root.innerHTML = shadowHtml;
    return root;
}

if (window.testRunner)
    container.style.display = "none";
done();
</script>
chromium/third_party/blink/web_tests/fast/dom/shadow/attr-lang-inherit.html
