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