Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions css/css-color/color-function-parsing.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@
testColorFunction("Display P3 color", "color(display-p3 0.6 0.7 0.8)", "color(display-p3 0.6 0.7 0.8)");
testColorFunction("Different case for Display P3", "color(dIspLaY-P3 0.6 0.7 0.8)", "color(display-p3 0.6 0.7 0.8)");

testColorFunction("sRGB color with negative component should not clamp to 0", "color(srgb -0.25 0.5 0.75)", "color(srgb -0.25 0.5 0.75)");
testColorFunction("sRGB color with component > 1 should not clamp", "color(srgb 0.25 1.5 0.75)", "color(srgb 0.25 1.5 0.75)");
testColorFunction("Display P3 color with negative component should not clamp to 0", "color(display-p3 0.5 -199 0.75)", "color(display-p3 0.5 -199 0.75)");
testColorFunction("Display P3 color with component > 1 should not clamp", "color(display-p3 184 1.00001 2347329746587)", "color(display-p3 184 1.00001 2347329700000)");
testColorFunction("Alpha > 1 should clamp", "color(srgb 0.1 0.2 0.3 / 1.9)", "color(srgb 0.1 0.2 0.3)");
testColorFunction("Negative alpha should clamp", "color(srgb 1 1 1 / -0.2)", "color(srgb 1 1 1 / 0)");

Expand Down
82 changes: 41 additions & 41 deletions css/css-color/parsing/color-computed.html
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
test_computed_value("color", "hwb(none 100% 50% / none)", "rgba(170, 170, 170, 0)");
test_computed_value("color", "hwb(0 100% 50% / 0)", "rgba(170, 170, 170, 0)");

for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) {
for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) {
test_computed_value("color", `color(${colorSpace} 0% 0% 0%)`, `color(${colorSpace} 0 0 0)`);
test_computed_value("color", `color(${colorSpace} 10% 10% 10%)`, `color(${colorSpace} 0.1 0.1 0.1)`);
test_computed_value("color", `color(${colorSpace} .2 .2 25%)`, `color(${colorSpace} 0.2 0.2 0.25)`);
Expand Down Expand Up @@ -167,57 +167,57 @@
}

for (const colorSpace of [ "lab", "oklab" ]) {
test_computed_value("color", `${colorSpace}(0% 0 0)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / 1)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(20% 0 10/0.5)`, `${colorSpace}(20% 0 10 / 0.5)`);
test_computed_value("color", `${colorSpace}(20% 0 10/50%)`, `${colorSpace}(20% 0 10 / 0.5)`);
test_computed_value("color", `${colorSpace}(400% 0 10/50%)`, `${colorSpace}(400% 0 10 / 0.5)`);
test_computed_value("color", `${colorSpace}(50% -160 160)`, `${colorSpace}(50% -160 160)`);
test_computed_value("color", `${colorSpace}(50% -200 200)`, `${colorSpace}(50% -200 200)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / -10%)`, `${colorSpace}(0% 0 0 / 0)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / 110%)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / 300%)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(-40% 0 0)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(50% -20 0)`, `${colorSpace}(50% -20 0)`);
test_computed_value("color", `${colorSpace}(50% 0 -20)`, `${colorSpace}(50% 0 -20)`);
test_computed_value("color", `${colorSpace}(calc(50% * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))`, `${colorSpace}(150% -0.5 1.5 / 0.5)`);
test_computed_value("color", `${colorSpace}(calc(-50% * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))`, `${colorSpace}(0% 1.5 -1.5 / 0)`);
test_computed_value("color", `${colorSpace}(0 0 0)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(0 0 0 / 1)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(0 0 0 / 0.5)`, `${colorSpace}(0 0 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(20 0 10/0.5)`, `${colorSpace}(20 0 10 / 0.5)`);
test_computed_value("color", `${colorSpace}(20 0 10/50%)`, `${colorSpace}(20 0 10 / 0.5)`);
test_computed_value("color", `${colorSpace}(400 0 10/50%)`, `${colorSpace}(400 0 10 / 0.5)`);
test_computed_value("color", `${colorSpace}(50 -160 160)`, `${colorSpace}(50 -160 160)`);
test_computed_value("color", `${colorSpace}(50 -200 200)`, `${colorSpace}(50 -200 200)`);
test_computed_value("color", `${colorSpace}(0 0 0 / -10%)`, `${colorSpace}(0 0 0 / 0)`);
test_computed_value("color", `${colorSpace}(0 0 0 / 110%)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(0 0 0 / 300%)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(-40 0 0)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(50 -20 0)`, `${colorSpace}(50 -20 0)`);
test_computed_value("color", `${colorSpace}(50 0 -20)`, `${colorSpace}(50 0 -20)`);
test_computed_value("color", `${colorSpace}(calc(50 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))`, `${colorSpace}(150 -0.5 1.5 / 0.5)`);
test_computed_value("color", `${colorSpace}(calc(-50 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))`, `${colorSpace}(0 1.5 -1.5 / 0)`);

test_computed_value("color", `${colorSpace}(none none none / none)`, `${colorSpace}(none none none / none)`);
test_computed_value("color", `${colorSpace}(none none none)`, `${colorSpace}(none none none)`);
test_computed_value("color", `${colorSpace}(20% none none / none)`, `${colorSpace}(20% none none / none)`);
test_computed_value("color", `${colorSpace}(20 none none / none)`, `${colorSpace}(20 none none / none)`);
test_computed_value("color", `${colorSpace}(none none none / 0.5)`, `${colorSpace}(none none none / 0.5)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / none)`, `${colorSpace}(0% 0 0 / none)`);
test_computed_value("color", `${colorSpace}(0 0 0 / none)`, `${colorSpace}(0 0 0 / none)`);
}

