<!DOCTYPE html>
<html>
<head>
<style>
content {
    color: blue;
}
</style>
</head>
<body>
  <div>
    <content>Should be colored blue.</content>
  </div>
  <div>
    <div id="hostWithChild">Should have no cool color.</div>
    <content id="toBeMoved">Should have no cool color either.</content>
    <div id="hostEmpty"></div>
  </div>
<script>
// Ensures that distributed shadow child isn't effected by the style.
var hostWithChild = document.getElementById("hostWithChild");
var shadowForHostWithChild = hostWithChild.webkitCreateShadowRoot();
shadowForHostWithChild.appendChild(document.createElement("content"));

// Also ensures that dynamically moved <content> elements do work.
var hostEmpty = document.getElementById("hostEmpty");
var shadowForHostEmpty = hostEmpty.webkitCreateShadowRoot();
shadowForHostEmpty.appendChild(document.getElementById("toBeMoved"));

</script>
</body>