95 lines
5.5 KiB
HTML
95 lines
5.5 KiB
HTML
<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>
|