https://github.com/web-platform-tests/wpt
Tip revision: cd5bb894656e15405f1ab638cda9b24608e19f86 authored by Geoffrey Sneddon on 30 April 2018, 13:10:40 UTC
fixup! Fix #2669: Add alternate_hosts
fixup! Fix #2669: Add alternate_hosts
Tip revision: cd5bb89
color-resolving.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: Resolving color values</title>
<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-values">
<meta name="assert" content="Tests if color values are resolved properly">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="parent" style="color: rgb(45, 23, 27)">
<div id="inner"></div>
</div>
<script>
function color_test(color, expected, reason) {
test(function() {
var element = document.getElementById('inner');
// Random value not in our test data.
fail_value = "rgb(12, 34, 223)"
element.style.color = "black";
element.style.cssText = "color: " + fail_value + "; color: " + color;
if (expected === null)
assert_equals(getComputedStyle(element).color, fail_value);
else
assert_equals(getComputedStyle(element).color, expected);
}, `${reason}: ${color}`);
}
function expected_value(rgb_channels) {
if (rgb_channels === null)
return null;
else if (rgb_channels.length === 3 || rgb_channels[3] == 1)
return "rgb(" + rgb_channels.slice(0, 3).join(", ") + ")";
else
return "rgba(" + rgb_channels.join(", ") + ")";
}
tests = [
// Keyword tests
["", null, "Should not parse invalid keyword"],
[" /* hey */\n", null, "Should not parse invalid keyword"],
["4", null, "Should not parse invalid keyword"],
["top", null, "Should not parse invalid keyword"],
["/**/transparent", [0, 0, 0, 0], "Should parse to completely transparent"],
["transparent", [0, 0, 0, 0], "Should parse to completely transparent"],
[" transparent\n", [0, 0, 0, 0], "Should parse to completely transparent"],
["TransParent", [0, 0, 0, 0], "Should parse to completely transparent"],
["currentColor", [45, 23, 27], "Should be same as parent color"],
["CURRENTcolor", [45, 23, 27], "Should be same as parent color"],
["current-Color", null, "Should not parse invalid keyword"],
["black", [0, 0, 0, 1], "Should parse as correct value"],
["white", [255, 255, 255, 1], "Should parse as correct value"],
["fuchsia", [255, 0, 255, 1], "Should parse as correct value"],
["cyan", [0, 255, 255, 1], "Should parse as correct value"],
["CyAn", [0, 255, 255, 1], "Should parse as cyan"],
// Hex tests
["#", null, "Should not parse invalid hex"],
["#f", null, "Should not parse invalid hex"],
["#ff", null, "Should not parse invalid hex"],
["#fff", [255, 255, 255, 1], "Valid 3-digit hex"],
["#ffg", null, "Should not parse invalid hex"],
["#ffff", [255, 255, 255, 1], "Valid 4-digit hex"],
["#fffg", null, "Should not parse invalid hex"],
["#fffff", null, "Should not parse invalid hex"],
["#ffffff", [255, 255, 255, 1], "Valid 6-digit hex"],
["#fffffg", null, "Should not parse invalid hex"],
["#fffffff", null, "Should not parse invalid hex"],
["#ffffffff", [255, 255, 255, 1], "Valid 8-digit hex"],
["#fffffffg", null, "Should not parse invalid hex"],
["#fffffffff", null, "Should not parse invalid hex"],
["#FFCc99", [255, 204, 153, 1], "Valid 6-digit hex"],
["#369", [51, 102, 153, 1], "Valid 3-digit hex"],
// RGB tests
["rgb(00, 51, 102)", [0, 51, 102, 1], "Valid numbers should be parsed"],
["r\\gb(00, 51, 102)", [0, 51, 102, 1], "Correct escape sequences should still parse"],
["r\\67 b(00, 51, 102)", [0, 51, 102, 1], "Correct escape sequences should still parse"],
["RGB(153, 204, 255)", [153, 204, 255, 1], "Capitalization should not affect parsing"],
["rgB(0, 0, 0)", [0, 0, 0, 1], "Capitalization should not affect parsing"],
["rgB(0, 51, 255)", [0, 51, 255, 1], "Capitalization should not affect parsing"],
["rgb(0,51,255)", [0, 51, 255, 1], "Lack of whitespace should not affect parsing"],
["rgb(0\t, 51 ,255)", [0, 51, 255, 1], "Whitespace should not affect parsing"],
["rgb(/* R */0, /* G */51, /* B */255)", [0, 51, 255, 1], "Comments should be allowed within function"],
["rgb(-51, 306, 0)", [0, 255, 0, 1], "Invalid values should be clamped to 0 and 255 respectively"],
["rgb(42%, 3%, 50%)", [107, 8, 128, 1], "Valid percentages should be parsed"],
["RGB(100%, 100%, 100%)", [255, 255, 255, 1], "Capitalization should not affect parsing"],
["rgB(0%, 0%, 0%)", [0, 0, 0, 1], "Capitalization should not affect parsing"],
["rgB(10%, 20%, 30%)", [26, 51, 77, 1], "Capitalization should not affect parsing"],
["rgb(10%,20%,30%)", [26, 51, 77, 1], "Whitespace should not affect parsing"],
["rgb(10%\t, 20% ,30%)", [26, 51, 77, 1], "Whitespace should not affect parsing"],
["rgb(/* R */ 10%, /* G */ 20%, /* B */ 30%)", [26, 51, 77, 1], "Comments should not affect parsing"],
["rgb(-12%, 110%, 1400%)", [0, 255, 255, 1], "Invalid values should be clamped to 0 and 255 respectively"],
["rgb(10%, 50%, 0)", null, "Values must be all numbers or all percentages"],
["rgb(255, 50%, 0%)", null, "Values must be all numbers or all percentages"],
["rgb(0, 0 0)", null, "Comma optional syntax requires no commas at all"],
["rgb(0, 0, 0deg)", null, "Angles are not accepted in the rgb function"],
["rgb(0, 0, light)", null, "Keywords are not accepted in the rgb function"],
["rgb()", null, "The rgb function requires 3 or 4 arguments"],
["rgb(0)", null, "The rgb function requires 3 or 4 arguments"],
["rgb(0, 0)", null, "The rgb function requires 3 or 4 arguments"],
["rgb(0%)", null, "The rgb function requires 3 or 4 arguments"],
["rgb(0%, 0%)", null, "The rgb function requires 3 or 4 arguments"],
["rgb(0, 0, 0, 0)", [0, 0, 0, 0], "RGB and RGBA are synonyms"],
["rgb(0%, 0%, 0%, 0%)", [0, 0, 0, 0], "RGB and RGBA are synonyms"],
["rgb(0%, 0%, 0%, 0)", [0, 0, 0, 0], "RGB and RGBA are synonyms"],
["rgba(0, 0, 0, 0)", [0, 0, 0, 0], "Valid numbers should be parsed"],
["rgba(204, 0, 102, 0.3)", [204, 0, 102, 0.3], "Valid numbers should be parsed"],
["RGBA(255, 255, 255, 0)", [255, 255, 255, 0], "Capitalization should not affect parsing"],
["rgBA(0, 51, 255, 1)", [0, 51, 255, 1], "Capitalization should not affect parsing"],
["rgba(0, 51, 255, 1.1)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["rgba(0, 51, 255, 37)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["rgba(0, 51, 255, 0.42)", [0, 51, 255, 0.42], "Valid numbers should be parsed"],
["rgba(0, 51, 255, 0)", [0, 51, 255, 0], "Valid numbers should be parsed"],
["rgba(0, 51, 255, -0.1)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["rgba(0, 51, 255, -139)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["RGBA(100%, 100%, 100%, 0)", [255, 255, 255, 0], "Capitalization should not affect parsing"],
["rgba(42%, 3%, 50%, 0.3)", [107, 8, 128, 0.3], "Valid percentages should be parsed"],
["rgBA(0%, 20%, 100%, 1)", [0, 51, 255, 1], "Capitalization should not affect parsing"],
["rgba(0%, 20%, 100%, 1.1)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["rgba(0%, 20%, 100%, 37)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["rgba(0%, 20%, 100%, 0.42)", [0, 51, 255, 0.42], "Valid percentages should be parsed"],
["rgba(0%, 20%, 100%, 0)", [0, 51, 255, 0], "Valid percentages should be parsed"],
["rgba(0%, 20%, 100%, -0.1)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["rgba(0%, 20%, 100%, -139)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["rgba(255, 255, 255, 0%)", [255, 255, 255, 0], "Percent alpha values are accepted in rgb/rgba"],
["rgba(0%, 0%, 0%, 0%)", [0, 0, 0, 0], "Percent alpha values are accepted in rgb/rgba"],
["rgba(0%, 0%, 0%)", [0, 0, 0, 1], "RGB and RGBA are synonyms"],
["rgba(0, 0, 0)", [0, 0, 0, 1], "RGB and RGBA are synonyms"],
["rgba(10%, 50%, 0, 1)", null, "Values must be all numbers or all percentages"],
["rgba(255, 50%, 0%, 1)", null, "Values must be all numbers or all percentages"],
["rgba(0, 0, 0 0)", null, "Comma optional syntax requires no commas at all"],
["rgba(0, 0, 0, 0deg)", null, "Angles are not accepted in the rgb function"],
["rgba(0, 0, 0, light)", null, "Keywords are not accepted in the rgb function"],
["rgba()", null, "The rgba function requires 3 or 4 arguments"],
["rgba(0)", null, "The rgba function requires 3 or 4 arguments"],
["rgba(0, 0, 0, 0, 0)", null, "The rgba function requires 3 or 4 arguments"],
["rgba(0%)", null, "The rgba function requires 3 or 4 arguments"],
["rgba(0%, 0%)", null, "The rgba function requires 3 or 4 arguments"],
["rgba(0%, 0%, 0%, 0%, 0%)", null, "The rgba function requires 3 or 4 arguments"],
// HSL tests
["HSL(0, 0%, 0%)", [0, 0, 0, 1], "Capitalization should not affect parsing"],
["hsL(0, 100%, 50%)", [255, 0, 0, 1], "Capitalization should not affect parsing"],
["hsl(60, 100%, 37.5%)", [191, 191, 0, 1], "Valid numbers should be parsed"],
["hsl(780, 100%, 37.5%)", [191, 191, 0, 1], "Angles are represented as a part of a circle and wrap around"],
["hsl(-300, 100%, 37.5%)", [191, 191, 0, 1], "Angles are represented as a part of a circle and wrap around"],
["hsl(300, 50%, 50%)", [191, 64, 191, 1], "Valid numbers should be parsed"],
["hsl(30deg, 100%, 100%)", [255, 255, 255, 1], "Angles are accepted in HSL/HSLA"],
["hsl(0, 0%, 0%, 0%)", [0, 0, 0, 0], "HSL and HSLA are synonyms"],
["hsl(10, 50%, 0)", null, "The second and third parameters of hsl/hsla must be a percent"],
["hsl(50%, 50%, 0%)", null, "The first parameter of hsl/hsla must be a number or angle"],
["hsl(0, 0% 0%)", null, "Comma optional syntax requires no commas at all"],
["hsl(0, 0%, light)", null, "Keywords are not accepted in the hsl function"],
["hsl()", null, "The hsl function requires 3 or 4 arguments"],
["hsl(0)", null, "The hsl function requires 3 or 4 arguments"],
["hsl(0, 0%)", null, "The hsl function requires 3 or 4 arguments"],
["HSLA(-300, 100%, 37.5%, 1)", [191, 191, 0, 1], "Angles are represented as a part of a circle and wrap around"],
["hsLA(-300, 100%, 37.5%, 12)", [191, 191, 0, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["hsla(-300, 100%, 37.5%, 0.2)", [191, 191, 0, 0.2], "Angles are represented as a part of a circle and wrap around"],
["hsla(-300, 100%, 37.5%, 0)", [191, 191, 0, 0], "Angles are represented as a part of a circle and wrap around"],
["hsla(-300, 100%, 37.5%, -3)", [191, 191, 0, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
["hsla(0, 0%, 0%, 50%)", [0, 0, 0, 0.5], "Percent alpha values are accepted in hsl/hsla"],
["hsla(30deg, 100%, 100%, 1)", [255, 255, 255, 1], "Angles are accepted in HSL/HSLA"],
["hsla(10, 50%, 0, 1)", null, "The second and third parameters of hsl/hsla must be a percent"],
["hsla(50%, 50%, 0%, 1)", null, "The first parameter of hsl/hsla must be a number or angle"],
["hsla(0, 0% 0%, 1)", null, "Comma optional syntax requires no commas at all"],
["hsla(0, 0%, light, 1)", null, "Keywords are not accepted in the hsla function"],
["hsla()", null, "The hsla function requires 3 or 4 arguments"],
["hsla(0)", null, "The hsla function requires 3 or 4 arguments"],
["hsla(0, 0%)", null, "The hsla function requires 3 or 4 arguments"],
["hsla(0, 0%, 0%, 1, 0%)", null, "The hsla function requires 3 or 4 arguments"]
]
for (var value in tests) {
items_to_test = tests[value];
color_test(items_to_test[0], expected_value(items_to_test[1]), items_to_test[2]);
}
</script>
