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