shadow-on-image.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/dom/shadow/shadow-on-image.html
