<!DOCTYPE html>
<html>
<head>
<style>
/* relative positioning ensures underlying Layer */
.container {
    position: relative;
}

.span {
    display: boxed-inline;
    margin: 2px;
    border: solid;
}
</style>
<script src="../resources/shadow-test-driver.js"></script>
<script>

var testFuncs = [];

testFuncs.push(function contentElementInMeterElement(callIfDone) {
    document.getElementById('expect-container').innerHTML = "<div><meter><div></div></meter></div>";

    var div = document.createElement('div');
    div.appendChild(document.createElement('div'));

    document.getElementById('actual-container').appendChild(div);

    var sr = div.createShadowRoot();

    var meter = document.createElement('meter');
    var content = document.createElement('content');
    meter.appendChild(content);
    sr.appendChild(meter);
    document.body.offsetWidth; // force style recalc.
    callIfDone();
});

</script>
</head>
<body onload="doTest(testFuncs)">

<div id="actual-container" class="container"></div>
<div id="expect-container" class="container"></div>
<pre id="console"></pre>

</body>
</html>