blob: 701e99ece0be6d354d3b1db3b2e59d35915a0e34 [file] [log] [blame]
<html>
<head>
<script src="../../../http/tests/inspector/inspector-test.js"></script>
<script src="../../../http/tests/inspector/elements-test.js"></script>
<script>
function test()
{
var colors = [
// Each of these is red. Some may need to be clipped to [0, 255].
'red',
'#F00',
'#F00F',
'#FF0000',
'#FF0000FF',
'rgb(255,0,0)',
'rgb(300,0,0)', // clipped to rgb(255,0,0)
'rgb(255,-10,0)', // clipped to rgb(255,0,0)
'rgb(110%, 0%, 0%)', // clipped to rgb(100%,0%,0%)
// Each of these are valid
'rgba(0,0,0,0.5)',
'hsl(-120, 100%, 50%)',
'hsl(-120, 200%, 200%)', // clipped to hsl(240,100%,100%)
'hsl(-120, -200%, -200%)', // clipped to hsl(240,100%,100%)
'hsla(-120, -200%, -200%, -5)', // clipped to hsla(0,0%,0%,0)
'hsla(240,100%,50%,0.05)',
'hsl(200.5,0%,50%)',
'hsla(200,1.5%,50%,1)',
'rgba(0,0,0,.5)',
'hsla(.5,.5%,.5%,.5)',
'hsla(100.5,50.5%,50.5%,.5)',
// Each of these has their alpha clipped [0.0, 1.0].
'rgba(255, 0, 0, -5)', // clipped to rgba(255,0,0,0)
'rgba(255, 0, 0, 5)', // clipped to rgba(255,0,0,1)
];
var invalidColors = [
// An invalid color, eg a value for a shorthand like 'border' which can have a color
'none',
'#00000',
'#ggg',
'rgb(a,b,c)',
'rgb(a,b,c,d)',
'rgb(1,1,1.2)',
'rgba(0,0,0,1%)',
'rgba(0,0,0,)',
'hsl(0,0,0)',
'hsl(0%, 0%, 0%)',
'hsla(0,,0,1)',
'hsl(0, 0%, 0)',
'hsl(a,b,c)',
'hsla(0,0,0,0)',
'hsla'
];
InspectorTest.runTestSuite([
function testColors(next)
{
for (var i = 0; i < colors.length; ++i)
dumpColorRepresentationsForColor(colors[i]);
next();
},
function testInvalidColors(next)
{
for (var i = 0; i < invalidColors.length; ++i)
dumpErrorsForInvalidColor(invalidColors[i]);
next();
},
]);
function dumpErrorsForInvalidColor(colorString)
{
var color = Common.Color.parse(colorString);
if (!color) {
InspectorTest.addResult("");
InspectorTest.addResult("SUCCESS: parsed invalid color " + colorString + " to null");
} else {
InspectorTest.addResult("");
InspectorTest.addResult("FAIL: invalid color " + colorString + " did not parse to to null");
}
}
function dumpColorRepresentationsForColor(colorString)
{
var color = Common.Color.parse(colorString);
if (!color)
return;
InspectorTest.addResult("");
InspectorTest.addResult("color: " + colorString);
InspectorTest.addResult(" simple: " + !color.hasAlpha());
var cf = Common.Color.Format;
for (var colorFormatKey in cf) {
var colorFormat = cf[colorFormatKey];
// Simple colors do not have RGBA and HSLA representations.
if (!color.hasAlpha() && (colorFormat === cf.RGBA || colorFormat === cf.HSLA))
continue;
// Advanced colors do not have HEX representations.
if (color.hasAlpha() && (colorFormat === cf.ShortHEX || colorFormat === cf.HEX))
continue;
// If there is no ShortHEX then skip it.
if (colorFormat === cf.ShortHEX && color.detectHEXFormat() !== cf.ShortHEX)
continue;
// If there is no nickname, then skip it.
if (colorFormat === cf.Nickname && !color.nickname())
continue;
InspectorTest.addResult(' ' + colorFormat + ": " + color.asString(colorFormat));
}
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that the displayed string for colors correctly handles clipped CSS values and RGB percentages.
</p>
</body>
</html>