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