| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| |
| var imageContentStyle = "content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAFklEQVQIHWPUFPzPgA0wYRMEiQ1OCQD4SAFJZaEkKQAAAABJRU5ErkJggg==);" |
| |
| function createImageDivWithShadow() { |
| var imageDiv = document.createElement('div'); |
| imageDiv.setAttribute("style", imageContentStyle); |
| var shadow = imageDiv.attachShadow({mode: 'open'}); |
| shadow.appendChild(document.createElement('div')); |
| return imageDiv; |
| } |
| |
| function createImageDivWithContentShadow() { |
| var imageDiv = document.createElement('div'); |
| imageDiv.setAttribute("style", imageContentStyle); |
| imageDiv.appendChild(document.createElement('div')); |
| var shadow = imageDiv.attachShadow({mode: 'open'}); |
| shadow.appendChild(document.createElement('div')); |
| shadow.appendChild(document.createElement('span')); |
| return imageDiv; |
| } |
| |
| function createImageDivWithFallbackContentShadow() { |
| var imageDiv = document.createElement('div'); |
| imageDiv.setAttribute("style", imageContentStyle); |
| var shadow = imageDiv.attachShadow({mode: 'open'}); |
| shadow.appendChild(document.createElement('div')); |
| var content = document.createElement('span'); |
| content.innerHTML = "<div></div>"; |
| shadow.appendChild(content); |
| return imageDiv; |
| } |
| |
| function test() { |
| document.body.appendChild(createImageDivWithShadow()); |
| document.body.appendChild(createImageDivWithContentShadow()); |
| document.body.appendChild(createImageDivWithFallbackContentShadow()); |
| } |
| </script> |
| </head> |
| <body onload="test()"></body> |
| </html> |
