<!DOCTYPE html>
<style>
    #container {
        width: 50vw;
        height: 50vh;
    }
    #percent {
        width: 50%;
        height: 50%;
    }
</style>
<body>
    <div id="container">
        <div id="percent"></div>
    </div>
</body>
<script src="../../resources/js-test-pre.js"></script>
<script src="resources/resize-test.js"></script>
<script>
description("Test that percentage dimensions work in a child with a parent with viewport unit dimensions.");
standardResizeTest(function () {
    shouldBeEqualToString("getComputedStyle(container).width", innerWidth / 2 + "px");
    shouldBeEqualToString("getComputedStyle(container).height", innerHeight / 2 + "px");
    shouldBeEqualToString("getComputedStyle(percent).width", innerWidth / 4 + "px");
    shouldBeEqualToString("getComputedStyle(percent).height", innerHeight / 4 + "px");
});
</script>
<script src="../../resources/js-test-post.js"></script>