From b08ecc0cd1d2ac66a7c8315f9085b5b2116c02b3 Mon Sep 17 00:00:00 2001 From: Tim Ledbetter Date: Wed, 15 Oct 2025 17:05:30 +0100 Subject: [PATCH 1/3] Tests: Update WPT color parsing tests --- .../parsing/color-computed-color-function.txt | 51 ++++++++- .../color-invalid-color-mix-function.txt | 31 +++--- .../parsing/color-valid-color-function.txt | 37 ++++++- .../color-valid-color-mix-function.txt | 103 +++++++++++++----- .../css/css-color/parsing/color-valid.txt | 7 +- .../color-computed-color-function.html | 22 +++- .../color-invalid-color-mix-function.html | 7 +- .../parsing/color-valid-color-function.html | 2 +- .../color-valid-color-mix-function.html | 69 +++++++----- .../css/css-color/parsing/color-valid.html | 1 + 10 files changed, 241 insertions(+), 89 deletions(-) diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt index afb6bd2300e..9a6d09ef75f 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt @@ -1,9 +1,9 @@ Harness status: OK -Found 421 tests +Found 468 tests 401 Pass -20 Fail +67 Fail Pass Property color value 'color(srgb 0% 0% 0%)' Pass Property color value 'color(srgb 10% 10% 10%)' Pass Property color value 'color(srgb .2 .2 25%)' @@ -190,6 +190,37 @@ Pass Property color value 'color(display-p3 calc(NaN) 0 0)' Pass Property color value 'color(display-p3 calc(0 / 0) 0 0)' Fail Property color value 'color(display-p3 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)' Fail Property color value 'color(display-p3 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))' +Fail Property color value 'color(display-p3-linear 0% 0% 0%)' +Fail Property color value 'color(display-p3-linear 10% 10% 10%)' +Fail Property color value 'color(display-p3-linear .2 .2 25%)' +Fail Property color value 'color(display-p3-linear 0 0 0 / 1)' +Fail Property color value 'color(display-p3-linear 0% 0 0 / 0.5)' +Fail Property color value 'color(display-p3-linear 20% 0 10/0.5)' +Fail Property color value 'color(display-p3-linear 20% 0 10/50%)' +Fail Property color value 'color(display-p3-linear 400% 0 10/50%)' +Fail Property color value 'color(display-p3-linear 50% -160 160)' +Fail Property color value 'color(display-p3-linear 50% -200 200)' +Fail Property color value 'color(display-p3-linear 0 0 0 / -10%)' +Fail Property color value 'color(display-p3-linear 0 0 0 / 110%)' +Fail Property color value 'color(display-p3-linear 0 0 0 / 300%)' +Fail Property color value 'color(display-p3-linear 200 200 200)' +Fail Property color value 'color(display-p3-linear 200 200 200 / 200)' +Fail Property color value 'color(display-p3-linear -200 -200 -200)' +Fail Property color value 'color(display-p3-linear -200 -200 -200 / -200)' +Fail Property color value 'color(display-p3-linear 200% 200% 200%)' +Fail Property color value 'color(display-p3-linear 200% 200% 200% / 200%)' +Fail Property color value 'color(display-p3-linear -200% -200% -200% / -200%)' +Fail Property color value 'color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))' +Fail Property color value 'color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))' +Fail Property color value 'color(display-p3-linear none none none / none)' +Fail Property color value 'color(display-p3-linear none none none)' +Fail Property color value 'color(display-p3-linear 10% none none / none)' +Fail Property color value 'color(display-p3-linear none none none / 0.5)' +Fail Property color value 'color(display-p3-linear 0 0 0 / none)' +Fail Property color value 'color(display-p3-linear calc(NaN) 0 0)' +Fail Property color value 'color(display-p3-linear calc(0 / 0) 0 0)' +Fail Property color value 'color(display-p3-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)' +Fail Property color value 'color(display-p3-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))' Pass Property color value 'color(xyz 0 0 0)' Pass Property color value 'color(xyz 0 0 0 / 1)' Pass Property color value 'color(xyz 1 1 1)' @@ -310,6 +341,22 @@ Pass Property color value 'color(display-p3 none none none / none)' [Display P3 Pass Property color value 'color(display-p3 1.00 none 0.2 / none)' [Display P3 with alpha, number and none] Pass Property color value 'color(display-p3 100% none 20% / 30%)' [Display P3 with alpha, percent and none] Pass Property color value 'color(display-p3 100% none 0.2 / 23.7%)' [Display P3 with alpha, number, percent and none] +Fail Property color value 'color(display-p3-linear 1.00 0.50 0.200)' [Display P3 Linear all numbers] +Fail Property color value 'color(display-p3-linear 100% 50% 20%)' [Display P3 Linear all percent] +Fail Property color value 'color(display-p3-linear 100% 0.5 20%)' [Display P3 Linear mixed number and percent] +Fail Property color value 'color(display-p3-linear 1.00 50% 0.2)' [Display P3 Linear mixed number and percent 2] +Fail Property color value 'color(display-p3-linear none none none)' [Display P3 Linear all none] +Fail Property color value 'color(display-p3-linear 1.00 none 0.2)' [Display P3 Linear number and none] +Fail Property color value 'color(display-p3-linear 100% none 20%)' [Display P3 Linear percent and none] +Fail Property color value 'color(display-p3-linear 100% none 0.2)' [Display P3 Linear number, percent and none] +Fail Property color value 'color(display-p3-linear 1.00 0.50 0.200 / 0.6)' [Display P3 Linear with alpha, all numbers] +Fail Property color value 'color(display-p3-linear 100% 50% 20% / 60%)' [Display P3 Linear with alpha, all percent] +Fail Property color value 'color(display-p3-linear 100% 0.5 20% / 0.6)' [Display P3 Linear with alpha, mixed number and percent] +Fail Property color value 'color(display-p3-linear 1.00 50% 0.2 / 60%)' [Display P3 Linear with alpha, mixed number and percent 2] +Fail Property color value 'color(display-p3-linear none none none / none)' [Display P3 Linear with alpha, all none] +Fail Property color value 'color(display-p3-linear 1.00 none 0.2 / none)' [Display P3 Linear with alpha, number and none] +Fail Property color value 'color(display-p3-linear 100% none 20% / 30%)' [Display P3 Linear with alpha, percent and none] +Fail Property color value 'color(display-p3-linear 100% none 0.2 / 23.7%)' [Display P3 Linear with alpha, number, percent and none] Pass Property color value 'color(a98-rgb 1.00 0.50 0.200)' [A98 RGB all numbers] Pass Property color value 'color(a98-rgb 100% 50% 20%)' [A98 RGB all percent] Pass Property color value 'color(a98-rgb 100% 0.5 20%)' [A98 RGB mixed number and percent] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-invalid-color-mix-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-invalid-color-mix-function.txt index 57cb17a6c87..d714053aa96 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-invalid-color-mix-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-invalid-color-mix-function.txt @@ -1,8 +1,8 @@ Harness status: OK -Found 174 tests +Found 169 tests -174 Pass +169 Pass Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 150%, hsl(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%) 0%)" should not set the property value @@ -15,7 +15,6 @@ Pass e.style['color'] = "color-mix(in hsl foo, hsl(120deg 10% 20%), hsl(30deg 30 Pass e.style['color'] = "color-mix(in hsl hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 10% 20%) hsl(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%), in hsl)" should not set the property value -Pass e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%) 0%)" should not set the property value @@ -28,7 +27,6 @@ Pass e.style['color'] = "color-mix(in hwb foo, hwb(120deg 10% 20%), hwb(30deg 30 Pass e.style['color'] = "color-mix(in hwb hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in hwb, hwb(120deg 10% 20%) hwb(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%), in hwb)" should not set the property value -Pass e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should not set the property value Pass e.style['color'] = "color-mix(in srgb, red, blue blue)" should not set the property value Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) -10%, lch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) 150%, lch(50% 60 70deg))" should not set the property value @@ -42,7 +40,6 @@ Pass e.style['color'] = "color-mix(in lch foo, lch(10% 20 30deg), lch(50% 60 70d Pass e.style['color'] = "color-mix(in lch lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(in lch, lch(10% 20 30deg) lch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(lch(10% 20 30deg), lch(50% 60 70deg), in lch)" should not set the property value -Pass e.style['color'] = "color-mix(lch(10% 20 30deg), lch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) -10%, oklch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) 150%, oklch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) 0%, oklch(50% 60 70deg) 0%)" should not set the property value @@ -55,7 +52,6 @@ Pass e.style['color'] = "color-mix(in oklch foo, oklch(10% 20 30deg), oklch(50% Pass e.style['color'] = "color-mix(in oklch oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(10% 20 30deg) oklch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(oklch(10% 20 30deg), oklch(50% 60 70deg), in oklch)" should not set the property value -Pass e.style['color'] = "color-mix(oklch(10% 20 30deg), oklch(50% 60 70deg))" should not set the property value Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) -10%, lab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) 150%, lab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) 0%, lab(50% 60 70) 0%)" should not set the property value @@ -66,7 +62,6 @@ Pass e.style['color'] = "color-mix(in lab longer hue, lab(10% 20 30), lab(50% 60 Pass e.style['color'] = "color-mix(in lab lab(10% 20 30), lab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in lab, lab(10% 20 30) lab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(lab(10% 20 30), lab(50% 60 70), in lab)" should not set the property value -Pass e.style['color'] = "color-mix(lab(10% 20 30), lab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) -10%, oklab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) 150%, oklab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) 0%, oklab(50% 60 70) 0%)" should not set the property value @@ -77,7 +72,6 @@ Pass e.style['color'] = "color-mix(in oklab longer hue, oklab(10% 20 30), oklab( Pass e.style['color'] = "color-mix(in oklab oklab(10% 20 30), oklab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in oklab, oklab(10% 20 30) oklab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(oklab(10% 20 30), oklab(50% 60 70), in oklab)" should not set the property value -Pass e.style['color'] = "color-mix(oklab(10% 20 30), oklab(50% 60 70))" should not set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) -10%, color(srgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 150%, color(srgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) 0%, color(srgb .5 .6 .7) 0%)" should not set the property value @@ -88,7 +82,6 @@ Pass e.style['color'] = "color-mix(in srgb longer hue, color(srgb .1 .2 .3), col Pass e.style['color'] = "color-mix(in srgb color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3) color(srgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7), in srgb)" should not set the property value -Pass e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) -10%, color(srgb-linear .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 150%, color(srgb-linear .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 0%, color(srgb-linear .5 .6 .7) 0%)" should not set the property value @@ -99,7 +92,6 @@ Pass e.style['color'] = "color-mix(in srgb-linear longer hue, color(srgb-linear Pass e.style['color'] = "color-mix(in srgb-linear color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) color(srgb-linear .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7), in srgb-linear)" should not set the property value -Pass e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) -10%, color(display-p3 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 150%, color(display-p3 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) 0%, color(display-p3 .5 .6 .7) 0%)" should not set the property value @@ -110,7 +102,16 @@ Pass e.style['color'] = "color-mix(in display-p3 longer hue, color(display-p3 .1 Pass e.style['color'] = "color-mix(in display-p3 color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3) color(display-p3 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7), in display-p3)" should not set the property value -Pass e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) -10%, color(display-p3-linear .5 .6 .7))" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 150%, color(display-p3-linear .5 .6 .7))" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 0%, color(display-p3-linear .5 .6 .7) 0%)" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) -10%, color(display-p3-linear .5 .6 .7 / .8))" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 150%, color(display-p3-linear .5 .6 .7 / .8))" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 0%, color(display-p3-linear .5 .6 .7 / .8) 0%)" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear longer hue, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should not set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) color(display-p3-linear .5 .6 .7))" should not set the property value +Pass e.style['color'] = "color-mix(color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7), in display-p3-linear)" should not set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) -10%, color(a98-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 150%, color(a98-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) 0%, color(a98-rgb .5 .6 .7) 0%)" should not set the property value @@ -121,7 +122,6 @@ Pass e.style['color'] = "color-mix(in a98-rgb longer hue, color(a98-rgb .1 .2 .3 Pass e.style['color'] = "color-mix(in a98-rgb color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3) color(a98-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7), in a98-rgb)" should not set the property value -Pass e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) -10%, color(prophoto-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 150%, color(prophoto-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) 0%, color(prophoto-rgb .5 .6 .7) 0%)" should not set the property value @@ -132,7 +132,6 @@ Pass e.style['color'] = "color-mix(in prophoto-rgb longer hue, color(prophoto-rg Pass e.style['color'] = "color-mix(in prophoto-rgb color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3) color(prophoto-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7), in prophoto-rgb)" should not set the property value -Pass e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) -10%, color(rec2020 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 150%, color(rec2020 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) 0%, color(rec2020 .5 .6 .7) 0%)" should not set the property value @@ -143,7 +142,6 @@ Pass e.style['color'] = "color-mix(in rec2020 longer hue, color(rec2020 .1 .2 .3 Pass e.style['color'] = "color-mix(in rec2020 color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3) color(rec2020 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7), in rec2020)" should not set the property value -Pass e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) -10%, color(xyz .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 150%, color(xyz .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) 0%, color(xyz .5 .6 .7) 0%)" should not set the property value @@ -154,7 +152,6 @@ Pass e.style['color'] = "color-mix(in xyz longer hue, color(xyz .1 .2 .3), color Pass e.style['color'] = "color-mix(in xyz color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3) color(xyz .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7), in xyz)" should not set the property value -Pass e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) -10%, color(xyz-d50 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 150%, color(xyz-d50 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 0%, color(xyz-d50 .5 .6 .7) 0%)" should not set the property value @@ -165,7 +162,6 @@ Pass e.style['color'] = "color-mix(in xyz-d50 longer hue, color(xyz-d50 .1 .2 .3 Pass e.style['color'] = "color-mix(in xyz-d50 color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) color(xyz-d50 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7), in xyz-d50)" should not set the property value -Pass e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) -10%, color(xyz-d65 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 150%, color(xyz-d65 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 0%, color(xyz-d65 .5 .6 .7) 0%)" should not set the property value @@ -175,5 +171,4 @@ Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 0%, Pass e.style['color'] = "color-mix(in xyz-d65 longer hue, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d65 color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) color(xyz-d65 .5 .6 .7))" should not set the property value -Pass e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7), in xyz-d65)" should not set the property value -Pass e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should not set the property value \ No newline at end of file +Pass e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7), in xyz-d65)" should not set the property value \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt index 8438e3b77cd..33a00161264 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt @@ -1,8 +1,9 @@ Harness status: OK -Found 306 tests +Found 340 tests 306 Pass +34 Fail Pass e.style['color'] = "color(srgb 0% 0% 0%)" should set the property value Pass e.style['color'] = "color(srgb 10% 10% 10%)" should set the property value Pass e.style['color'] = "color(srgb .2 .2 25%)" should set the property value @@ -207,6 +208,40 @@ Pass e.style['color'] = "color(display-p3 calc(NaN) 0 0)" should set the propert Pass e.style['color'] = "color(display-p3 calc(0 / 0) 0 0)" should set the property value Pass e.style['color'] = "color(display-p3 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)" should set the property value Pass e.style['color'] = "color(display-p3 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0% 0% 0%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 10% 10% 10%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear .2 .2 25%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0 0 0 / 1)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0% 0 0 / 0.5)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 20% 0 10/0.5)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 20% 0 10/50%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 400% 0 10/50%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 50% -160 160)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 50% -200 200)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0 0 0 / -10%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0 0 0 / 110%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0 0 0 / 300%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 200 200 200)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 200 200 200 / 200)" should set the property value +Fail e.style['color'] = "color(display-p3-linear -200 -200 -200)" should set the property value +Fail e.style['color'] = "color(display-p3-linear -200 -200 -200 / -200)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 200% 200% 200%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 200% 200% 200% / 200%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear -200% -200% -200% / -200%)" should set the property value +Fail e.style['color'] = "color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))" should set the property value +Fail e.style['color'] = "color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))" should set the property value +Fail e.style['color'] = "color(display-p3-linear calc(50%) 50% 0.5)" should set the property value +Fail e.style['color'] = "color(display-p3-linear none none none / none)" should set the property value +Fail e.style['color'] = "color(display-p3-linear none none none)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 10% none none / none)" should set the property value +Fail e.style['color'] = "color(display-p3-linear none none none / 0.5)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0 0 0 / none)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0 calc(infinity) 0)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0 calc(-infinity) 0)" should set the property value +Fail e.style['color'] = "color(display-p3-linear calc(NaN) 0 0)" should set the property value +Fail e.style['color'] = "color(display-p3-linear calc(0 / 0) 0 0)" should set the property value +Fail e.style['color'] = "color(display-p3-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)" should set the property value +Fail e.style['color'] = "color(display-p3-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value Pass e.style['color'] = "color(xyz 0% 0% 0%)" should set the property value Pass e.style['color'] = "color(xyz 10% 10% 10%)" should set the property value Pass e.style['color'] = "color(xyz .2 .2 25%)" should set the property value diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt index a5c3e55ccb2..445448f4bd7 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt @@ -1,8 +1,9 @@ Harness status: OK -Found 587 tests +Found 631 tests -587 Pass +560 Pass +71 Fail Pass e.style['color'] = "color-mix(in srgb, red, blue)" should set the property value Pass e.style['color'] = "color-mix(in srgb, 70% red, 50% blue)" should set the property value Pass e.style['color'] = "color-mix(in hsl, red, blue)" should set the property value @@ -73,6 +74,7 @@ Pass e.style['color'] = "color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80% Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))" should set the property value Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))" should set the property value +Fail e.style['color'] = "color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))" should set the property value Pass e.style['color'] = "color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)" should set the property value Pass e.style['color'] = "color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value Pass e.style['color'] = "color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)" should set the property value @@ -154,6 +156,7 @@ Pass e.style['color'] = "color-mix(in hwb, oklch(100 0.399 336.3) 100%, rgb(0, 0 Pass e.style['color'] = "color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value Pass e.style['color'] = "color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)" should set the property value Pass e.style['color'] = "color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)" should set the property value +Fail e.style['color'] = "color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))" should set the property value Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))" should set the property value Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))" should set the property value Pass e.style['color'] = "color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))" should set the property value @@ -211,6 +214,7 @@ Pass e.style['color'] = "color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))" should set the property value Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))" should set the property value +Fail e.style['color'] = "color-mix(lch(10 20 30), lch(50 60 70))" should set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))" should set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))" should set the property value Pass e.style['color'] = "color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))" should set the property value @@ -268,6 +272,7 @@ Pass e.style['color'] = "color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 no Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))" should set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))" should set the property value +Fail e.style['color'] = "color-mix(oklch(0.1 20 30), oklch(0.5 60 70))" should set the property value Pass e.style['color'] = "color-mix(in lab, lab(10 20 30), lab(50 60 70))" should set the property value Pass e.style['color'] = "color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))" should set the property value Pass e.style['color'] = "color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))" should set the property value @@ -295,33 +300,35 @@ Pass e.style['color'] = "color-mix(in lab, lab(none 20 30), lab(50 none 70))" sh Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))" should set the property value Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(none none none))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))" should set the property value -Pass e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))" should set the property value +Fail e.style['color'] = "color-mix(lab(10 20 30), lab(50 60 70))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(none none none))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))" should set the property value +Fail e.style['color'] = "color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))" should set the property value +Fail e.style['color'] = "color-mix(oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))" should set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb, 50% color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3), 50% color(srgb .5 .6 .7))" should set the property value @@ -350,6 +357,7 @@ Pass e.style['color'] = "color-mix(in srgb, color(srgb none .2 .3), color(srgb . Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in srgb, color(srgb .1 .2 .3 / none), color(srgb .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(srgb .1 .2 .3), color(srgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb-linear, 50% color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), 50% color(srgb-linear .5 .6 .7))" should set the property value @@ -378,6 +386,7 @@ Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear none .2 .3) Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / none), color(srgb-linear .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in display-p3, 50% color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3), 50% color(display-p3 .5 .6 .7))" should set the property value @@ -406,6 +415,36 @@ Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 none .2 .3), Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, 50% color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), 50% color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7) 25%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7) 75%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 30%, color(display-p3-linear .5 .6 .7) 90%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 12.5%, color(display-p3-linear .5 .6 .7) 37.5%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 0%, color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .5), color(display-p3-linear .5 .6 .7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4), color(display-p3-linear .5 .6 .7 / .8) 25%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8) 75%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 30%, color(display-p3-linear .5 .6 .7 / .8) 90%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 12.5%, color(display-p3-linear .5 .6 .7 / .8) 37.5%)" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 0%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear 2 3 4 / 5), color(display-p3-linear 4 6 8 / 10))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4), color(display-p3-linear -4 -6 -8))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4 / -5), color(display-p3-linear -4 -6 -8 / -10))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear none none none))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear none none none))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 none), color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 none))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none .2 .3), color(display-p3-linear .5 none .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / 0.5))" should set the property value +Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in a98-rgb, 50% color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), 50% color(a98-rgb .5 .6 .7))" should set the property value @@ -434,6 +473,7 @@ Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb none .2 .3), color( Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3 / none), color(a98-rgb .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, 50% color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3), 50% color(prophoto-rgb .5 .6 .7))" should set the property value @@ -462,6 +502,7 @@ Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb none .2 . Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in prophoto-rgb, color(prophoto-rgb .1 .2 .3 / none), color(prophoto-rgb .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(prophoto-rgb .1 .2 .3), color(prophoto-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in rec2020, 50% color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3), 50% color(rec2020 .5 .6 .7))" should set the property value @@ -490,6 +531,7 @@ Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 none .2 .3), color( Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in rec2020, color(rec2020 .1 .2 .3 / none), color(rec2020 .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(rec2020 .1 .2 .3), color(rec2020 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz, 50% color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3), 50% color(xyz .5 .6 .7))" should set the property value @@ -518,6 +560,7 @@ Pass e.style['color'] = "color-mix(in xyz, color(xyz none .2 .3), color(xyz .5 n Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in xyz, color(xyz .1 .2 .3 / none), color(xyz .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(xyz .1 .2 .3), color(xyz .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d50, 50% color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), 50% color(xyz-d50 .5 .6 .7))" should set the property value @@ -546,6 +589,7 @@ Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 none .2 .3), color( Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / none), color(xyz-d50 .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d65, 50% color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), 50% color(xyz-d65 .5 .6 .7))" should set the property value @@ -574,6 +618,7 @@ Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 none .2 .3), color( Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / none), color(xyz-d65 .5 .6 .7 / none))" should set the property value +Fail e.style['color'] = "color-mix(color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in srgb, red 50%, blue 50%)" should set the property value Pass e.style['color'] = "color-mix(in srgb, red 10%, blue 90%)" should set the property value Pass e.style['color'] = "color-mix(in srgb, red 50%, blue 40%)" should set the property value diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid.txt index 25dac6c6a5b..ee189b97d91 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid.txt @@ -1,8 +1,8 @@ Harness status: OK -Found 16 tests +Found 17 tests -16 Pass +17 Pass Pass e.style['color'] = "currentcolor" should set the property value Pass e.style['color'] = "transparent" should set the property value Pass e.style['color'] = "red" should set the property value @@ -18,4 +18,5 @@ Pass e.style['color'] = "hsla(120, 100%, 50%, 0.25)" should set the property val Pass e.style['color'] = "rgb(-2, 3, 4)" should set the property value Pass e.style['color'] = "rgb(100, 200, 300)" should set the property value Pass e.style['color'] = "rgb(20, 10, 0, -10)" should set the property value -Pass e.style['color'] = "rgb(100%, 200%, 300%)" should set the property value \ No newline at end of file +Pass e.style['color'] = "rgb(100%, 200%, 300%)" should set the property value +Pass e.style['color'] = "light-dark(black, white)" should set the property value \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-color-function.html b/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-color-function.html index b156909c6e1..c3ff54334ff 100644 --- a/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-color-function.html +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-computed-color-function.html @@ -18,7 +18,7 @@ } diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-valid-color-function.html b/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-valid-color-function.html index 592066a78ad..eb40b2a9c3d 100644 --- a/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-valid-color-function.html +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-color/parsing/color-valid-color-function.html @@ -12,7 +12,7 @@ From e55060ef6e869bf3deb4c3387bba5b88fbd37c58 Mon Sep 17 00:00:00 2001 From: Tim Ledbetter Date: Wed, 15 Oct 2025 17:00:31 +0100 Subject: [PATCH 2/3] LibWeb: Support the `display-p3-linear` color space in color functions --- Libraries/LibGfx/Color.cpp | 15 ++- Libraries/LibGfx/Color.h | 1 + .../StyleValues/ColorFunctionStyleValue.cpp | 7 ++ .../CSS/StyleValues/ColorFunctionStyleValue.h | 2 +- .../LibWeb/CSS/StyleValues/ColorStyleValue.h | 1 + .../css-color/display-p3-linear-004-ref.html | 10 ++ .../css/css-color/display-p3-linear-001.html | 15 +++ .../css/css-color/display-p3-linear-002.html | 16 ++++ .../css/css-color/display-p3-linear-003.html | 19 ++++ .../css/css-color/display-p3-linear-004.html | 19 ++++ .../css/css-color/display-p3-linear-005.html | 20 ++++ .../css/css-color/display-p3-linear-006.html | 24 +++++ .../parsing/color-computed-color-function.txt | 94 +++++++++---------- .../parsing/color-valid-color-function.txt | 71 +++++++------- .../color-valid-color-mix-function.txt | 60 ++++++------ 15 files changed, 255 insertions(+), 119 deletions(-) create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-linear-004-ref.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-001.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-002.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-003.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-004.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-005.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-006.html diff --git a/Libraries/LibGfx/Color.cpp b/Libraries/LibGfx/Color.cpp index fb7955d68c0..f585b4a8e97 100644 --- a/Libraries/LibGfx/Color.cpp +++ b/Libraries/LibGfx/Color.cpp @@ -422,6 +422,15 @@ Color Color::from_linear_srgb(float red, float green, float blue, float alpha) clamp(lroundf(alpha * 255.f), 0, 255)); } +Color Color::from_linear_display_p3(float r, float g, float b, float alpha) +{ + float x = 0.48657095 * r + 0.26566769 * g + 0.19821729 * b; + float y = 0.22897456 * r + 0.69173852 * g + 0.07928691 * b; + float z = 0.00000000 * r + 0.04511338 * g + 1.04394437 * b; + + return from_xyz65(x, y, z, alpha); +} + // https://www.w3.org/TR/css-color-4/#predefined-a98-rgb Color Color::from_a98rgb(float r, float g, float b, float alpha) { @@ -453,11 +462,7 @@ Color Color::from_display_p3(float r, float g, float b, float alpha) auto linear_g = to_linear(g); auto linear_b = to_linear(b); - float x = 0.48657095 * linear_r + 0.26566769 * linear_g + 0.19821729 * linear_b; - float y = 0.22897456 * linear_r + 0.69173852 * linear_g + 0.07928691 * linear_b; - float z = 0.00000000 * linear_r + 0.04511338 * linear_g + 1.04394437 * linear_b; - - return from_xyz65(x, y, z, alpha); + return from_linear_display_p3(linear_r, linear_g, linear_b, alpha); } // https://www.w3.org/TR/css-color-4/#predefined-prophoto-rgb diff --git a/Libraries/LibGfx/Color.h b/Libraries/LibGfx/Color.h index 0ee8820551a..2d56c726eb3 100644 --- a/Libraries/LibGfx/Color.h +++ b/Libraries/LibGfx/Color.h @@ -212,6 +212,7 @@ public: static Color from_a98rgb(float r, float g, float b, float alpha = 1.0f); static Color from_display_p3(float r, float g, float b, float alpha = 1.0f); static Color from_lab(float L, float a, float b, float alpha = 1.0f); + static Color from_linear_display_p3(float r, float g, float b, float alpha = 1.0f); static Color from_linear_srgb(float r, float g, float b, float alpha = 1.0f); static Color from_pro_photo_rgb(float r, float g, float b, float alpha = 1.0f); static Color from_rec2020(float r, float g, float b, float alpha = 1.0f); diff --git a/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.cpp index 7671ce889b8..8ee5561e306 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.cpp +++ b/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.cpp @@ -21,6 +21,8 @@ ColorStyleValue::ColorType color_type_from_string_view(StringView color_space) return ColorStyleValue::ColorType::A98RGB; if (color_space == "display-p3"sv) return ColorStyleValue::ColorType::DisplayP3; + if (color_space == "display-p3-linear"sv) + return ColorStyleValue::ColorType::DisplayP3Linear; if (color_space == "srgb"sv) return ColorStyleValue::ColorType::sRGB; if (color_space == "srgb-linear"sv) @@ -42,6 +44,8 @@ StringView string_view_from_color_type(ColorStyleValue::ColorType color_type) return "a98-rgb"sv; if (color_type == ColorStyleValue::ColorType::DisplayP3) return "display-p3"sv; + if (color_type == ColorStyleValue::ColorType::DisplayP3Linear) + return "display-p3-linear"sv; if (color_type == ColorStyleValue::ColorType::sRGB) return "srgb"sv; if (color_type == ColorStyleValue::ColorType::sRGBLinear) @@ -171,6 +175,9 @@ Optional ColorFunctionStyleValue::to_color(ColorResolutionContext color_r if (color_type() == ColorType::DisplayP3) return Color::from_display_p3(c1, c2, c3, alpha_val); + if (color_type() == ColorType::DisplayP3Linear) + return Color::from_linear_display_p3(c1, c2, c3, alpha_val); + if (color_type() == ColorType::sRGB) { auto const to_u8 = [](float c) -> u8 { return round_to(clamp(255 * c, 0, 255)); }; return Color(to_u8(c1), to_u8(c2), to_u8(c3), to_u8(alpha_val)); diff --git a/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.h index b555881bf72..72e0515cfd0 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.h +++ b/Libraries/LibWeb/CSS/StyleValues/ColorFunctionStyleValue.h @@ -22,7 +22,7 @@ public: virtual bool is_color_function() const override { return true; } - static constexpr Array s_supported_color_space = { "a98-rgb"sv, "display-p3"sv, "srgb"sv, "srgb-linear"sv, "prophoto-rgb"sv, "rec2020"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv }; + static constexpr Array s_supported_color_space = { "a98-rgb"sv, "display-p3"sv, "display-p3-linear"sv, "srgb"sv, "srgb-linear"sv, "prophoto-rgb"sv, "rec2020"sv, "xyz"sv, "xyz-d50"sv, "xyz-d65"sv }; private: ColorFunctionStyleValue(ColorType color_type, ValueComparingNonnullRefPtr c1, ValueComparingNonnullRefPtr c2, ValueComparingNonnullRefPtr c3, ValueComparingNonnullRefPtr alpha) diff --git a/Libraries/LibWeb/CSS/StyleValues/ColorStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/ColorStyleValue.h index 9e42a6583aa..c127d5edb7b 100644 --- a/Libraries/LibWeb/CSS/StyleValues/ColorStyleValue.h +++ b/Libraries/LibWeb/CSS/StyleValues/ColorStyleValue.h @@ -31,6 +31,7 @@ public: RGB, // This is used by RGBColorStyleValue for rgb(...) and rgba(...). A98RGB, DisplayP3, + DisplayP3Linear, HSL, HWB, Lab, diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-linear-004-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-linear-004-ref.html new file mode 100644 index 00000000000..8cf6103ea01 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-color/display-p3-linear-004-ref.html @@ -0,0 +1,10 @@ + + +CSS Color 4:display-p3-linear + + +

