<!DOCTYPE html><metacharset="UTF-8"><title>CSS Values Test: computed value of 3 calc() values</title><!-- " Where percentages are not resolved at computed-value time, they are not resolved in math functions, e.g. 'calc(100% - 100% + 1px)' resolves to 'calc(0% + 1px)', not to '1px'. If there are special rules for computing percentages in a value (e.g. the 'height' property), they apply whenever a math function contains percentages. " § 10.11 Computed Value https://www.w3.org/TR/css-values-4/#calc-computed-value --><linkrel="author"title="Gérard Talbot"href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"><linkrel="help"href="https://www.w3.org/TR/css-values-4/#calc-computed-value"><metaname="flags"content=""><metacontent="This test verifies that terms with a percentage unit that can not be resolved at computed-value time will require a calc() wrapper. A term with an em value, on the other hand, must be resolved at computed-value time and therefore must be absolutized to 'px'."name="assert"><scriptsrc="/resources/testharness.js"></script><scriptsrc="/resources/testharnessreport.js"></script><style>html,body{font-size:16px;height:570px;}div#target{background-color:yellow;background-image:url("support/cat.png");background-position:topcenter;background-repeat:no-repeat;background-size:14%50%;/* entirely arbitrary and random background-size values */height:200px;}</style><divid="target"></div><script>functionstartTesting(){vartargetElement=document.getElementById("target");functionverifyComputedStyle(property_name,specified_value,expected_value){test(function(){targetElement.style.setProperty(property_name,specified_value);assert_equals(getComputedStyle(targetElement)[property_name],expected_value);},`testing ${property_name}: ${specified_value}`);}verifyComputedStyle("background-size","calc(67% - 54% + 4em) 50%","calc(13% + 64px) 50%");/* "Where percentages are not resolved at computed-value time, they are not resolved in math functions (...)" https://www.w3.org/TR/css-values-4/#calc-serialize Therefore here, the percentage is preserved and a calc() wrapper must be used. The 4em term must be resolved though. */verifyComputedStyle("background-position","calc(100% - 100% + 20em)","calc(0% + 320px) 50%");/* Here too, the percentage is preserved and a calc() wrapper must be used. The 20em term must be resolved though. */verifyComputedStyle("height","calc(60% - 50% + 3em)","105px");/* The height of the containing block of div#target is not auto. So, such percentage can and must be resolved at computed-value time. 570px mult 10% == 57px + 48px ============ 105px */}startTesting();</script>
