calc-nesting-002.html (2918B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units Test: serialization of summation involving nested calc()</title> 6 7 <!-- 8 9 This test is an adapted version of the portion of the original test 10 11 https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-nesting.html 12 13 which required using property-parsing-test.js 14 15 --> 16 17 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 18 <link rel="help" href="https://www.w3.org/TR/css-values-4/#math-function-simplify-an-expression"> 19 20 <meta content="This test checks that how a summation involving one or more nested calc() is performed and serialized." name="assert"> 21 22 <script src="/resources/testharness.js"></script> 23 24 <script src="/resources/testharnessreport.js"></script> 25 26 <div id="target"></div> 27 28 <script> 29 function startTesting() 30 { 31 32 var targetElement = document.getElementById("target"); 33 34 function verifySerialization(specified_value, serialization_expected, description) 35 { 36 37 test(function() 38 { 39 40 targetElement.style.left = specified_value; 41 42 assert_equals(targetElement.style.left, serialization_expected); 43 44 }, description); 45 } 46 47 verifySerialization("calc(20px + calc(80px))", "calc(100px)", "testing calc(20px + calc(80px))"); 48 49 verifySerialization("calc(calc(100px))", "calc(100px)", "testing calc(calc(100px))"); 50 51 verifySerialization("calc(calc(2) * calc(50px)", "calc(100px)", "testing calc(calc(2) * calc(50px)"); 52 53 verifySerialization("calc(calc(150px*2/3)", "calc(100px)", "testing calc(calc(150px*2/3)"); 54 55 verifySerialization("calc(calc(2 * calc(calc(3)) + 4) * 10px)", "calc(100px)", "testing calc(calc(2 * calc(calc(3)) + 4) * 10px)"); 56 57 verifySerialization("calc(50px + calc(40%))", "calc(40% + 50px)", "testing calc(50px + calc(40%))"); 58 59 verifySerialization("calc(calc(300px - 1 * (0% + 100px)))", "calc(0% + 200px)", "testing calc(calc(300px - 1 * (0% + 100px)))"); 60 61 verifySerialization("calc(calc(300px - (0% + 100px) * 1))", "calc(0% + 200px)", "testing calc(calc(300px - (0% + 100px) * 1))"); 62 63 verifySerialization("calc(calc(300px - (0% + 100px) * -1))", "calc(0% + 400px)", "testing calc(calc(300px - (0% + 100px) * -1))"); 64 65 verifySerialization("calc(calc(300px - -1 * (0% + 100px)))", "calc(0% + 400px)", "testing calc(calc(300px - -1 * (0% + 100px)))"); 66 67 verifySerialization("calc(calc(300px - 1 * (0% - 100px)))", "calc(0% + 400px)", "testing calc(calc(300px - 1 * (0% - 100px)))"); 68 69 /* 70 71 " 72 Sort the terms in the following order: 73 74 The number, if present 75 76 The percentage, if present 77 78 The dimensions, ordered by their units ASCII case-insensitive alphabetically 79 " 80 https://www.w3.org/TR/css-values-4/#math-function-serialize-a-summation 81 82 */ 83 84 } 85 86 startTesting(); 87 88 </script>