Test passes if you see a single square, and not two rectangles of different colors.

+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-001.html new file mode 100644 index 00000000000..1ee607e96de --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-001.html @@ -0,0 +1,15 @@ + + +CSS Color 4: display-p3-linear + + + + + + +

Test passes if you see a green square, and no red.

+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-002.html new file mode 100644 index 00000000000..3682876bb7f --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-002.html @@ -0,0 +1,16 @@ + + +CSS Color 4: display-p3-linear + + + + + + + +

Test passes if you see a black square, and no red.

+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-003.html new file mode 100644 index 00000000000..58f0f8a6e23 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-003.html @@ -0,0 +1,19 @@ + + +CSS Color 4: display-p3-linear + + + + + + + +

Test passes if you see a white square, and no red.

+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-004.html new file mode 100644 index 00000000000..5337e20fbe3 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-004.html @@ -0,0 +1,19 @@ + + +CSS Color 4: display-p3-linear + + + + + + + + +

Test passes if you see a single square, and not two rectangles of different colors.

+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-005.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-005.html new file mode 100644 index 00000000000..364de468d01 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-005.html @@ -0,0 +1,20 @@ + + +CSS Color 4: display-p3-linear + + + + + + + +

Test passes if you see a yellow square, and no red.

+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-006.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-006.html new file mode 100644 index 00000000000..261b3d03af5 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-color/display-p3-linear-006.html @@ -0,0 +1,24 @@ + + +CSS Color 4: display-p3-linear and sRGB with medium chroma + + + + + + + + +

