<!DOCTYPE html>
<style>
    #container {
        font-size: 5vw;
    }
    #ems {
        font-size: 4em;
    }
    #percent {
        font-size: 50%;
    }
</style>
<body>
    <div id="container">
        <div id="ems"></div>
        <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 relative font sizes work when the parent is in viewport units.");
standardResizeTest(function () {
    shouldBeEqualToString("getComputedStyle(container).fontSize", (innerWidth / 20) + "px");
    shouldBeEqualToString("getComputedStyle(ems).fontSize", (innerWidth / 5) + "px");
    shouldBeEqualToString("getComputedStyle(percent).fontSize", (innerWidth / 40) + "px");
});
</script>
<script src="../../resources/js-test-post.js"></script>