OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="resources/shadow-dom.js"></script> | 4 <script src="resources/shadow-dom.js"></script> |
5 </head> | 5 </head> |
6 <body> | 6 <body> |
7 <script> | 7 <script> |
8 function description(text) { | 8 function description(text) { |
9 return createDOM("h1", {}, | 9 return createDOM("div", {}, |
10 document.createTextNode(text)); | 10 document.createTextNode(text)); |
11 } | 11 } |
12 | 12 |
13 function createDivWithText(text) { | 13 function createSpanWithText(text) { |
14 return createDOM("div", {}, | 14 return createDOM("span", {}, |
15 document.createTextNode(text)); | 15 document.createTextNode(text + " ")); |
16 } | 16 } |
17 | 17 |
18 var testcases = [ | 18 var testcases = [ |
19 description('A shadow element with a content element'), | 19 description('A shadow element with a content element'), |
20 createDOM('div', {}, | 20 createDOM('div', {}, |
21 createDivWithText("host-child"), | 21 createSpanWithText("host-child"), |
22 createShadowRoot( | 22 createShadowRoot( |
23 createDivWithText("before"), | 23 createSpanWithText("before"), |
24 createDOM("shadow", {}, | 24 createDOM("shadow", {}, |
25 createDOM("content", {})), | 25 createDOM("content", {})), |
26 createDivWithText("after"))), | 26 createSpanWithText("after"))), |
27 | 27 |
28 description('A shadow element without a content element'), | 28 description('A shadow element without a content element'), |
29 createDOM('div', {}, | 29 createDOM('div', {}, |
30 createDivWithText("host-child"), | 30 createSpanWithText("host-child"), |
31 createShadowRoot( | 31 createShadowRoot( |
32 createDivWithText("before"), | 32 createSpanWithText("before"), |
33 createDOM("shadow", {}), | 33 createDOM("shadow", {}), |
34 createDivWithText("after"))), | 34 createSpanWithText("after"))), |
35 | 35 |
36 description('A shadow element with a parameter'), | 36 description('A shadow element with a parameter'), |
37 createDOM('div', {}, | 37 createDOM('div', {}, |
38 createDivWithText("host-child"), | 38 createSpanWithText("host-child"), |
39 createShadowRoot( | 39 createShadowRoot( |
40 createDivWithText("before"), | 40 createSpanWithText("before"), |
41 createDOM("shadow", {}, | 41 createDOM("shadow", {}, |
42 createDivWithText("shadow-child")), | 42 createSpanWithText("shadow-child")), |
43 createDivWithText("after"))), | 43 createSpanWithText("after"))), |
44 | 44 |
45 description('An inactive shadow element'), | 45 description('An inactive shadow element'), |
46 createDOM('div', {}, | 46 createDOM('div', {}, |
47 createDivWithText("host-child"), | 47 createSpanWithText("host-child"), |
48 createShadowRoot( | 48 createShadowRoot( |
49 createDivWithText("before"), | 49 createSpanWithText("before"), |
50 createDOM("shadow", {}, | 50 createDOM("shadow", {}, |
51 createDOM("content", {})), | 51 createDOM("content", {})), |
52 createDivWithText("middle"), | 52 createSpanWithText("middle"), |
53 createDOM("shadow", {}, | 53 createDOM("shadow", {}, |
54 createDivWithText("shadow-child")), | 54 createSpanWithText("shadow-child")), |
55 createDivWithText("after"))), | 55 createSpanWithText("after"))), |
56 | 56 |
57 description('A shadow element comes before a content element'), | 57 description('A shadow element comes before a content element'), |
58 createDOM('div', {}, | 58 createDOM('div', {}, |
59 createDivWithText("host-child"), | 59 createSpanWithText("host-child"), |
60 createShadowRoot( | 60 createShadowRoot( |
61 createDivWithText("before"), | 61 createSpanWithText("before"), |
62 createDOM("shadow", {}, | 62 createDOM("shadow", {}), |
63 createDOM("content", {})), | 63 createSpanWithText("middle"), |
64 createDivWithText("middle"), | |
65 createDOM("content", {}), | 64 createDOM("content", {}), |
66 createDivWithText("after"))), | 65 createSpanWithText("after"))), |
67 | 66 |
68 description('A shadow element comes after a content element'), | 67 description('A shadow element comes after a content element'), |
69 createDOM('div', {}, | 68 createDOM('div', {}, |
70 createDivWithText("host-child"), | 69 createSpanWithText("host-child"), |
71 createShadowRoot( | 70 createShadowRoot( |
72 createDivWithText("before"), | 71 createSpanWithText("before"), |
73 createDOM("content", {}), | 72 createDOM("content", {}), |
74 createDivWithText("middle"), | 73 createSpanWithText("middle"), |
75 createDOM("shadow", {}, | 74 createDOM("shadow", {}, |
76 createDOM("content", {})), | 75 createDOM("content", {})), |
77 createDivWithText("after"))), | 76 createSpanWithText("after"))), |
78 ]; | 77 ]; |
79 | 78 |
80 testcases.forEach(function(element) { | 79 testcases.forEach(function(element) { |
81 document.body.appendChild(element); | 80 document.body.appendChild(element); |
82 }); | 81 }); |
83 </script> | 82 </script> |
84 </html> | 83 </html> |
OLD | NEW |