<!DOCTYPE html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>

function roundTrip(css)
{
    var div = document.createElement('div');
    div.setAttribute('style', css);
    document.body.appendChild(div);

    var result = getComputedStyle(div).backgroundImage;
    document.body.removeChild(div);
    return result;
}

function testGradient(actual, expected)
{
    if (expected === undefined)
        expected = actual;

    assert_equals(roundTrip("background-image:" + actual), expected, "Testing round trip of " + actual);        
}

// FIXME Test invalid parameters.
// FIXME Test double position syntax for color stops.

test(function() {
    testGradient("conic-gradient(red, gold)")
    testGradient("conic-gradient(from 0deg, red, gold)", "conic-gradient(red, gold)")
    testGradient("conic-gradient(at center, red, gold)", "conic-gradient(red, gold)")
    testGradient("conic-gradient(at 25% 75%, red, gold)")
    testGradient("conic-gradient(from 0deg at 50% 50%, red, gold)", "conic-gradient(red, gold)")
    testGradient("conic-gradient(red 0%, gold 100%)")
    testGradient("conic-gradient(red 0deg, gold 1turn)");
    testGradient("conic-gradient(white -50%, black 150%)");
    testGradient("conic-gradient(white -180deg, black 540deg)");
    testGradient("conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%))", "conic-gradient(rgb(191, 191, 191), rgb(64, 64, 64))");
    testGradient("conic-gradient(from 45deg, white, black, white)");
    testGradient("conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%))", "conic-gradient(rgb(223, 223, 223), white 45deg, black 225deg, rgb(223, 223, 223))");

    var s = "conic-gradient(";
    for (var x = 0; x < 500; x++)
         s += `white ${x/500}%, ${(2 * x + 1) / 1000}%, `;
    s += "black)";
    testGradient(s);
}, "Test conic-gradient parsing");

test(function() {
    testGradient("repeating-conic-gradient(red, gold)");
    testGradient("repeating-conic-gradient(from 0deg at center, red, gold)", "repeating-conic-gradient(red, gold)");
}, "Test repeating-conic-gradient parsing");

</script>
</body>
</html>