| 12
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 
 | <!DOCTYPE html>
  <meta charset="UTF-8">
  <title>CSS Values and Units Test: serialization of summation involving nested calc()</title>
  <!--
  This test is an adapted version of the portion of the original test
  https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-nesting.html
  which required using property-parsing-test.js
  -->
  <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%))");
  /*
  "
  Sort the terms in the following order:
    The number, if present
    The percentage, if present
    The dimensions, ordered by their units ASCII case-insensitive alphabetically
  "
  https://www.w3.org/TR/css-values-4/#math-function-serialize-a-summation
  */
  }
  startTesting();
  </script>
 |