96 lines
4.6 KiB
HTML
96 lines
4.6 KiB
HTML
<html>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
description("Test the parsing of lab(...) and lch(...) colors.");
|
|
|
|
function computedStyle(property, value)
|
|
{
|
|
var div = document.createElement("div");
|
|
document.body.appendChild(div);
|
|
div.style.setProperty(property, value);
|
|
var computedValue = getComputedStyle(div).getPropertyValue(property);
|
|
document.body.removeChild(div);
|
|
return computedValue;
|
|
}
|
|
|
|
function innerStyle(property, value)
|
|
{
|
|
var div = document.createElement("div");
|
|
div.style.setProperty(property, value);
|
|
return div.style.getPropertyValue(property);
|
|
}
|
|
|
|
function testComputed(property, value, expected)
|
|
{
|
|
shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
|
|
}
|
|
|
|
function testInner(property, value, expected)
|
|
{
|
|
if (expected === null)
|
|
expected = "";
|
|
shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
|
|
}
|
|
|
|
debug('lab()');
|
|
testComputed("background-color", "lab(0% 0 0)", "lab(0% 0 0)");
|
|
testComputed("background-color", "lab(0% 0 0 / 1)", "lab(0% 0 0)");
|
|
testComputed("background-color", "lab(0% 0 0 / 0.5)", "lab(0% 0 0 / 0.5)");
|
|
testComputed("background-color", "lab(20% 0 10/0.5)", "lab(20% 0 10 / 0.5)");
|
|
testComputed("background-color", "lab(20% 0 10/50%)", "lab(20% 0 10 / 0.5)");
|
|
testComputed("background-color", "lab(400% 0 10/50%)", "lab(400% 0 10 / 0.5)");
|
|
testComputed("background-color", "lab(50% -160 160)", "lab(50% -160 160)");
|
|
testComputed("background-color", "lab(50% -200 200)", "lab(50% -200 200)");
|
|
testComputed("background-color", "lab(0% 0 0 / -10%)", "lab(0% 0 0 / 0)");
|
|
testComputed("background-color", "lab(0% 0 0 / 110%)", "lab(0% 0 0)");
|
|
testComputed("background-color", "lab(0% 0 0 / 300%)", "lab(0% 0 0)");
|
|
testComputed("background-color", "lab(-40% 0 0)", "lab(0% 0 0)");
|
|
testComputed("background-color", "lab(50% -20 0)", "lab(50% -20 0)");
|
|
testComputed("background-color", "lab(50% 0 -20)", "lab(50% 0 -20)");
|
|
|
|
debug('');
|
|
debug('lch()');
|
|
testComputed("background-color", "lch(0% 0 0deg)", "lch(0% 0 0)");
|
|
testComputed("background-color", "lch(0% 0 0deg / 1)", "lch(0% 0 0)");
|
|
testComputed("background-color", "lch(0% 0 0deg / 0.5)", "lch(0% 0 0 / 0.5)");
|
|
testComputed("background-color", "lch(100% 230 0deg / 0.5)", "lch(100% 230 0 / 0.5)");
|
|
testComputed("background-color", "lch(20% 50 20deg/0.5)", "lch(20% 50 20 / 0.5)");
|
|
testComputed("background-color", "lch(20% 50 20deg/50%)", "lch(20% 50 20 / 0.5)");
|
|
testComputed("background-color", "lch(10% 20 20deg / -10%)", "lch(10% 20 20 / 0)");
|
|
testComputed("background-color", "lch(10% 20 20deg / 110%)", "lch(10% 20 20)");
|
|
testComputed("background-color", "lch(10% 20 1.28rad)", "lch(10% 20 73.3386)");
|
|
testComputed("background-color", "lch(10% 20 380deg)", "lch(10% 20 20)");
|
|
testComputed("background-color", "lch(10% 20 -340deg)", "lch(10% 20 20)");
|
|
testComputed("background-color", "lch(10% 20 740deg)", "lch(10% 20 20)");
|
|
testComputed("background-color", "lch(10% 20 -700deg)", "lch(10% 20 20)");
|
|
testComputed("background-color", "lch(-40% 0 0)", "lch(0% 0 0)");
|
|
testComputed("background-color", "lch(20% -20 0)", "lch(20% 0 0)");
|
|
// hue (the third argument) can be either an angle or number, with number interpreted as degrees.
|
|
testComputed("background-color", "lch(0% 0 0 / 0.5)", "lch(0% 0 0 / 0.5)");
|
|
testComputed("background-color", "lch(10% 20 20 / 110%)", "lch(10% 20 20)");
|
|
testComputed("background-color", "lch(10% 20 -700)", "lch(10% 20 20)");
|
|
|
|
debug('');
|
|
debug('Test invalid values');
|
|
testComputed("background-color", "lab(0 0 0)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lab(0% 0% 0)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lab(0% 0 0 1)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lab(0% 0 0 10%)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lab(0% 0 0deg)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lab(0% 0% 0deg)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lab(40% 0 0deg)", "rgba(0, 0, 0, 0)");
|
|
|
|
testComputed("background-color", "lch(0 0 0 / 0.5)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lch(20% 10 10deg 10)", "rgba(0, 0, 0, 0)");
|
|
testComputed("background-color", "lch(20% 10 10deg 10 / 0.5)", "rgba(0, 0, 0, 0)");
|
|
|
|
testComputed("background-color", "color(lab 20% 0 10 / 50%)", "rgba(0, 0, 0, 0)");
|
|
|
|
</script>
|
|
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|