Test passes if you see a moss green square, and no red.

+
+
+
+ diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt index 9a6d09ef75f..6f01bcafaa1 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-computed-color-function.txt @@ -2,8 +2,8 @@ Harness status: OK Found 468 tests -401 Pass -67 Fail +446 Pass +22 Fail Pass Property color value 'color(srgb 0% 0% 0%)' Pass Property color value 'color(srgb 10% 10% 10%)' Pass Property color value 'color(srgb .2 .2 25%)' @@ -190,35 +190,35 @@ Pass Property color value 'color(display-p3 calc(NaN) 0 0)' Pass Property color value 'color(display-p3 calc(0 / 0) 0 0)' Fail Property color value 'color(display-p3 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)' Fail Property color value 'color(display-p3 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))' -Fail Property color value 'color(display-p3-linear 0% 0% 0%)' -Fail Property color value 'color(display-p3-linear 10% 10% 10%)' -Fail Property color value 'color(display-p3-linear .2 .2 25%)' -Fail Property color value 'color(display-p3-linear 0 0 0 / 1)' -Fail Property color value 'color(display-p3-linear 0% 0 0 / 0.5)' -Fail Property color value 'color(display-p3-linear 20% 0 10/0.5)' -Fail Property color value 'color(display-p3-linear 20% 0 10/50%)' -Fail Property color value 'color(display-p3-linear 400% 0 10/50%)' -Fail Property color value 'color(display-p3-linear 50% -160 160)' -Fail Property color value 'color(display-p3-linear 50% -200 200)' -Fail Property color value 'color(display-p3-linear 0 0 0 / -10%)' -Fail Property color value 'color(display-p3-linear 0 0 0 / 110%)' -Fail Property color value 'color(display-p3-linear 0 0 0 / 300%)' -Fail Property color value 'color(display-p3-linear 200 200 200)' -Fail Property color value 'color(display-p3-linear 200 200 200 / 200)' -Fail Property color value 'color(display-p3-linear -200 -200 -200)' -Fail Property color value 'color(display-p3-linear -200 -200 -200 / -200)' -Fail Property color value 'color(display-p3-linear 200% 200% 200%)' -Fail Property color value 'color(display-p3-linear 200% 200% 200% / 200%)' -Fail Property color value 'color(display-p3-linear -200% -200% -200% / -200%)' -Fail Property color value 'color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))' -Fail Property color value 'color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))' -Fail Property color value 'color(display-p3-linear none none none / none)' -Fail Property color value 'color(display-p3-linear none none none)' -Fail Property color value 'color(display-p3-linear 10% none none / none)' -Fail Property color value 'color(display-p3-linear none none none / 0.5)' -Fail Property color value 'color(display-p3-linear 0 0 0 / none)' -Fail Property color value 'color(display-p3-linear calc(NaN) 0 0)' -Fail Property color value 'color(display-p3-linear calc(0 / 0) 0 0)' +Pass Property color value 'color(display-p3-linear 0% 0% 0%)' +Pass Property color value 'color(display-p3-linear 10% 10% 10%)' +Pass Property color value 'color(display-p3-linear .2 .2 25%)' +Pass Property color value 'color(display-p3-linear 0 0 0 / 1)' +Pass Property color value 'color(display-p3-linear 0% 0 0 / 0.5)' +Pass Property color value 'color(display-p3-linear 20% 0 10/0.5)' +Pass Property color value 'color(display-p3-linear 20% 0 10/50%)' +Pass Property color value 'color(display-p3-linear 400% 0 10/50%)' +Pass Property color value 'color(display-p3-linear 50% -160 160)' +Pass Property color value 'color(display-p3-linear 50% -200 200)' +Pass Property color value 'color(display-p3-linear 0 0 0 / -10%)' +Pass Property color value 'color(display-p3-linear 0 0 0 / 110%)' +Pass Property color value 'color(display-p3-linear 0 0 0 / 300%)' +Pass Property color value 'color(display-p3-linear 200 200 200)' +Pass Property color value 'color(display-p3-linear 200 200 200 / 200)' +Pass Property color value 'color(display-p3-linear -200 -200 -200)' +Pass Property color value 'color(display-p3-linear -200 -200 -200 / -200)' +Pass Property color value 'color(display-p3-linear 200% 200% 200%)' +Pass Property color value 'color(display-p3-linear 200% 200% 200% / 200%)' +Pass Property color value 'color(display-p3-linear -200% -200% -200% / -200%)' +Pass Property color value 'color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))' +Pass Property color value 'color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))' +Pass Property color value 'color(display-p3-linear none none none / none)' +Pass Property color value 'color(display-p3-linear none none none)' +Pass Property color value 'color(display-p3-linear 10% none none / none)' +Pass Property color value 'color(display-p3-linear none none none / 0.5)' +Pass Property color value 'color(display-p3-linear 0 0 0 / none)' +Pass Property color value 'color(display-p3-linear calc(NaN) 0 0)' +Pass Property color value 'color(display-p3-linear calc(0 / 0) 0 0)' Fail Property color value 'color(display-p3-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)' Fail Property color value 'color(display-p3-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))' Pass Property color value 'color(xyz 0 0 0)' @@ -341,22 +341,22 @@ Pass Property color value 'color(display-p3 none none none / none)' [Display P3 Pass Property color value 'color(display-p3 1.00 none 0.2 / none)' [Display P3 with alpha, number and none] Pass Property color value 'color(display-p3 100% none 20% / 30%)' [Display P3 with alpha, percent and none] Pass Property color value 'color(display-p3 100% none 0.2 / 23.7%)' [Display P3 with alpha, number, percent and none] -Fail Property color value 'color(display-p3-linear 1.00 0.50 0.200)' [Display P3 Linear all numbers] -Fail Property color value 'color(display-p3-linear 100% 50% 20%)' [Display P3 Linear all percent] -Fail Property color value 'color(display-p3-linear 100% 0.5 20%)' [Display P3 Linear mixed number and percent] -Fail Property color value 'color(display-p3-linear 1.00 50% 0.2)' [Display P3 Linear mixed number and percent 2] -Fail Property color value 'color(display-p3-linear none none none)' [Display P3 Linear all none] -Fail Property color value 'color(display-p3-linear 1.00 none 0.2)' [Display P3 Linear number and none] -Fail Property color value 'color(display-p3-linear 100% none 20%)' [Display P3 Linear percent and none] -Fail Property color value 'color(display-p3-linear 100% none 0.2)' [Display P3 Linear number, percent and none] -Fail Property color value 'color(display-p3-linear 1.00 0.50 0.200 / 0.6)' [Display P3 Linear with alpha, all numbers] -Fail Property color value 'color(display-p3-linear 100% 50% 20% / 60%)' [Display P3 Linear with alpha, all percent] -Fail Property color value 'color(display-p3-linear 100% 0.5 20% / 0.6)' [Display P3 Linear with alpha, mixed number and percent] -Fail Property color value 'color(display-p3-linear 1.00 50% 0.2 / 60%)' [Display P3 Linear with alpha, mixed number and percent 2] -Fail Property color value 'color(display-p3-linear none none none / none)' [Display P3 Linear with alpha, all none] -Fail Property color value 'color(display-p3-linear 1.00 none 0.2 / none)' [Display P3 Linear with alpha, number and none] -Fail Property color value 'color(display-p3-linear 100% none 20% / 30%)' [Display P3 Linear with alpha, percent and none] -Fail Property color value 'color(display-p3-linear 100% none 0.2 / 23.7%)' [Display P3 Linear with alpha, number, percent and none] +Pass Property color value 'color(display-p3-linear 1.00 0.50 0.200)' [Display P3 Linear all numbers] +Pass Property color value 'color(display-p3-linear 100% 50% 20%)' [Display P3 Linear all percent] +Pass Property color value 'color(display-p3-linear 100% 0.5 20%)' [Display P3 Linear mixed number and percent] +Pass Property color value 'color(display-p3-linear 1.00 50% 0.2)' [Display P3 Linear mixed number and percent 2] +Pass Property color value 'color(display-p3-linear none none none)' [Display P3 Linear all none] +Pass Property color value 'color(display-p3-linear 1.00 none 0.2)' [Display P3 Linear number and none] +Pass Property color value 'color(display-p3-linear 100% none 20%)' [Display P3 Linear percent and none] +Pass Property color value 'color(display-p3-linear 100% none 0.2)' [Display P3 Linear number, percent and none] +Pass Property color value 'color(display-p3-linear 1.00 0.50 0.200 / 0.6)' [Display P3 Linear with alpha, all numbers] +Pass Property color value 'color(display-p3-linear 100% 50% 20% / 60%)' [Display P3 Linear with alpha, all percent] +Pass Property color value 'color(display-p3-linear 100% 0.5 20% / 0.6)' [Display P3 Linear with alpha, mixed number and percent] +Pass Property color value 'color(display-p3-linear 1.00 50% 0.2 / 60%)' [Display P3 Linear with alpha, mixed number and percent 2] +Pass Property color value 'color(display-p3-linear none none none / none)' [Display P3 Linear with alpha, all none] +Pass Property color value 'color(display-p3-linear 1.00 none 0.2 / none)' [Display P3 Linear with alpha, number and none] +Pass Property color value 'color(display-p3-linear 100% none 20% / 30%)' [Display P3 Linear with alpha, percent and none] +Pass Property color value 'color(display-p3-linear 100% none 0.2 / 23.7%)' [Display P3 Linear with alpha, number, percent and none] Pass Property color value 'color(a98-rgb 1.00 0.50 0.200)' [A98 RGB all numbers] Pass Property color value 'color(a98-rgb 100% 50% 20%)' [A98 RGB all percent] Pass Property color value 'color(a98-rgb 100% 0.5 20%)' [A98 RGB mixed number and percent] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt index 33a00161264..d52ce097609 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-function.txt @@ -2,8 +2,7 @@ Harness status: OK Found 340 tests -306 Pass -34 Fail +340 Pass Pass e.style['color'] = "color(srgb 0% 0% 0%)" should set the property value Pass e.style['color'] = "color(srgb 10% 10% 10%)" should set the property value Pass e.style['color'] = "color(srgb .2 .2 25%)" should set the property value @@ -208,40 +207,40 @@ Pass e.style['color'] = "color(display-p3 calc(NaN) 0 0)" should set the propert Pass e.style['color'] = "color(display-p3 calc(0 / 0) 0 0)" should set the property value Pass e.style['color'] = "color(display-p3 calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)" should set the property value Pass e.style['color'] = "color(display-p3 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0% 0% 0%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 10% 10% 10%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear .2 .2 25%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0 0 0 / 1)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0% 0 0 / 0.5)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 20% 0 10/0.5)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 20% 0 10/50%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 400% 0 10/50%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 50% -160 160)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 50% -200 200)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0 0 0 / -10%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0 0 0 / 110%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0 0 0 / 300%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 200 200 200)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 200 200 200 / 200)" should set the property value -Fail e.style['color'] = "color(display-p3-linear -200 -200 -200)" should set the property value -Fail e.style['color'] = "color(display-p3-linear -200 -200 -200 / -200)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 200% 200% 200%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 200% 200% 200% / 200%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear -200% -200% -200% / -200%)" should set the property value -Fail e.style['color'] = "color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))" should set the property value -Fail e.style['color'] = "color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))" should set the property value -Fail e.style['color'] = "color(display-p3-linear calc(50%) 50% 0.5)" should set the property value -Fail e.style['color'] = "color(display-p3-linear none none none / none)" should set the property value -Fail e.style['color'] = "color(display-p3-linear none none none)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 10% none none / none)" should set the property value -Fail e.style['color'] = "color(display-p3-linear none none none / 0.5)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0 0 0 / none)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0 calc(infinity) 0)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0 calc(-infinity) 0)" should set the property value -Fail e.style['color'] = "color(display-p3-linear calc(NaN) 0 0)" should set the property value -Fail e.style['color'] = "color(display-p3-linear calc(0 / 0) 0 0)" should set the property value -Fail e.style['color'] = "color(display-p3-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)" should set the property value -Fail e.style['color'] = "color(display-p3-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0% 0% 0%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 10% 10% 10%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear .2 .2 25%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0 0 0 / 1)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0% 0 0 / 0.5)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 20% 0 10/0.5)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 20% 0 10/50%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 400% 0 10/50%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 50% -160 160)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 50% -200 200)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0 0 0 / -10%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0 0 0 / 110%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0 0 0 / 300%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 200 200 200)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 200 200 200 / 200)" should set the property value +Pass e.style['color'] = "color(display-p3-linear -200 -200 -200)" should set the property value +Pass e.style['color'] = "color(display-p3-linear -200 -200 -200 / -200)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 200% 200% 200%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 200% 200% 200% / 200%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear -200% -200% -200% / -200%)" should set the property value +Pass e.style['color'] = "color(display-p3-linear calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))" should set the property value +Pass e.style['color'] = "color(display-p3-linear calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))" should set the property value +Pass e.style['color'] = "color(display-p3-linear calc(50%) 50% 0.5)" should set the property value +Pass e.style['color'] = "color(display-p3-linear none none none / none)" should set the property value +Pass e.style['color'] = "color(display-p3-linear none none none)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 10% none none / none)" should set the property value +Pass e.style['color'] = "color(display-p3-linear none none none / 0.5)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0 0 0 / none)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0 calc(infinity) 0)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0 calc(-infinity) 0)" should set the property value +Pass e.style['color'] = "color(display-p3-linear calc(NaN) 0 0)" should set the property value +Pass e.style['color'] = "color(display-p3-linear calc(0 / 0) 0 0)" should set the property value +Pass e.style['color'] = "color(display-p3-linear calc(50% + (sign(1em - 10px) * 10%)) 0 0 / 0.5)" should set the property value +Pass e.style['color'] = "color(display-p3-linear 0.5 0 0 / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value Pass e.style['color'] = "color(xyz 0% 0% 0%)" should set the property value Pass e.style['color'] = "color(xyz 10% 10% 10%)" should set the property value Pass e.style['color'] = "color(xyz .2 .2 25%)" should set the property value diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt index 445448f4bd7..7da347001a0 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-color/parsing/color-valid-color-mix-function.txt @@ -2,8 +2,8 @@ Harness status: OK Found 631 tests -560 Pass -71 Fail +588 Pass +43 Fail Pass e.style['color'] = "color-mix(in srgb, red, blue)" should set the property value Pass e.style['color'] = "color-mix(in srgb, 70% red, 50% blue)" should set the property value Pass e.style['color'] = "color-mix(in hsl, red, blue)" should set the property value @@ -416,34 +416,34 @@ Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / no Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / 0.5))" should set the property value Pass e.style['color'] = "color-mix(in display-p3, color(display-p3 .1 .2 .3 / none), color(display-p3 .5 .6 .7 / none))" should set the property value Fail e.style['color'] = "color-mix(color(display-p3 .1 .2 .3), color(display-p3 .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, 50% color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), 50% color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7) 25%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7) 75%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 30%, color(display-p3-linear .5 .6 .7) 90%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 12.5%, color(display-p3-linear .5 .6 .7) 37.5%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 0%, color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .5), color(display-p3-linear .5 .6 .7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4), color(display-p3-linear .5 .6 .7 / .8) 25%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8) 75%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 30%, color(display-p3-linear .5 .6 .7 / .8) 90%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 12.5%, color(display-p3-linear .5 .6 .7 / .8) 37.5%)" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 0%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear 2 3 4 / 5), color(display-p3-linear 4 6 8 / 10))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4), color(display-p3-linear -4 -6 -8))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4 / -5), color(display-p3-linear -4 -6 -8 / -10))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear none none none))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear none none none))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 none), color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 none))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none .2 .3), color(display-p3-linear .5 none .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / 0.5))" should set the property value -Fail e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / none))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, 50% color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), 50% color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7) 25%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 25%, color(display-p3-linear .5 .6 .7) 75%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 30%, color(display-p3-linear .5 .6 .7) 90%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 12.5%, color(display-p3-linear .5 .6 .7) 37.5%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3) 0%, color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .5), color(display-p3-linear .5 .6 .7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4), color(display-p3-linear .5 .6 .7 / .8) 25%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 25%, color(display-p3-linear .5 .6 .7 / .8) 75%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 30%, color(display-p3-linear .5 .6 .7 / .8) 90%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 12.5%, color(display-p3-linear .5 .6 .7 / .8) 37.5%)" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / .4) 0%, color(display-p3-linear .5 .6 .7 / .8))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear 2 3 4 / 5), color(display-p3-linear 4 6 8 / 10))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4), color(display-p3-linear -4 -6 -8))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear -2 -3 -4 / -5), color(display-p3-linear -4 -6 -8 / -10))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear none none none))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none none none), color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear none none none))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 none), color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 none))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear none .2 .3), color(display-p3-linear .5 none .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / 0.5))" should set the property value +Pass e.style['color'] = "color-mix(in display-p3-linear, color(display-p3-linear .1 .2 .3 / none), color(display-p3-linear .5 .6 .7 / none))" should set the property value Fail e.style['color'] = "color-mix(color(display-p3-linear .1 .2 .3), color(display-p3-linear .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in a98-rgb, color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value Pass e.style['color'] = "color-mix(in a98-rgb, 50% color(a98-rgb .1 .2 .3), color(a98-rgb .5 .6 .7))" should set the property value From 5df216218b29b9d5c78a0ad5c21de71fbb6e7595 Mon Sep 17 00:00:00 2001 From: aplefull Date: Wed, 15 Oct 2025 20:04:42 +0200 Subject: [PATCH 3/3] LibGfx: Correctly determine when to invert CMYK We should invert CMYK data only if color space is JCS_CMYK and either there is no Adobe marker, or the Adobe transform is 0. Transform 2 indicates YCCK data, which we should not invert. --- Libraries/LibGfx/ImageFormats/JPEGLoader.cpp | 5 ++- Tests/LibGfx/TestImageDecoder.cpp | 36 ++++++++++++++++++ .../jpg/cmyk-adobe-transform-0.jpg | Bin 0 -> 593 bytes .../test-inputs/jpg/cmyk-no-adobe-marker.jpg | Bin 0 -> 577 bytes .../jpg/ycck-adobe-transform-2.jpg | Bin 0 -> 597 bytes 5 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 Tests/LibGfx/test-inputs/jpg/cmyk-adobe-transform-0.jpg create mode 100644 Tests/LibGfx/test-inputs/jpg/cmyk-no-adobe-marker.jpg create mode 100644 Tests/LibGfx/test-inputs/jpg/ycck-adobe-transform-2.jpg diff --git a/Libraries/LibGfx/ImageFormats/JPEGLoader.cpp b/Libraries/LibGfx/ImageFormats/JPEGLoader.cpp index 143e9ba8444..63c07a4475b 100644 --- a/Libraries/LibGfx/ImageFormats/JPEGLoader.cpp +++ b/Libraries/LibGfx/ImageFormats/JPEGLoader.cpp @@ -148,7 +148,10 @@ ErrorOr JPEGLoadingContext::decode() // Photoshop writes inverted CMYK data (i.e. Photoshop's 0 should be 255). We convert this // to expected values. - if (cinfo.saw_Adobe_marker) { + bool should_invert_cmyk = cinfo.jpeg_color_space == JCS_CMYK + && (!cinfo.saw_Adobe_marker || cinfo.Adobe_transform == 0); + + if (should_invert_cmyk) { for (int i = 0; i < cmyk_bitmap->size().height(); ++i) { auto* line = cmyk_bitmap->scanline(i); diff --git a/Tests/LibGfx/TestImageDecoder.cpp b/Tests/LibGfx/TestImageDecoder.cpp index 89f6fbb246c..4b4465deade 100644 --- a/Tests/LibGfx/TestImageDecoder.cpp +++ b/Tests/LibGfx/TestImageDecoder.cpp @@ -323,6 +323,42 @@ TEST_CASE(test_jpeg_ycck) } } +TEST_CASE(test_jpeg_cmyk_no_adobe_marker) +{ + auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/cmyk-no-adobe-marker.jpg"sv))); + EXPECT(Gfx::JPEGImageDecoderPlugin::sniff(file->bytes())); + auto plugin_decoder = TRY_OR_FAIL(Gfx::JPEGImageDecoderPlugin::create(file->bytes())); + TRY_OR_FAIL(expect_single_frame_of_size(*plugin_decoder, { 10, 10 })); + + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(8, 1), Gfx::Color(44, 184, 97)); + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(1, 8), Gfx::Color(184, 44, 97)); + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(9, 9), Gfx::Color(24, 24, 194)); +} + +TEST_CASE(test_jpeg_cmyk_adobe_transform_0) +{ + auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/cmyk-adobe-transform-0.jpg"sv))); + EXPECT(Gfx::JPEGImageDecoderPlugin::sniff(file->bytes())); + auto plugin_decoder = TRY_OR_FAIL(Gfx::JPEGImageDecoderPlugin::create(file->bytes())); + TRY_OR_FAIL(expect_single_frame_of_size(*plugin_decoder, { 10, 10 })); + + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(8, 1), Gfx::Color(44, 184, 97)); + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(1, 8), Gfx::Color(184, 44, 97)); + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(9, 9), Gfx::Color(24, 24, 194)); +} + +TEST_CASE(test_jpeg_ycck_adobe_transform_2) +{ + auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/ycck-adobe-transform-2.jpg"sv))); + EXPECT(Gfx::JPEGImageDecoderPlugin::sniff(file->bytes())); + auto plugin_decoder = TRY_OR_FAIL(Gfx::JPEGImageDecoderPlugin::create(file->bytes())); + TRY_OR_FAIL(expect_single_frame_of_size(*plugin_decoder, { 10, 10 })); + + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(8, 1), Gfx::Color(197, 27, 134)); + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(1, 8), Gfx::Color(24, 199, 134)); + EXPECT_EQ(plugin_decoder->frame(0).value().image->get_pixel(9, 9), Gfx::Color(227, 224, 19)); +} + TEST_CASE(test_jpeg_sof2_spectral_selection) { auto file = TRY_OR_FAIL(Core::MappedFile::map(TEST_INPUT("jpg/spectral_selection.jpg"sv))); diff --git a/Tests/LibGfx/test-inputs/jpg/cmyk-adobe-transform-0.jpg b/Tests/LibGfx/test-inputs/jpg/cmyk-adobe-transform-0.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bd0b894987495bf3e1fc26ddd44c80faec3b962e GIT binary patch literal 593 zcmex=Cober zcG`GQH0a_772~9$CQdFfaS2H&RW)@DO)V2sGjj_|D`yv1H+K(Dui%i-u<(e;sN|H? zwDgS3tm2Z=vhs?`s^*r~w)T$Bu1S-pOr17;#>`oZ7B5-4Z25|nt2S-kvUS_`9Xod& zI(+2lvEwIBp1O4T%GGPvZ`{1~@X_NZPoF)1@$%KjPoKYh{r3IG&tLyMG>KZ9Za@65m1FW>*DbN}ln|5N@y!}_?5{~1^X|1&go{AW1+{f~eB z-v11`+Fvg1pBE1lJ#o1HKSTVc{|qnE`jIrnPoK5^kBIv}wdwXBZT~Y&Z~xCQZT?#+ z?O#$rgPzo%N&a`MKI&g({X^xC{D0Z=>py7zXE@gXL!)o?s`};iM@~KdvH$7j`d-mL zpMLcJbCdqh@aymN{|wG1^@rRa$^YWJ_n+ZG@PCHhy65!=&Fde`-v7bxy?p&a>wQcW zuaC!X@IRQF9er&dcSY2HhRAEB`K`NL&tCm|<(BK3Nq2m8ragT+_3q4@H>RZ}d8%BD H|9=wzEoby` literal 0 HcmV?d00001 diff --git a/Tests/LibGfx/test-inputs/jpg/cmyk-no-adobe-marker.jpg b/Tests/LibGfx/test-inputs/jpg/cmyk-no-adobe-marker.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e90218db637198a33241980202f955305847d2ea GIT binary patch literal 577 zcmex=kx|JhscGpMnOVgprDf$6l~v6x zt!?ccon4bAPnkMx`iz;g7A;<~blLJ1D_3pWyk+aQ?K^hvI&}ER(PPI?oIG{u@|COC zuHU$M>*1rvPo6$|{^I4UkDoq&`TFhqkDtH(-(uinac1ykh-C0)V6bQSRsD~9;(rFi z{@iExa{QDpO`n~@dbhW=++CMKID0<>> z{eOn|P5&8Qr1c|dil07f{T~tce`?e1Kid9hnBM-MVcPt+Qrf?yfCfFOKa>3LR(;gJ z%KC@OANl{X=huJG{LgT#|A$83>Q(j2>yMmz{A2&q&Go&ae?I-_|K}$CpW)Zv>His= zP3jN1Ka&5&cke&LgW&%Ry>-v)51Q9Mn7#jl-+TG`gVy_)DqbIt-{5~RH#_>;KJJRB s{|u4WO7mNHxt_iH_sT8THIwf6>P&n3bn4xiH*ZW!OY&5?82|q!0A17YHvj+t literal 0 HcmV?d00001 diff --git a/Tests/LibGfx/test-inputs/jpg/ycck-adobe-transform-2.jpg b/Tests/LibGfx/test-inputs/jpg/ycck-adobe-transform-2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..402abb11a4cde9278aef0e818ee95af903283711 GIT binary patch literal 597 zcmex=;ovAz>i_VIW%oWC$ZjCo>BNP@@1h zCpS=(MDYIrg9rx$7XudyqaXv5AS1INBa0xz|04`i3=E8{F!zIf!OpcJaWENy$V6bO6JLB)GkN0k;-9G%`S`laavZBuHnPB<-`-S(Mt-Rm1Z|!*e ztFJZrS{Z-yKQiIG8^F3hfO-B3>wm8f@8&ODZ@r-F;3vi4;}@a}HeFiB zF|k^3{rT4+oH{pz41`ZGs5ic{s`+Bqdg*Fa((S;&+~ws}l{#lGrA|6>I>=MC$kPr8 tTcUO)uMN4tdAzu8#?%u}iUd=1T}5AWbQ-T(b?SfyPX$Bqh3o%s0s!xWqGbR8 literal 0 HcmV?d00001