<!DOCTYPE html>
<html>
<head>
<title>Color-stops parsing</title>
<link rel="author" title="Florin Malita" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-images-4/#color-stop-syntax">
<meta name="assert" content="General color stop parsing (applicable to all gradients) follows CSS Images 4 rules.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
var tests = [
// invalid stops
{ stops: "" , parse: false },
{ stops: "black" , parse: false },
{ stops: "black 0%" , parse: false },
{ stops: "black, 25%" , parse: false },
{ stops: "black, invalid" , parse: false },
{ stops: "black, , white" , parse: false },
{ stops: "black, white, 75%" , parse: false },
{ stops: "black, 25% 50%, white" , parse: false },
{ stops: "black, 25%, 50%, white" , parse: false },
{ stops: "black 10% 25% 50%, white", parse: false },
{ stops: ",black, white" , parse: false },
{ stops: "0%, black, white" , parse: false },
// basic stops
{ stops: "black, white" , parse: true },
{ stops: "black 0, white" , parse: true },
{ stops: "black 0%, white" , parse: true },
{ stops: "black 0%, white 100%" , parse: true },
{ stops: "black, green, white" , parse: true },
{ stops: "black 0%, green 50%, white 100%" , parse: true },
{ stops: "black 50%, green 10%, white 100%", parse: true },
// interpolation hints
{ stops: "black, 25%, white" , parse: true },
{ stops: "black 0%, 25%, white 100%" , parse: true },
{ stops: "black 0%, 15%, green 50%, 60%, white 100%", parse: true },
// dual-positioning
{ stops: "black 0% 50%, white" , parse: true },
{ stops: "black 0% 50%, white 50% 100%" , parse: true },
{ stops: "black 0% 50%, green 25% 75%, white 50% 100%", parse: true },
// kitchen sink
{ stops: "black 0% calc(100% / 5), 25%, green 30% 60%, calc(100% * 3 / 4), white calc(100% - 20%) 100%", parse: true },
// lots of stops
{
stops: (() => {
let longGradient = "";
for (let x = 0; x < 500; x++) {
longGradient += `white ${x/500}%, ${(2 * x + 1) / 1000}%, `;
}
longGradient += "black";
return longGradient;
})(),
parse: true
}
];
function check_gradient(gradient, stops, shouldParse) {
var div = document.createElement('div');
div.setAttribute("style", "background-image: " + gradient + "(" + stops + ")");
var inline_style = div.style.getPropertyValue("background-image");
assert_equals(inline_style.startsWith(gradient), shouldParse);
document.body.appendChild(div);
var computed_style = getComputedStyle(div).getPropertyValue("background-image");
assert_equals(computed_style.startsWith(gradient), shouldParse);
div.remove();
}
[ "linear-gradient",
"repeating-linear-gradient",
"radial-gradient",
"repeating-radial-gradient",
"conic-gradient",
"repeating-conic-gradient"
].forEach(function(gradient) {
tests.forEach(function(tst) {
test(function() {
check_gradient(gradient, tst.stops, tst.parse);
}, gradient + "(" + tst.stops + ") " + (tst.parse ? "[ parsable ]" : "[ unparsable ]"));
});
});
</script>
</body>
</html>
Codebase Browser
chromium