for (const colorSpace of [ "lch", "oklch" ]) {
test_computed_value("color", `${colorSpace}(0% 0 0deg)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(0% 0 0deg / 1)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(0% 0 0deg / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(100% 230 0deg / 0.5)`, `${colorSpace}(100% 230 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(20% 50 20deg/0.5)`, `${colorSpace}(20% 50 20 / 0.5)`);
test_computed_value("color", `${colorSpace}(20% 50 20deg/50%)`, `${colorSpace}(20% 50 20 / 0.5)`);
test_computed_value("color", `${colorSpace}(10% 20 20deg / -10%)`, `${colorSpace}(10% 20 20 / 0)`);
test_computed_value("color", `${colorSpace}(10% 20 20deg / 110%)`, `${colorSpace}(10% 20 20)`);
test_computed_value("color", `${colorSpace}(10% 20 1.28rad)`, `${colorSpace}(10% 20 73.3386)`);
test_computed_value("color", `${colorSpace}(10% 20 380deg)`, `${colorSpace}(10% 20 20)`);
test_computed_value("color", `${colorSpace}(10% 20 -340deg)`, `${colorSpace}(10% 20 20)`);
test_computed_value("color", `${colorSpace}(10% 20 740deg)`, `${colorSpace}(10% 20 20)`);
test_computed_value("color", `${colorSpace}(10% 20 -700deg)`, `${colorSpace}(10% 20 20)`);
test_computed_value("color", `${colorSpace}(-40% 0 0)`, `${colorSpace}(0% 0 0)`);
test_computed_value("color", `${colorSpace}(20% -20 0)`, `${colorSpace}(20% 0 0)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(10% 20 20 / 110%)`, `${colorSpace}(10% 20 20)`);
test_computed_value("color", `${colorSpace}(10% 20 -700)`, `${colorSpace}(10% 20 20)`);
test_computed_value("color", `${colorSpace}(calc(50% * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))`, `${colorSpace}(150% 0 40 / 0.5)`);
test_computed_value("color", `${colorSpace}(calc(-50% * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))`, `${colorSpace}(0% 1.5 320 / 0)`);
test_computed_value("color", `${colorSpace}(0 0 0deg)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(0 0 0deg / 1)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(0 0 0deg / 0.5)`, `${colorSpace}(0 0 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(100 230 0deg / 0.5)`, `${colorSpace}(100 230 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(20 50 20deg/0.5)`, `${colorSpace}(20 50 20 / 0.5)`);
test_computed_value("color", `${colorSpace}(20 50 20deg/50%)`, `${colorSpace}(20 50 20 / 0.5)`);
test_computed_value("color", `${colorSpace}(10 20 20deg / -10%)`, `${colorSpace}(10 20 20 / 0)`);
test_computed_value("color", `${colorSpace}(10 20 20deg / 110%)`, `${colorSpace}(10 20 20)`);
test_computed_value("color", `${colorSpace}(10 20 1.28rad)`, `${colorSpace}(10 20 73.3386)`);
test_computed_value("color", `${colorSpace}(10 20 380deg)`, `${colorSpace}(10 20 20)`);
test_computed_value("color", `${colorSpace}(10 20 -340deg)`, `${colorSpace}(10 20 20)`);
test_computed_value("color", `${colorSpace}(10 20 740deg)`, `${colorSpace}(10 20 20)`);
test_computed_value("color", `${colorSpace}(10 20 -700deg)`, `${colorSpace}(10 20 20)`);
test_computed_value("color", `${colorSpace}(-40 0 0)`, `${colorSpace}(0 0 0)`);
test_computed_value("color", `${colorSpace}(20 -20 0)`, `${colorSpace}(20 0 0)`);
test_computed_value("color", `${colorSpace}(0 0 0 / 0.5)`, `${colorSpace}(0 0 0 / 0.5)`);
test_computed_value("color", `${colorSpace}(10 20 20 / 110%)`, `${colorSpace}(10 20 20)`);
test_computed_value("color", `${colorSpace}(10 20 -700)`, `${colorSpace}(10 20 20)`);
test_computed_value("color", `${colorSpace}(calc(50 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))`, `${colorSpace}(150 0 40 / 0.5)`);
test_computed_value("color", `${colorSpace}(calc(-50 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))`, `${colorSpace}(0 1.5 320 / 0)`);

test_computed_value("color", `${colorSpace}(none none none / none)`, `${colorSpace}(none none none / none)`);
test_computed_value("color", `${colorSpace}(none none none)`, `${colorSpace}(none none none)`);
test_computed_value("color", `${colorSpace}(20% none none / none)`, `${colorSpace}(20% none none / none)`);
test_computed_value("color", `${colorSpace}(20 none none / none)`, `${colorSpace}(20 none none / none)`);
test_computed_value("color", `${colorSpace}(none none none / 0.5)`, `${colorSpace}(none none none / 0.5)`);
test_computed_value("color", `${colorSpace}(0% 0 0 / none)`, `${colorSpace}(0% 0 0 / none)`);
test_computed_value("color", `${colorSpace}(0 0 0 / none)`, `${colorSpace}(0 0 0 / none)`);
}
</script>
</body>
Expand Down
7 changes: 5 additions & 2 deletions css/css-color/parsing/color-contrast-computed.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,11 @@
// Test non-sRGB colors.
test_computed_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`);
test_computed_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`);
test_computed_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(20% 50 20deg))`, `lch(20% 50 20)`);
test_computed_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(20% 50 20deg))`, `lch(20% 50 20)`);
test_computed_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))`, `lch(0.2 50 20)`);
test_computed_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))`, `lch(0.2 50 20)`);

// Test with extra whitespace
test_computed_value(`color`, `color-contrast( white vs red, blue )`, `rgb(0, 0, 255)`);
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions css/css-color/parsing/color-contrast-valid.html
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
// Test non-sRGB colors.
test_valid_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`);
test_valid_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`);
test_valid_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(20% 50 20deg))`, `lch(20% 50 20)`);
test_valid_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(20% 50 20deg))`, `lch(20% 50 20)`);
test_valid_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))`, `lch(0.2 50 20)`);
test_valid_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))`, `lch(0.2 50 20)`);

// Test with extra whitespace
test_valid_value(`color`, `color-contrast( white vs red, blue )`, `rgb(0, 0, 255)`);
Expand Down
Loading