<!DOCTYPE html>
<style>
#test {
    font-size: 5vh;
    width: 50vw;
}
#testpseudo:after {
    margin-left: 20vmin;
    padding-right: 25vmax;
    content: '';
}
</style>
<body>
    <div id="test"></div>
    <div id="testpseudo"></div>
</body>
<script src="../../resources/js-test-pre.js"></script>
<script src="resources/resize-test.js"></script>
<script>
description("Test that viewport lengths and font sizes properly resize with the viewport.");
standardResizeTest(function () {
    var min = Math.min(innerWidth, innerHeight);
    var max = Math.max(innerWidth, innerHeight);
    shouldBeEqualToString("getComputedStyle(test).fontSize", innerHeight / 20 + "px");
    shouldBeEqualToString("getComputedStyle(test).width", innerWidth / 2 + "px");
    shouldBeEqualToString("getComputedStyle(testpseudo, ':after').marginLeft", min / 5 + "px");
    shouldBeEqualToString("getComputedStyle(testpseudo, ':after').paddingRight", max / 4 + "px");
});
</script>
<script src="../../resources/js-test-post.js"></script>