blob: 3833fb72ee2997c584c6d0563c9553b6e4674fea [file] [log] [blame]
<pre id="console"></pre>
<script>
function log(message)
{
document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
}
function testBorderRadiusStyleProperty(property, value, expected)
{
log ("Testing " + property + ": " + value + ";");
var element = document.createElement("div");
document.body.appendChild(element);
element.style.setProperty(property, value);
var failed = false;
if(element.style[property] !== expected) {
log("FAILED style: " + property + " was " + element.style[property] + " instead of " + expected);
failed = true;
}
if (!failed)
log("SUCCESS");
document.body.removeChild(element);
}
function testBorderRadiusValue(property, value, expectedRadii)
{
log ("Testing " + property + ": " + value + ";");
var element = document.createElement("div");
document.body.appendChild(element);
element.style.setProperty(property, value);
var computedStyle = getComputedStyle(element);
var properties = ["border-top-left-radius", "border-top-right-radius",
"border-bottom-right-radius", "border-bottom-left-radius"];
var failed = false;
for (var i = 0; i < 4; ++i) {
actualRadius = computedStyle.getPropertyValue(properties[i]);
if (actualRadius === expectedRadii[i])
continue;
failed = true;
log("FAILED: " + properties[i] + " was " + actualRadius + " instead of " + expectedRadii[i]);
}
if (!failed)
log("SUCCESS");
document.body.removeChild(element);
}
if (window.testRunner)
testRunner.dumpAsText();
testBorderRadiusStyleProperty("border-radius", "10px", "10px", "10px", "10px", "10px");
testBorderRadiusStyleProperty("border-radius", "10px 20px 30px 40px", "10px 20px 30px 40px");
testBorderRadiusStyleProperty("border-radius", "10px 20px 30px 40px 50px", "");
testBorderRadiusStyleProperty("border-radius", "10px 20px", "10px 20px");
testBorderRadiusValue("border-radius", "10px 20px", ["10px", "20px", "10px", "20px"]);
testBorderRadiusValue("border-radius", "10px", ["10px", "10px", "10px", "10px"]);
testBorderRadiusValue("border-radius", "10px 20px", ["10px", "20px", "10px", "20px"]);
testBorderRadiusValue("-webkit-border-radius", "10px 20px", ["10px 20px", "10px 20px", "10px 20px", "10px 20px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px", ["10px", "20px", "30px", "20px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px", ["10px", "20px", "30px", "40px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px 50px", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px", ["10px 15px", "20px 15px", "30px 15px", "40px 15px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px", ["10px 15px", "20px 25px", "30px 15px", "40px 25px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px", ["10px 15px", "20px 25px", "30px 35px", "40px 25px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px 45px", ["10px 15px", "20px 25px", "30px 35px", "40px 45px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px 45px 55px", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px 45px /", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10px 20px 30px 40px / / 25px 35px 45px", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "/ 10px 20px 30px 40px", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10px / 20px 30px 40px", ["10px 20px", "10px 30px", "10px 40px", "10px 30px"]);
testBorderRadiusValue("border-radius", "10%", ["10%", "10%", "10%", "10%"]);
testBorderRadiusValue("border-radius", "10% 20%", ["10%", "20%", "10%", "20%"]);
testBorderRadiusValue("-webkit-border-radius", "10% 20%", ["10% 20%", "10% 20%", "10% 20%", "10% 20%"]);
testBorderRadiusValue("border-radius", "10% 20% 30%", ["10%", "20%", "30%", "20%"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40%", ["10%", "20%", "30%", "40%"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% 50%", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15%", ["10% 15%", "20% 15%", "30% 15%", "40% 15%"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25%", ["10% 15%", "20% 25%", "30% 15%", "40% 25%"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35%", ["10% 15%", "20% 25%", "30% 35%", "40% 25%"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35% 45%", ["10% 15%", "20% 25%", "30% 35%", "40% 45%"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35% 45% 55%", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35% 45% /", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10% 20% 30% 40% / / 25% 35% 45%", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "/ 10% 20% 30% 40%", ["0px", "0px", "0px", "0px"]);
testBorderRadiusValue("border-radius", "10% / 20% 30% 40%", ["10% 20%", "10% 30%", "10% 40%", "10% 30%"]);
testBorderRadiusValue("border-radius", "10% 20px", ["10%", "20px", "10%", "20px"]);
</script>