diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-color')
6 files changed, 130 insertions, 23 deletions
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html index f0e2f6cce0..b54aa0da12 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html @@ -42,6 +42,9 @@ fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / 0), hsl(30deg 30% 40%))`, `color(srgb 0.46 0.52 0.28 / 0.5)`); fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / 0) 10%, hsl(30deg 30% 40%))`, `color(srgb 0.52 0.436 0.28 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in hsl, white, blue)`, `color(srgb 0.62 0.62 0.87)`); + fuzzy_test_computed_color(`color-mix(in hsl, white 10%, blue)`, `color(srgb 0.15 0.15 0.96)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); fuzzy_test_computed_color(`color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); fuzzy_test_computed_color(`color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color(srgb 0.75 0.333333 0.25)`); @@ -125,6 +128,9 @@ fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / 0), hwb(30deg 30% 40%))`, `color(srgb 0.525 0.6 0.3 / 0.5)`); fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / 0) 10%, hwb(30deg 30% 40%))`, `color(srgb 0.6 0.495 0.3 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in hwb, white, blue)`, `color(srgb 0.5 0.5 1)`); + fuzzy_test_computed_color(`color-mix(in hwb, white 10%, blue)`, `color(srgb 0.1 0.1 1)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); fuzzy_test_computed_color(`color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); fuzzy_test_computed_color(`color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color(srgb 0.6 0.35 0.3)`); @@ -203,6 +209,9 @@ fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 120deg / 0), lch(0.3 0.4 30deg))`, `lch(0.3 0.4 75 / 0.5)`); fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 120deg / 0) 10%, lch(0.3 0.4 30deg))`, `lch(0.3 0.4 39 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in lch, white, blue)`, `lch(64.78 65.6 301.37)`, 0.1); + fuzzy_test_computed_color(`color-mix(in lch, white 10%, blue)`, `lch(36.61 118.09 301.37)`, 0.1); + fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))`, `lch(100 0 50)`); fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 60deg), lch(100 0 40deg))`, `lch(100 0 50)`); fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 50deg), lch(100 0 330deg))`, `lch(100 0 10)`); @@ -283,6 +292,9 @@ fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 20 120deg / 0), oklch(0.3 40 30deg))`, `oklch(0.3 40 75 / 0.5)`); fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 20 120deg / 0) 10%, oklch(0.3 40 30deg))`, `oklch(0.3 40 39 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in oklch, white, blue)`, `oklch(0.726 0.156 264.052)`); + fuzzy_test_computed_color(`color-mix(in oklch, white 10%, blue)`, `oklch(0.506 0.281 264.052)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 40deg), oklch(1 0 60deg))`, `oklch(1 0 50)`); fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 60deg), oklch(1 0 40deg))`, `oklch(1 0 50)`); fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 50deg), oklch(1 0 330deg))`, `oklch(1 0 10)`); @@ -363,6 +375,9 @@ fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 0), lab(30 40 50))`, 'lab(30 40 50 / 0.5)'); fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 0) 10%, lab(30 40 50))`, 'lab(30 40 50 / 0.9)'); + fuzzy_test_computed_color(`color-mix(in lab, white, blue)`, `lab(64.78 34.15 -56.02)`, 0.1); + fuzzy_test_computed_color(`color-mix(in lab, white 10%, blue)`, `lab(36.61 61.45 -100.82)`, 0.1); + fuzzy_test_computed_color(`color-mix(in lab, lab(none none none), lab(none none none))`, `lab(none none none)`); fuzzy_test_computed_color(`color-mix(in lab, lab(none none none), lab(50 60 70))`, `lab(50 60 70)`); fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30), lab(none none none))`, `lab(10 20 30)`); @@ -406,6 +421,9 @@ fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 0), oklab(0.3 0.4 0.5))`, 'oklab(0.3 0.4 0.5 / 0.5)'); fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 0) 10%, oklab(0.3 0.4 0.5))`, 'oklab(0.3 0.4 0.5 / 0.9)'); + fuzzy_test_computed_color(`color-mix(in oklab, white, blue)`, `oklab(0.73 -0.02 -0.16)`); + fuzzy_test_computed_color(`color-mix(in oklab, white 10%, blue)`, `oklab(0.51 -0.03 -0.28)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(none none none), oklab(none none none))`, `oklab(none none none)`); fuzzy_test_computed_color(`color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `oklab(0.5 0.6 0.7)`); fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `oklab(0.1 0.2 0.3)`); @@ -451,6 +469,9 @@ fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 0.1 0.2 0.3 / 0), color(${colorSpace} 0.3 0.4 0.5))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.5)`); fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 0.1 0.2 0.3 / 0) 10%, color(${colorSpace} 0.3 0.4 0.5))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 1 1 1), color(${colorSpace} 0 0 1))`, `color(${resultColorSpace} 0.5 0.5 1)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 1 1 1) 10%, color(${colorSpace} 0 0 1))`, `color(${resultColorSpace} 0.1 0.1 1)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 2 3 4 / 5), color(${colorSpace} 4 6 8 / 10))`, `color(${resultColorSpace} 3 4.5 6)`); fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4), color(${colorSpace} -4 -6 -8))`, `color(${resultColorSpace} -3 -4.5 -6)`); fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4 / -5), color(${colorSpace} -4 -6 -8 / -10))`, `color(${resultColorSpace} 0 0 0 / 0)`); diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html index aa2e48723e..95c8eee226 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html @@ -104,6 +104,7 @@ fuzzy_test_computed_color(`rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`); fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) calc(r) calc(g) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); fuzzy_test_computed_color(`rgb(from rgb(100 110 120 / 0.8) calc(r + 1) calc(g + 1) calc(b + 1) / calc(alpha + 0.01))`, `color(srgb 0.396 0.435 0.474 / 0.81)`); // rgb(101 111 121) + fuzzy_test_computed_color(`rgb(from rebeccapurple calc((r / 255) * 100%) calc((g / 255) * 100%) calc((b / 255) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`); // Testing with 'none'. Missing components are resolved to zero during color space conversion. // https://drafts.csswg.org/css-color-4/#missing @@ -119,6 +120,8 @@ fuzzy_test_computed_color(`rgb(from rgb(20% none 60%) r g b)`, `color(srgb 0.2 0 0.6)`); fuzzy_test_computed_color(`rgb(from rgb(20% 40% 60% / none) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0)`); + // color-mix + fuzzy_test_computed_color(`rgb(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`); // hsl(from ...) @@ -174,6 +177,7 @@ fuzzy_test_computed_color(`hsl(from rebeccapurple calc(h) calc(s) calc(l))`, `color(srgb 0.4 0.2 0.6)`); fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); fuzzy_test_computed_color(`hsl(from hsl(20 30 40 / 0.8) calc(h + 1) calc(s + 1) calc(l + 1) / calc(alpha + 0.01))`, `color(srgb 0.54 0.37 0.28 / 0.81)`); // hsl(21 31 41) + fuzzy_test_computed_color(`hsl(from rebeccapurple calc((h / 360) * 360deg) calc((s / 100) * 100%) calc((l / 100) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`); // Testing with 'none'. Missing components are resolved to zero during color space conversion. // https://drafts.csswg.org/css-color-4/#missing @@ -192,6 +196,9 @@ fuzzy_test_computed_color(`hsl(from hsl(120deg 20% 50% / none) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0)`); fuzzy_test_computed_color(`hsl(from hsl(none 20% 50% / .5) h s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`); + // color-mix + fuzzy_test_computed_color(`hsl(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`); + // hwb(from ...) // Testing no modifications. @@ -245,6 +252,7 @@ fuzzy_test_computed_color(`hwb(from rebeccapurple calc(h) calc(w) calc(b))`, `color(srgb 0.4 0.2 0.6)`); fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) calc(h) calc(w) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`); fuzzy_test_computed_color(`hwb(from hwb(20 30 40 / 0.8) calc(h + 1) calc(w + 1) calc(b + 1) / calc(alpha + 0.01))`, `color(srgb 0.59 0.41 0.31 / 0.81)`); // hwb(21 31 41) + fuzzy_test_computed_color(`hwb(from rebeccapurple calc((h / 360) * 360deg) calc((w / 100) * 100%) calc((b / 100) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`); // Testing with 'none'. Missing components are resolved to zero during color space conversion. // https://drafts.csswg.org/css-color-4/#missing @@ -263,6 +271,9 @@ fuzzy_test_computed_color(`hwb(from hwb(120deg 20% 50% / none) h w b / alpha)`, `color(srgb 0.2 0.5 0.2 / 0)`); fuzzy_test_computed_color(`hwb(from hwb(none 20% 50% / .5) h w b / alpha)`, `color(srgb 0.5 0.2 0.2 / 0.5)`); + // color-mix + fuzzy_test_computed_color(`hwb(from color-mix(in srgb, red, red) h w b / alpha)`, `color(srgb 1 0 0)`); + // lab() // Testing no modifications. @@ -312,6 +323,7 @@ fuzzy_test_computed_color(`lab(from lab(25 20 50) calc(l) calc(a) calc(b))`, `lab(25 20 50)`); fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `lab(25 20 50 / 0.4)`); fuzzy_test_computed_color(`lab(from lab(50 5 10 / 0.8) calc(l + 1) calc(a + 1) calc(b + 1) / calc(alpha + 0.01))`, `lab(51 6 11 / 0.81)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) calc((l / 100) * 100%) calc((a / 125) * 100%) calc((b / 125) * 100%) / calc(alpha * 100%))`, `lab(25 20 50)`); // Testing with 'none'. fuzzy_test_computed_color(`lab(from lab(25 20 50) none none none)`, `lab(none none none)`); @@ -327,6 +339,9 @@ fuzzy_test_computed_color(`lab(from lab(25 none 50) l a b)`, `lab(25 0 50)`); fuzzy_test_computed_color(`lab(from lab(25 20 50 / none) l a b / alpha)`, `lab(25 20 50 / 0)`); + // color-mix + fuzzy_test_computed_color(`lab(from color-mix(in lab, lab(25 20 50), lab(25 20 50)) l a b / alpha)`, `lab(25 20 50)`); + // oklab() // Testing no modifications. @@ -376,6 +391,7 @@ fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) calc(l) calc(a) calc(b))`, `oklab(0.25 0.2 0.5)`); fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `oklab(0.25 0.2 0.5 / 0.4)`); fuzzy_test_computed_color(`oklab(from oklab(0.5 .05 0.1 / 0.8) calc(l + 0.01) calc(a + 0.01) calc(b + 0.01) / calc(alpha + 0.01))`, `oklab(0.51 .06 0.11 / 0.81)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) calc(l * 100%) calc((a / 0.4) * 100%) calc((b / 0.4) * 100%) / calc(alpha * 100%))`, `oklab(0.25 0.2 0.5)`); // Testing with 'none'. fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) none none none)`, `oklab(none none none)`); @@ -391,6 +407,9 @@ fuzzy_test_computed_color(`oklab(from oklab(0.25 none 0.5) l a b)`, `oklab(0.25 0 0.5)`); fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / none) l a b / alpha)`, `oklab(0.25 0.2 0.5 / 0)`); + // color-mix + fuzzy_test_computed_color(`oklab(from color-mix(in oklab, oklab(0.25 0.2 0.5), oklab(0.25 0.2 0.5)) l a b / alpha)`, `oklab(0.25 0.2 0.5)`); + // lch() // Testing no modifications. @@ -448,6 +467,7 @@ fuzzy_test_computed_color(`lch(from lch(0.7 45 30) calc(l) calc(c) calc(h))`, `lch(0.7 45 30)`); fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `lch(0.7 45 30 / 0.4)`); fuzzy_test_computed_color(`lch(from lch(50 5 10 / 0.8) calc(l + 1) calc(c + 1) calc(h + 1) / calc(alpha + 0.01))`, `lch(51 6 11 / 0.81)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) calc((l / 100) * 100%) calc((c / 150) * 100%) calc((h / 360) * 360deg) / calc(alpha * 100%))`, `lch(0.7 45 30)`); // Testing with 'none'. fuzzy_test_computed_color(`lch(from lch(0.7 45 30) none none none)`, `lch(none none none)`); @@ -463,6 +483,9 @@ fuzzy_test_computed_color(`lch(from lch(0.7 none 30) l c h)`, `lch(0.7 0 30)`); fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / none) l c h / alpha)`, `lch(0.7 45 30 / 0)`); + // color-mix + fuzzy_test_computed_color(`lch(from color-mix(in lch, lch(70 45 30), lch(70 45 30)) l c h / alpha)`, `lch(70 45 30)`); + // oklch() // Testing no modifications. @@ -521,6 +544,7 @@ fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) calc(l) calc(c) calc(h))`, `oklch(0.7 0.45 30)`); fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `oklch(0.7 0.45 30 / 0.4)`); fuzzy_test_computed_color(`oklch(from oklch(0.5 .05 0.1 / 0.8) calc(l + 0.01) calc(c + 0.01) calc(h + 0.01) / calc(alpha + 0.01))`, `oklch(0.51 .06 0.11 / 0.81)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) calc(l * 100%) calc((c / 0.4) * 100%) calc((h / 360) * 360deg) / calc(alpha * 100%))`, `oklch(0.7 0.45 30)`); // Testing with 'none'. fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) none none none)`, `oklch(none none none)`); @@ -536,6 +560,9 @@ fuzzy_test_computed_color(`oklch(from oklch(0.7 none 30) l c h)`, `oklch(0.7 0 30)`); fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / none) l c h / alpha)`, `oklch(0.7 0.45 30 / 0)`); + // color-mix + fuzzy_test_computed_color(`oklch(from color-mix(in oklch, oklch(0.7 0.45 30), oklch(0.7 0.45 30)) l c h / alpha)`, `oklch(0.7 0.45 30)`); + for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) { // Testing no modifications. fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0.5 0.3)`); @@ -608,6 +635,7 @@ fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r) calc(g) calc(b))`, `color(${colorSpace} 0.7 0.5 0.3)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} calc(r) calc(g) calc(b) / calc(alpha))`, `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 0.8) ${colorSpace} calc(r + 0.01) calc(g + 0.01) calc(b + 0.01) / calc(alpha + 0.01))`, `color(${colorSpace} 0.71 0.51 0.31 / 0.81)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r * 100%) calc(g * 100%) calc(b * 100%) / calc(alpha * 100%))`, `color(${colorSpace} 0.7 0.5 0.3)`); // Testing with 'none'. fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} none none none)`, `color(${colorSpace} none none none)`); @@ -622,6 +650,9 @@ fuzzy_test_computed_color(`color(from color(${colorSpace} none none none / none) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0 0 0 / 0)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 none 0.3) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0 0.3)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / none) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3 / 0)`); + + // color-mix + fuzzy_test_computed_color(`color(from color-mix(in xyz, color(${colorSpace} 0.7 0.5 0.3), color(${colorSpace} 0.7 0.5 0.3)) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3)`); } for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { @@ -669,6 +700,7 @@ fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x) calc(y) calc(z))`, `color(${resultColorSpace} 7 -20.5 100)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} calc(x) calc(y) calc(z) / calc(alpha))`, `color(${resultColorSpace} 7 -20.5 100 / 0.4)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 0.8) ${colorSpace} calc(x + 1) calc(y + 1) calc(z + 1) / calc(alpha + 0.01))`, `color(${resultColorSpace} 8 -19.5 101 / 0.81)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x * 100%) calc(y * 100%) calc(z * 100%) / calc(alpha * 100%))`, `color(${resultColorSpace} 7 -20.5 100)`); // Testing with 'none'. fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} none none none)`, `color(${resultColorSpace} none none none)`); @@ -683,6 +715,9 @@ fuzzy_test_computed_color(`color(from color(${colorSpace} none none none / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 0 0 0 / 0)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 7 none 100) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 0 100)`); fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`); + + // color-mix + fuzzy_test_computed_color(`color(from color-mix(in xyz, color(${colorSpace} 0.7 0.5 0.3), color(${colorSpace} 0.7 0.5 0.3)) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 0.7 0.5 0.3)`); } // Test origin colors with different color spaces, going both to and from srgb. diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-hsl.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-hsl.html index 7ab1274176..b3a9d7944e 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-valid-hsl.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-hsl.html @@ -46,6 +46,12 @@ test_valid_value("color", "hsl(120 30 none)", "rgb(0, 0, 0)"); test_valid_value("color", "hsl(120 30 none / 0.5)", "rgba(0, 0, 0, 0.5)"); test_valid_value("color", "hsl(120 30 50 / none)", "rgba(89, 166, 89, 0)"); +// Test parse-time clamp of negative saturation to zero +test_valid_value("color", "hsl(0 -50% 40%)", "rgb(102, 102, 102)"); +test_valid_value("color", "hsl(30 -50% 60)", "rgb(153, 153, 153)"); +test_valid_value("color", "hsl(0 -50 40%)", "rgb(102, 102, 102)"); +test_valid_value("color", "hsl(30 -50 60)", "rgb(153, 153, 153)"); + // Test non-finite values. calc(infinity) goes to upper bound while calc(-infinity) and NaN go to the lower bound. // See: https://github.com/w3c/csswg-drafts/issues/8629 test_valid_value("color", "hsl(calc(infinity) 100% 50%)", "rgb(255, 0, 0)"); // hsl(360 100% 50%) diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html index 543c2486c0..5f83f0f074 100644 --- a/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html @@ -120,6 +120,9 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`rgb(from currentColor r g b)`, `rgb(from currentColor r g b)`); + // color-mix + fuzzy_test_valid_color(`rgb(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`); + // hsl(from ...) // Testing no modifications. @@ -198,6 +201,9 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`hsl(from currentColor h s l)`, `hsl(from currentColor h s l)`); + // color-mix + fuzzy_test_valid_color(`hsl(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`); + // hwb(from ...) // Testing no modifications. @@ -271,6 +277,9 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`hwb(from currentColor h w b)`, `hwb(from currentColor h w b)`); + // color-mix + fuzzy_test_valid_color(`hwb(from color-mix(in srgb, red, red) h w b / alpha)`, `color(srgb 1 0 0)`); + // lab() // Testing no modifications. @@ -339,6 +348,9 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`lab(from currentColor l a b)`, `lab(from currentColor l a b)`); + // color-mix + fuzzy_test_valid_color(`lab(from color-mix(in lab, lab(25 20 50), lab(25 20 50)) l a b / alpha)`, `lab(25 20 50)`); + // oklab() // Testing no modifications. @@ -407,6 +419,9 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`oklab(from currentColor l a b)`, `oklab(from currentColor l a b)`); + // color-mix + fuzzy_test_valid_color(`oklab(from color-mix(in oklab, oklab(0.25 0.2 0.5), oklab(0.25 0.2 0.5)) l a b / alpha)`, `oklab(0.25 0.2 0.5)`); + // lch() // Testing no modifications. @@ -484,6 +499,9 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`lch(from currentColor) l c h)`, `lch(from currentColor) l c h)`); + // color-mix + fuzzy_test_valid_color(`lch(from color-mix(in lch, lch(70 45 30), lch(70 45 30)) l c h / alpha)`, `lch(70 45 30)`); + // oklch() // Testing no modifications. @@ -559,6 +577,9 @@ fuzzy_test_valid_color(`oklch(from oklch(0.7 none 30) l c h)`, `oklch(0.7 0 30)`); fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / none) l c h / alpha)`, `oklch(0.7 0.45 30 / 0)`); + // color-mix + fuzzy_test_valid_color(`oklch(from color-mix(in oklch, oklch(0.7 0.45 30), oklch(0.7 0.45 30)) l c h / alpha)`, `oklch(0.7 0.45 30)`); + // Testing with 'currentColor' fuzzy_test_valid_color(`oklch(from currentColor l c h)`, `oklch(from currentColor l c h)`); @@ -651,6 +672,8 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`color(from currentColor ${colorSpace} r g b)`, `color(from currentColor ${colorSpace} r g b)`); + // color-mix + fuzzy_test_valid_color(`color(from color-mix(in xyz, color(${colorSpace} 0.7 0.5 0.3), color(${colorSpace} 0.7 0.5 0.3)) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3)`); } for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { @@ -714,6 +737,9 @@ // Testing with 'currentColor' fuzzy_test_valid_color(`color(from currentColor ${colorSpace} x y z)`, `color(from currentColor ${colorSpace} x y z)`); + + // color-mix + fuzzy_test_valid_color(`color(from color-mix(in xyz, color(${colorSpace} 0.7 0.5 0.3), color(${colorSpace} 0.7 0.5 0.3)) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 0.7 0.5 0.3)`); } // Spec Examples: https://www.w3.org/TR/css-color-5/#relative-colors diff --git a/testing/web-platform/tests/css/css-color/system-color-consistency.html b/testing/web-platform/tests/css/css-color/system-color-consistency.html index 4eb9d81100..0d23d84ad2 100644 --- a/testing/web-platform/tests/css/css-color/system-color-consistency.html +++ b/testing/web-platform/tests/css/css-color/system-color-consistency.html @@ -29,31 +29,42 @@ <textarea name="text area"></textarea> </div> <mark id="mark">Marked text</mark> + <!-- Link --> + <a href="#" id="link">Link</a> </div> + <script> - // Buttons - for (let element of document.getElementById("buttons").children) { - style = document.defaultView.getComputedStyle(element); - test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), 'resolves to the same color as the border-color of a ' + element.name); - test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name); - test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name); - } - - // CanvasText - style = document.defaultView.getComputedStyle(document.getElementsByTagName('html')[0]); - test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), 'has the same color as the color of the html element'); - - // Field and FieldText - for (let element of document.getElementById("fields").children) { - style = document.defaultView.getComputedStyle(element); - test_computed_value('color', 'Field', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name); - test_computed_value('color', 'FieldText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name); - } - - // Mark and MarkText - style = document.defaultView.getComputedStyle(document.getElementById('mark')); - test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), 'has the same color as the background-color of a mark element'); - test_computed_value('color', 'MarkText', style.getPropertyValue('color'), 'has the same color as the color of a mark element'); + ['light', 'dark'].forEach(colorScheme => { + document.documentElement.style.colorScheme = colorScheme; + + // Buttons + for (let element of document.getElementById("buttons").children) { + style = document.defaultView.getComputedStyle(element); + test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), `resolves to the same color as the border-color of a ${element.name} (${colorScheme})`); + test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`); + test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`); + } + + // CanvasText + style = document.defaultView.getComputedStyle(document.getElementsByTagName('html')[0]); + test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), `has the same color as the color of the html element (${colorScheme})`); + + // Field and FieldText + for (let element of document.getElementById("fields").children) { + style = document.defaultView.getComputedStyle(element); + test_computed_value('color', 'Field', style.getPropertyValue('background-color'), `resolves to the same color as the background-color of a ${element.name} (${colorScheme})`); + test_computed_value('color', 'FieldText', style.getPropertyValue('color'), `resolves to the same color as text on a ${element.name} (${colorScheme})`); + } + + // Mark and MarkText + style = document.defaultView.getComputedStyle(document.getElementById('mark')); + test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), `has the same color as the background-color of a mark element (${colorScheme})`); + test_computed_value('color', 'MarkText', style.getPropertyValue('color'), `has the same color as the color of a mark element (${colorScheme})`); + + // LinkText + style = document.defaultView.getComputedStyle(document.getElementById('link')); + test_computed_value('color', 'LinkText', style.getPropertyValue('color'), `has the same color as the color of an anchor element (${colorScheme})`); + }); </script> </body> diff --git a/testing/web-platform/tests/css/css-color/system-color-support.html b/testing/web-platform/tests/css/css-color/system-color-support.html index 2392739a00..8c278f5119 100644 --- a/testing/web-platform/tests/css/css-color/system-color-support.html +++ b/testing/web-platform/tests/css/css-color/system-color-support.html @@ -57,6 +57,14 @@ 'CanvasText', 'AppWorkspace', 'Scrollbar', + 'ButtonFace', + 'ButtonText', + 'LinkText', + 'VisitedText', + 'Highlight', + 'SelectedItem', + 'Field', + 'FieldText', ]; for (let systemColor of SYSTEM_COLORS) { |