Chromium Code Reviews Chromium Code Reviews
Issue 878743003:
Use the tree of trees for the lang attributes in Shadow DOM (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/dom/shadow/attr-lang-inherit.html |
| diff --git a/LayoutTests/fast/dom/shadow/attr-lang-inherit.html b/LayoutTests/fast/dom/shadow/attr-lang-inherit.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..fb9be0c33c4c69b47fccf6705b128d15cf21ab33 |
| --- /dev/null |
| +++ b/LayoutTests/fast/dom/shadow/attr-lang-inherit.html |
| @@ -0,0 +1,96 @@ |
| +<!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="multiple"><div>Distributed to the youngest</div></div> |
| + <div id="multilevel"><div>Multi-level Distributed</div></div> |
| + <div id="older"></div> |
| + <div id="redistributed"><div>Re-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>"; |
| + |
| +testLangInShadow("lang inherits into the shadow tree", |
| + document.getElementById("normal"), |
| + style + "<div lang=fr>French</div><div>Inherit Normally</div>", |
| + [[function (root) { return root.querySelector("div"); }, fr], |
| + [function (root) { return root.lastChild; }, ja]]); |
| + |
| +testLangInShadow("lang of the distributed content traverses the tree of trees", |
| + document.getElementById("distributed"), |
| + style + "<div lang=fr><div>French</div><content></content></div>", |
| + [[function (root) { return root.querySelector("div"); }, fr], |
| + [function (root) { return root.host.firstChild; }, ja]]); |
| + |
| +testLangInShadow("lang of the distributed content traverses the tree of trees (multiple shadow roots)", |
| + (function () { |
| + var host = document.getElementById("multiple"); |
| + createShadowRoot(host, style + "<content></content>"); |
| + return host; |
| + })(), |
| + style + "<div lang=fr><div>French</div><content></content></div>", |
| + [[function (root) { return root.querySelector("div"); }, fr], |
| + [function (root) { return root.host.firstChild; }, ja]]); |
| + |
| +testLangInShadow("lang of the distributed content traverses the tree of trees (multiple levels)", |
| + createShadowRoot(document.getElementById("multilevel"), "<div><content></content></div>").firstChild, |
| + style + "<div lang=fr><div>French</div><content></content></div>", |
| + [[function (root) { return root.querySelector("div"); }, fr], |
| + [function (root) { return document.getElementById("multilevel").firstChild; }, ja]]); |
| + |
| +testLangInShadow("lang of the older shadow root traverses the tree of trees", |
| + (function () { |
| + var host = document.getElementById("older"); |
| + createShadowRoot(host, style + "<div>olderShadowRoot</div>"); |
| + return host; |
| + })(), |
| + style + "<div lang=fr><div>French</div><shadow></shadow></div>", |
| + [[function (root) { return root.querySelector("div"); }, fr], |
| + [function (root) { return root.olderShadowRoot.querySelector("div"); }, ja]]); |
| + |
| +testLangInShadow("lang of the re-distributed content traverses the tree of trees", |
| + (function () { |
| + var host = document.getElementById("redistributed"); |
| + createShadowRoot(host, style + "<div lang=fr><div>French</div><content></content></div>"); |
| + return host; |
| + })(), |
| + style + "<shadow></shadow>", |
| + [[function (root) { return root.olderShadowRoot.querySelector("div"); }, fr], |
| + [function (root) { return root.host.firstChild; }, ja]]); |
| + |
| +function testLangInShadow(description, host, shadowHtml, elementAndExpectedList) { |
| + test(function () { |
| + var root = createShadowRoot(host, shadowHtml); |
| + elementAndExpectedList.forEach(function (elementAndExpected) { |
| + var element = elementAndExpected[0](root); |
|
hayato
2015/02/03 02:22:27
I think that calling function with a shadow root h
kojii
2015/02/04 02:10:05
Done.
|
| + var actual = getComputedStyle(element).backgroundColor; |
| + assert_equals(actual, elementAndExpected[1]); |
| + }); |
| + }, description); |
| +} |
| + |
| +function createShadowRoot(host, shadowHtml) { |
|
hayato
2015/02/03 02:22:27
Can we have a better name for this function?
It'd
kojii
2015/02/04 02:10:05
Done.
|
| + var root = host.createShadowRoot(); |
| + root.innerHTML = shadowHtml; |
| + return root; |
| +} |
| + |
| +if (window.testRunner) |
| + container.style.display = "none"; |
| +done(); |
| +</script> |
