<!DOCTYPE html>
<style>
    #container {
        width: 50vw;
        height: 50vh;
        border: 1px solid black;
    }
    #random {
        width: 50%;
        background-color: orange;
    }
</style>
<body>
    <div id="container">
        <span id="firstContent">This is enough text content that it will wrap around in this container. We need lots of it to account for variances in font sizes.</span>
        <div id="random">
            This is some content in an inner div.
        </div>
        <span id="secondContent">And here is some more content that will also wrap around in this container. We need lots of it to account for variances in font sizes.</span>
    </div>
</body>
<script src="../../resources/js-test-pre.js"></script>
<script src="resources/resize-test.js"></script>
<script>
description("Test viewport unit sizes work when an anonymous block is involved.");
standardResizeTest(function () {
    shouldBeEqualToString("getComputedStyle(container).width", innerWidth / 2 + "px");
    shouldBeEqualToString("getComputedStyle(container).height", innerHeight / 2 + "px");
    shouldBeEqualToString("getComputedStyle(random).width", innerWidth / 4 + "px");
    shouldBeGreaterThanOrEqual("innerWidth / 2", "document.getElementById('firstContent').offsetWidth");
    shouldBeGreaterThanOrEqual("innerWidth / 2", "document.getElementById('secondContent').offsetWidth");
});
</script>
<script src="../../resources/js-test-post.js"></script>