<!DOCTYPE html>
<html>
<head>
<script src="resources/polyfill.js"></script>
<script>

var imageContentStyle = "content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAFklEQVQIHWPUFPzPgA0wYRMEiQ1OCQD4SAFJZaEkKQAAAABJRU5ErkJggg==);"

function createImageDivWithShadow() {
  var imageDiv = document.createElement('div');
  imageDiv.setAttribute("style", imageContentStyle);
  var shadow = imageDiv.webkitCreateShadowRoot(); 
  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.webkitCreateShadowRoot(); 
  shadow.appendChild(document.createElement('div'));
  shadow.appendChild(document.createElement('content'));
  return imageDiv;
}

function createImageDivWithFallbackContentShadow() {
  var imageDiv = document.createElement('div');
  imageDiv.setAttribute("style", imageContentStyle);
  var shadow = imageDiv.webkitCreateShadowRoot(); 
  shadow.appendChild(document.createElement('div'));
  var content = document.createElement('content');
  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>