blob: 6cf7e2cf823e07fd357d429f054fec039a8830f0 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
if (window.internals)
internals.settings.setConicGradientsEnabled(true);
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)")
testGradient("conic-gradient(at center, red, gold)", "conic-gradient(at center center, red, gold)")
testGradient("conic-gradient(at 25% 75%, red, gold)")
testGradient("conic-gradient(from 0deg at 50% 50%, 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(63, 63, 63))");
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(from 0deg at center center, red, gold)");
}, "Test repeating-conic-gradient parsing");
</script>
</body>
</html>