<!DOCTYPE html>
<script src="../../resources/js-test-pre.js"></script>
<style>
#control { 
    margin-left: 33%;
    margin-top: 10%;
    margin-right: 45%;
    margin-bottom: 69%;
}
#calc { 
    margin-left: calc(33%);
    margin-top: calc(10%);
    margin-right: calc(45%);
    margin-bottom: calc(69%);
}
</style>
<div id="control"></div>
<div id="calc"></div>
<script>
    function test(prop) {
        shouldEvaluateTo("getComputedStyle(document.getElementById('calc'), null).getPropertyValue('" + prop + "')", "getComputedStyle(document.getElementById('control', null)).getPropertyValue('" + prop + "')");
    }
    
    description("Tests calling getPropertyValue on computed margin styles involving CSS calc");
    
    test('margin-left');
    test('margin-top');
    test('margin-right');
    test('margin-bottom');
</script>
<script src="../../resources/js-test-post.js"></script>