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 |