<meta charset="UTF-8">

<title>CSS Values and Units Test: serialization of summation involving nested calc()</title>

<!--

<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

<link rel="help" href="https://www.w3.org/TR/css-values-4/#math-function-simplify-an-expression">

<meta content="This test checks that how a summation involving one or more nested calc() is performed and serialized." name="assert">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id="target"></div>

<script>

function startTesting()

{

var targetElement = document.getElementById("target");

function verifySerialization(specified_value, serialization_expected, description)

{

test(function()

{

targetElement.style.left = specified_value;

assert_equals(targetElement.style.left, serialization_expected);

}, description);

}

verifySerialization("calc(20px + calc(80px))", "calc(100px)", "testing calc(20px + calc(80px))");

verifySerialization("calc(calc(100px))", "calc(100px)", "testing calc(calc(100px))");

verifySerialization("calc(calc(2) * calc(50px)", "calc(100px)", "testing calc(calc(2) * calc(50px)");

verifySerialization("calc(calc(150px*2/3)", "calc(100px)", "testing calc(calc(150px*2/3)");

verifySerialization("calc(calc(2 * calc(calc(3)) + 4) * 10px)", "calc(100px)", "testing calc(calc(2 * calc(calc(3)) + 4) * 10px)");

verifySerialization("calc(50px + calc(40%))", "calc(40% + 50px)", "testing calc(50px + calc(40%))");

verifySerialization("calc(calc(300px - 1 * (0% + 100px)))", "calc(0% + 200px)", "testing calc(calc(300px - 1 * (0% + 100px)))");

verifySerialization("calc(calc(300px - (0% + 100px) * 1))", "calc(0% + 200px)", "testing calc(calc(300px - (0% + 100px) * 1))");

verifySerialization("calc(calc(300px - (0% + 100px) * -1))", "calc(0% + 400px)", "testing calc(calc(300px - (0% + 100px) * -1))");

verifySerialization("calc(calc(300px - -1 * (0% + 100px)))", "calc(0% + 400px)", "testing calc(calc(300px - -1 * (0% + 100px)))");

verifySerialization("calc(calc(300px - 1 * (0% - 100px)))", "calc(0% + 400px)", "testing calc(calc(300px - 1 * (0% - 100px)))");

verifySerialization("calc(0px - 1 * (min(20%, 20px) - 10px))", "calc(0px - (1 * (-10px + min(20%, 20px))))", "testing simplification with nested sum");

/*

}

startTesting();

</script>