<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Values Test: percentages in calc() and computed border-radius values</title>

  <!--

  Bugzilla bug report 1516454: Computed value of border-radius with calc(percentage) is incorrect
  https://bugzilla.mozilla.org/show_bug.cgi?id=1516454

  -->

  <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-3/#calc-computed-value">

  <style>
  div#target
    {
      border: black solid 5px;
      height: 100px;
      width: 100px;
    }
  </style>

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

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

  <div id="log"></div>

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

  <script>
  function startTesting()
  {

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

    function compareValue(property_name, calcValue, expectedValue, description)
    {

    test(function()
      {

      targetElement.style.setProperty(property_name, "initial");

      targetElement.style.setProperty(property_name, calcValue);

      var computedCalcValue = getComputedStyle(targetElement)[property_name];

      targetElement.style.setProperty(property_name, expectedValue);

      var computedExpectedValue = getComputedStyle(targetElement)[property_name];

      assert_equals(computedCalcValue, computedExpectedValue);

      }, description);
    }

    compareValue("border-top-left-radius", "calc(50%)", "50%", "simple percentage conversion test 1");

    compareValue("border-top-right-radius", "calc(50%)", "50%", "simple percentage conversion test 2");

    compareValue("border-bottom-left-radius", "calc(50%)", "50%", "simple percentage conversion test 3");

    compareValue("border-bottom-right-radius", "calc(50%)", "50%", "simple percentage conversion test 4");

    compareValue("border-top-left-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 5");

    compareValue("border-top-right-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 6");

    compareValue("border-bottom-left-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 7");

    compareValue("border-bottom-right-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 8");
  }

  startTesting();

  </script>