Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../../resources/testharness.js"></script> | |
| 3 <script src="../../../resources/testharnessreport.js"></script> | |
| 4 <style> | |
| 5 #container > div { | |
| 6 border: green solid thin; | |
| 7 } | |
| 8 :lang(fr) { background:blue; color:white; } | |
| 9 :lang(ja) { background:green; color:white; } | |
| 10 </style> | |
| 11 <div id="container"> | |
| 12 <p>Test passes if "French" are all in blue and other text are all in green.< /p> | |
| 13 <div lang="ja"> | |
| 14 <div id="normal"></div> | |
| 15 <div id="distributed"><div>Distributed</div></div> | |
| 16 <div id="multiple"><div>Distributed to the youngest</div></div> | |
| 17 <div id="multilevel"><div>Multi-level Distributed</div></div> | |
| 18 <div id="older"></div> | |
| 19 <div id="redistributed"><div>Re-distributed</div></div> | |
| 20 </div> | |
| 21 </div> | |
| 22 <script> | |
| 23 setup({ explicit_done: true }); | |
| 24 var fr = "rgb(0, 0, 255)"; | |
| 25 var ja = "rgb(0, 128, 0)"; | |
| 26 var style = "<style>:lang(fr) { background:blue; color:white; } :lang(ja) { back ground:green; color:white; }</style>"; | |
| 27 | |
| 28 testLangInShadow("lang inherits into the shadow tree", | |
| 29 document.getElementById("normal"), | |
| 30 style + "<div lang=fr>French</div><div>Inherit Normally</div>", | |
| 31 [[function (root) { return root.querySelector("div"); }, fr], | |
| 32 [function (root) { return root.lastChild; }, ja]]); | |
| 33 | |
| 34 testLangInShadow("lang of the distributed content traverses the tree of trees", | |
| 35 document.getElementById("distributed"), | |
| 36 style + "<div lang=fr><div>French</div><content></content></div>", | |
| 37 [[function (root) { return root.querySelector("div"); }, fr], | |
| 38 [function (root) { return root.host.firstChild; }, ja]]); | |
| 39 | |
| 40 testLangInShadow("lang of the distributed content traverses the tree of trees (m ultiple shadow roots)", | |
| 41 (function () { | |
| 42 var host = document.getElementById("multiple"); | |
| 43 createShadowRoot(host, style + "<content></content>"); | |
| 44 return host; | |
| 45 })(), | |
| 46 style + "<div lang=fr><div>French</div><content></content></div>", | |
| 47 [[function (root) { return root.querySelector("div"); }, fr], | |
| 48 [function (root) { return root.host.firstChild; }, ja]]); | |
| 49 | |
| 50 testLangInShadow("lang of the distributed content traverses the tree of trees (m ultiple levels)", | |
| 51 createShadowRoot(document.getElementById("multilevel"), "<div><content></con tent></div>").firstChild, | |
| 52 style + "<div lang=fr><div>French</div><content></content></div>", | |
| 53 [[function (root) { return root.querySelector("div"); }, fr], | |
| 54 [function (root) { return document.getElementById("multilevel").firstChild; }, ja]]); | |
| 55 | |
| 56 testLangInShadow("lang of the older shadow root traverses the tree of trees", | |
| 57 (function () { | |
| 58 var host = document.getElementById("older"); | |
| 59 createShadowRoot(host, style + "<div>olderShadowRoot</div>"); | |
| 60 return host; | |
| 61 })(), | |
| 62 style + "<div lang=fr><div>French</div><shadow></shadow></div>", | |
| 63 [[function (root) { return root.querySelector("div"); }, fr], | |
| 64 [function (root) { return root.olderShadowRoot.querySelector("div"); }, ja]] ); | |
| 65 | |
| 66 testLangInShadow("lang of the re-distributed content traverses the tree of trees ", | |
| 67 (function () { | |
| 68 var host = document.getElementById("redistributed"); | |
| 69 createShadowRoot(host, style + "<div lang=fr><div>French</div><content>< /content></div>"); | |
| 70 return host; | |
| 71 })(), | |
| 72 style + "<shadow></shadow>", | |
| 73 [[function (root) { return root.olderShadowRoot.querySelector("div"); }, fr] , | |
| 74 [function (root) { return root.host.firstChild; }, ja]]); | |
| 75 | |
| 76 function testLangInShadow(description, host, shadowHtml, elementAndExpectedList) { | |
| 77 test(function () { | |
| 78 var root = createShadowRoot(host, shadowHtml); | |
| 79 elementAndExpectedList.forEach(function (elementAndExpected) { | |
| 80 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.
| |
| 81 var actual = getComputedStyle(element).backgroundColor; | |
| 82 assert_equals(actual, elementAndExpected[1]); | |
| 83 }); | |
| 84 }, description); | |
| 85 } | |
| 86 | |
| 87 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.
| |
| 88 var root = host.createShadowRoot(); | |
| 89 root.innerHTML = shadowHtml; | |
| 90 return root; | |
| 91 } | |
| 92 | |
| 93 if (window.testRunner) | |
| 94 container.style.display = "none"; | |
| 95 done(); | |
| 96 </script> | |
| OLD | NEW |