<!DOCTYPE html>
<html>
<body>
<script src="resources/polyfill.js"></script>
<style>
progress {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    height: 3em;
    vertical-align: 0;
}

progress::-webkit-progress-inner-element {
    -webkit-appearance: progress-bar; /* We have to write this for now. Please see Bug 92455. */
    display: block;
    width: 15em;
    height: 3em;
}
</style>

<div id="container">
    <progress id="host" min="0" max="100" value="50"></progress>
</div>

<script>
if (window.internals)
    internals.settings.setAuthorShadowDOMForAnyElementEnabled(true);

var shadowRoot = host.webkitCreateShadowRoot();
shadowRoot.innerHTML = "<div style='margin-left: 100px'><shadow></shadow><span>(after)</span></div>";
</script>

</body>
</html>