getComputedStyle-border-radius-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-values/getComputedStyle-border-radius-002.html - WPT Dashboard Interop Dashboard

<!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>