| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/shadow-dom.js"></script> |
| </head> |
| <body> |
| <script> |
| function description(text) { |
| return createDOM("div", {}, |
| document.createTextNode(text)); |
| } |
| |
| function createSpanWithText(text) { |
| return createDOM("span", {}, |
| document.createTextNode(text + " ")); |
| } |
| |
| var testcases = [ |
| description('A shadow element without an element'), |
| createDOM('div', {}, |
| createSpanWithText("host-child"), |
| createShadowRoot( |
| createSpanWithText("before0"), |
| createDOM("content", {}), |
| createSpanWithText("after0")), |
| createShadowRoot( |
| createSpanWithText("before1"), |
| createDOM("shadow", {}), |
| createSpanWithText("after1"))), |
| |
| description('A shadow element with an element'), |
| createDOM('div', {}, |
| createSpanWithText("host-child"), |
| createShadowRoot( |
| createSpanWithText("before0"), |
| createDOM("content", {}), |
| createSpanWithText("after0")), |
| createShadowRoot( |
| createSpanWithText("before1"), |
| createDOM("shadow", {}, |
| createSpanWithText("shadow-child")), |
| createSpanWithText("after1"))), |
| |
| description('A shadow element with a content element and an element'), |
| createDOM('div', {}, |
| createSpanWithText("host-child"), |
| createShadowRoot( |
| createSpanWithText("before0"), |
| createDOM("content", {}), |
| createSpanWithText("after0")), |
| createShadowRoot( |
| createSpanWithText("before1"), |
| createDOM("shadow", {}, |
| createDOM("content", {}), |
| createSpanWithText("shadow-child")), |
| createSpanWithText("after1"))), |
| |
| description('A shadow element as a descendant of a content element'), |
| createDOM('div', {}, |
| createSpanWithText("host-child"), |
| createShadowRoot( |
| createSpanWithText("before0"), |
| createDOM("content", {}), |
| createSpanWithText("after0")), |
| createShadowRoot( |
| createSpanWithText("before1"), |
| createDOM("content", {}, |
| createDOM("shadow", {})), |
| createSpanWithText("after1"))), |
| |
| description('A shadow element as a descendant of a shadow element'), |
| createDOM('div', {}, |
| createSpanWithText("host-child"), |
| createShadowRoot( |
| createSpanWithText("before0"), |
| createDOM("content", {}), |
| createSpanWithText("after0")), |
| createShadowRoot( |
| createSpanWithText("before1"), |
| createDOM("shadow", {}, |
| createDOM("shadow", {}, |
| createSpanWithText("inactive-shadow-child"))), |
| createSpanWithText("after1"))), |
| |
| description('A complex case'), |
| createDOM('div', {}, |
| createSpanWithText("host-child"), |
| createShadowRoot( |
| createSpanWithText("before0"), |
| createDOM("content", {}), |
| createSpanWithText("after0")), |
| createShadowRoot( |
| createSpanWithText("before1"), |
| createDOM("shadow", {}, |
| createSpanWithText("shadow-1-child-1"), |
| createDOM("content", {}), |
| createSpanWithText("shadow-1-child-2")), |
| createSpanWithText("after1")), |
| createShadowRoot( |
| createSpanWithText("before2"), |
| createDOM("shadow", {}, |
| createSpanWithText("shadow-2-child-1"), |
| createDOM("content", {}), |
| createSpanWithText("shadow-2-child-2")), |
| createSpanWithText("after2"))), |
| ]; |
| |
| testcases.forEach(function(element) { |
| document.body.appendChild(element); |
| }); |
| </script> |
| </body> |
| </html> |
