Modified: trunk/LayoutTests/fast/css/parsing-color-mix-expected.txt (286195 => 286196)
--- trunk/LayoutTests/fast/css/parsing-color-mix-expected.txt 2021-11-28 18:32:59 UTC (rev 286195)
+++ trunk/LayoutTests/fast/css/parsing-color-mix-expected.txt 2021-11-28 18:55:05 UTC (rev 286196)
@@ -10,10 +10,55 @@
PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))") is "rgb(61, 73, 54)"
PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)") is "rgb(61, 73, 54)"
PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)") is "rgb(112, 106, 67)"
-PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 50%, hsl(30deg 30% 40%) 150%)") is "rgb(112, 106, 67)"
-PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)") is "rgb(112, 106, 67)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)") is "rgb(112, 106, 67)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)") is "rgba(112, 106, 67, 0.5)"
PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))") is "rgb(133, 102, 71)"
-PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))") is "rgb(142, 97, 72)"
+-> no hue method specified, defaults to shorter
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))") is "rgb(191, 85, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))") is "rgb(191, 85, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))") is "rgb(191, 64, 85)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))") is "rgb(191, 64, 85)"
+-> shorter hue
+PASS computedStyle("background-color", "color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))") is "rgb(191, 85, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))") is "rgb(191, 85, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))") is "rgb(191, 64, 85)"
+PASS computedStyle("background-color", "color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))") is "rgb(191, 64, 85)"
+-> longer hue
+PASS computedStyle("background-color", "color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))") is "rgb(64, 85, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))") is "rgb(64, 85, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))") is "rgb(64, 170, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))") is "rgb(64, 170, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))") is "rgb(64, 191, 170)"
+PASS computedStyle("background-color", "color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))") is "rgb(64, 191, 170)"
+-> increasing hue
+PASS computedStyle("background-color", "color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))") is "rgb(64, 85, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))") is "rgb(64, 170, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))") is "rgb(191, 85, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))") is "rgb(64, 191, 170)"
+PASS computedStyle("background-color", "color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))") is "rgb(191, 64, 85)"
+-> decreasing hue
+PASS computedStyle("background-color", "color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))") is "rgb(64, 85, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))") is "rgb(191, 85, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))") is "rgb(64, 170, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))") is "rgb(191, 64, 85)"
+PASS computedStyle("background-color", "color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))") is "rgb(64, 191, 170)"
+-> specified hue
+PASS computedStyle("background-color", "color-mix(in hsl specified hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl specified hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))") is "rgb(191, 170, 64)"
+PASS computedStyle("background-color", "color-mix(in hsl specified hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))") is "rgb(64, 170, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl specified hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))") is "rgb(64, 170, 191)"
+PASS computedStyle("background-color", "color-mix(in hsl specified hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))") is "rgb(64, 191, 170)"
+PASS computedStyle("background-color", "color-mix(in hsl specified hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))") is "rgb(64, 191, 170)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 150%, hsl(30deg 30% 40%))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in hwb, ...)
PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))") is "rgb(147, 179, 52)"
@@ -22,10 +67,55 @@
PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))") is "rgb(96, 191, 39)"
PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)") is "rgb(96, 191, 39)"
PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)") is "rgb(166, 153, 64)"
-PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 50%, hwb(30deg 30% 40%) 150%)") is "rgb(166, 153, 64)"
-PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)") is "rgb(166, 153, 64)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)") is "rgb(166, 153, 64)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)") is "rgba(166, 153, 64, 0.5)"
PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))") is "rgb(153, 115, 77)"
-PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))") is "rgb(148, 105, 82)"
+-> no hue method specified, defaults to shorter
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))") is "rgb(153, 89, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))") is "rgb(153, 89, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))") is "rgb(153, 77, 89)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))") is "rgb(153, 77, 89)"
+-> shorter hue
+PASS computedStyle("background-color", "color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))") is "rgb(153, 89, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))") is "rgb(153, 89, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))") is "rgb(153, 77, 89)"
+PASS computedStyle("background-color", "color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))") is "rgb(153, 77, 89)"
+-> longer hue
+PASS computedStyle("background-color", "color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))") is "rgb(77, 89, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))") is "rgb(77, 89, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))") is "rgb(77, 140, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))") is "rgb(77, 140, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))") is "rgb(77, 153, 140)"
+PASS computedStyle("background-color", "color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))") is "rgb(77, 153, 140)"
+-> increasing hue
+PASS computedStyle("background-color", "color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))") is "rgb(77, 89, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))") is "rgb(77, 140, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))") is "rgb(153, 89, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))") is "rgb(77, 153, 140)"
+PASS computedStyle("background-color", "color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))") is "rgb(153, 77, 89)"
+-> decreasing hue
+PASS computedStyle("background-color", "color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))") is "rgb(77, 89, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))") is "rgb(153, 89, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))") is "rgb(77, 140, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))") is "rgb(153, 77, 89)"
+PASS computedStyle("background-color", "color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))") is "rgb(77, 153, 140)"
+-> specified hue
+PASS computedStyle("background-color", "color-mix(in hwb specified hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb specified hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))") is "rgb(153, 140, 77)"
+PASS computedStyle("background-color", "color-mix(in hwb specified hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))") is "rgb(77, 140, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb specified hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))") is "rgb(77, 140, 153)"
+PASS computedStyle("background-color", "color-mix(in hwb specified hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))") is "rgb(77, 153, 140)"
+PASS computedStyle("background-color", "color-mix(in hwb specified hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))") is "rgb(77, 153, 140)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in lch, ...)
PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4), lch(50% 60 70deg / .8))") is "lch(30% 40 50 / 0.6)"
@@ -34,10 +124,55 @@
PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4), 25% lch(50% 60 70deg / .8))") is "lch(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4), lch(50% 60 70deg / .8) 25%)") is "lch(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 25%, lch(50% 60 70deg / .8) 75%)") is "lch(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 50%, lch(50% 60 70deg / .8) 150%)") is "lch(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 12.5%, lch(50% 60 70deg / .8) 37.5%)") is "lch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 30%, lch(50% 60 70deg / .8) 90%)") is "lch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 12.5%, lch(50% 60 70deg / .8) 37.5%)") is "lch(40% 50 60 / 0.35)"
PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 0%, lch(50% 60 70deg / .8))") is "lch(50% 60 70 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) -10%, lch(50% 60 70deg / .8))") is "lch(54% 64 74 / 0.84000003)"
+-> no hue method specified, defaults to shorter
+PASS computedStyle("background-color", "color-mix(in lch, lch(100% 0 40deg), lch(100% 0 60deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(100% 0 60deg), lch(100% 0 40deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(100% 0 50deg), lch(100% 0 330deg))") is "lch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(100% 0 330deg), lch(100% 0 50deg))") is "lch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(100% 0 20deg), lch(100% 0 320deg))") is "lch(100% 0 350)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(100% 0 320deg), lch(100% 0 20deg))") is "lch(100% 0 350)"
+-> shorter hue
+PASS computedStyle("background-color", "color-mix(in lch shorter hue, lch(100% 0 40deg), lch(100% 0 60deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch shorter hue, lch(100% 0 60deg), lch(100% 0 40deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch shorter hue, lch(100% 0 50deg), lch(100% 0 330deg))") is "lch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in lch shorter hue, lch(100% 0 330deg), lch(100% 0 50deg))") is "lch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in lch shorter hue, lch(100% 0 20deg), lch(100% 0 320deg))") is "lch(100% 0 350)"
+PASS computedStyle("background-color", "color-mix(in lch shorter hue, lch(100% 0 320deg), lch(100% 0 20deg))") is "lch(100% 0 350)"
+-> longer hue
+PASS computedStyle("background-color", "color-mix(in lch longer hue, lch(100% 0 40deg), lch(100% 0 60deg))") is "lch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in lch longer hue, lch(100% 0 60deg), lch(100% 0 40deg))") is "lch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in lch longer hue, lch(100% 0 50deg), lch(100% 0 330deg))") is "lch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in lch longer hue, lch(100% 0 330deg), lch(100% 0 50deg))") is "lch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in lch longer hue, lch(100% 0 20deg), lch(100% 0 320deg))") is "lch(100% 0 170)"
+PASS computedStyle("background-color", "color-mix(in lch longer hue, lch(100% 0 320deg), lch(100% 0 20deg))") is "lch(100% 0 170)"
+-> increasing hue
+PASS computedStyle("background-color", "color-mix(in lch increasing hue, lch(100% 0 40deg), lch(100% 0 60deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch increasing hue, lch(100% 0 60deg), lch(100% 0 40deg))") is "lch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in lch increasing hue, lch(100% 0 50deg), lch(100% 0 330deg))") is "lch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in lch increasing hue, lch(100% 0 330deg), lch(100% 0 50deg))") is "lch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in lch increasing hue, lch(100% 0 20deg), lch(100% 0 320deg))") is "lch(100% 0 170)"
+PASS computedStyle("background-color", "color-mix(in lch increasing hue, lch(100% 0 320deg), lch(100% 0 20deg))") is "lch(100% 0 350)"
+-> decreasing hue
+PASS computedStyle("background-color", "color-mix(in lch decreasing hue, lch(100% 0 40deg), lch(100% 0 60deg))") is "lch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in lch decreasing hue, lch(100% 0 60deg), lch(100% 0 40deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch decreasing hue, lch(100% 0 50deg), lch(100% 0 330deg))") is "lch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in lch decreasing hue, lch(100% 0 330deg), lch(100% 0 50deg))") is "lch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in lch decreasing hue, lch(100% 0 20deg), lch(100% 0 320deg))") is "lch(100% 0 350)"
+PASS computedStyle("background-color", "color-mix(in lch decreasing hue, lch(100% 0 320deg), lch(100% 0 20deg))") is "lch(100% 0 170)"
+-> specified hue
+PASS computedStyle("background-color", "color-mix(in lch specified hue, lch(100% 0 40deg), lch(100% 0 60deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch specified hue, lch(100% 0 60deg), lch(100% 0 40deg))") is "lch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in lch specified hue, lch(100% 0 50deg), lch(100% 0 330deg))") is "lch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in lch specified hue, lch(100% 0 330deg), lch(100% 0 50deg))") is "lch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in lch specified hue, lch(100% 0 20deg), lch(100% 0 320deg))") is "lch(100% 0 170)"
+PASS computedStyle("background-color", "color-mix(in lch specified hue, lch(100% 0 320deg), lch(100% 0 20deg))") is "lch(100% 0 170)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) -10%, lch(50% 60 70deg / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 150%, lch(50% 60 70deg / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 0%, lch(50% 60 70deg / .8) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in oklch, ...)
PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8))") is "oklch(30% 40 50 / 0.6)"
@@ -46,10 +181,55 @@
PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), 25% oklch(50% 60 70deg / .8))") is "oklch(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8) 25%)") is "oklch(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 25%, oklch(50% 60 70deg / .8) 75%)") is "oklch(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 50%, oklch(50% 60 70deg / .8) 150%)") is "oklch(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 12.5%, oklch(50% 60 70deg / .8) 37.5%)") is "oklch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 30%, oklch(50% 60 70deg / .8) 90%)") is "oklch(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 12.5%, oklch(50% 60 70deg / .8) 37.5%)") is "oklch(40% 50 60 / 0.35)"
PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 0%, oklch(50% 60 70deg / .8))") is "oklch(50% 60 70 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) -10%, oklch(50% 60 70deg / .8))") is "oklch(54% 64 74 / 0.84000003)"
+-> no hue method specified, defaults to shorter
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(100% 0 40deg), oklch(100% 0 60deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(100% 0 60deg), oklch(100% 0 40deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(100% 0 50deg), oklch(100% 0 330deg))") is "oklch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(100% 0 330deg), oklch(100% 0 50deg))") is "oklch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(100% 0 20deg), oklch(100% 0 320deg))") is "oklch(100% 0 350)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(100% 0 320deg), oklch(100% 0 20deg))") is "oklch(100% 0 350)"
+-> shorter hue
+PASS computedStyle("background-color", "color-mix(in oklch shorter hue, oklch(100% 0 40deg), oklch(100% 0 60deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch shorter hue, oklch(100% 0 60deg), oklch(100% 0 40deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch shorter hue, oklch(100% 0 50deg), oklch(100% 0 330deg))") is "oklch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in oklch shorter hue, oklch(100% 0 330deg), oklch(100% 0 50deg))") is "oklch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in oklch shorter hue, oklch(100% 0 20deg), oklch(100% 0 320deg))") is "oklch(100% 0 350)"
+PASS computedStyle("background-color", "color-mix(in oklch shorter hue, oklch(100% 0 320deg), oklch(100% 0 20deg))") is "oklch(100% 0 350)"
+-> longer hue
+PASS computedStyle("background-color", "color-mix(in oklch longer hue, oklch(100% 0 40deg), oklch(100% 0 60deg))") is "oklch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in oklch longer hue, oklch(100% 0 60deg), oklch(100% 0 40deg))") is "oklch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in oklch longer hue, oklch(100% 0 50deg), oklch(100% 0 330deg))") is "oklch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in oklch longer hue, oklch(100% 0 330deg), oklch(100% 0 50deg))") is "oklch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in oklch longer hue, oklch(100% 0 20deg), oklch(100% 0 320deg))") is "oklch(100% 0 170)"
+PASS computedStyle("background-color", "color-mix(in oklch longer hue, oklch(100% 0 320deg), oklch(100% 0 20deg))") is "oklch(100% 0 170)"
+-> increasing hue
+PASS computedStyle("background-color", "color-mix(in oklch increasing hue, oklch(100% 0 40deg), oklch(100% 0 60deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch increasing hue, oklch(100% 0 60deg), oklch(100% 0 40deg))") is "oklch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in oklch increasing hue, oklch(100% 0 50deg), oklch(100% 0 330deg))") is "oklch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in oklch increasing hue, oklch(100% 0 330deg), oklch(100% 0 50deg))") is "oklch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in oklch increasing hue, oklch(100% 0 20deg), oklch(100% 0 320deg))") is "oklch(100% 0 170)"
+PASS computedStyle("background-color", "color-mix(in oklch increasing hue, oklch(100% 0 320deg), oklch(100% 0 20deg))") is "oklch(100% 0 350)"
+-> decreasing hue
+PASS computedStyle("background-color", "color-mix(in oklch decreasing hue, oklch(100% 0 40deg), oklch(100% 0 60deg))") is "oklch(100% 0 230)"
+PASS computedStyle("background-color", "color-mix(in oklch decreasing hue, oklch(100% 0 60deg), oklch(100% 0 40deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch decreasing hue, oklch(100% 0 50deg), oklch(100% 0 330deg))") is "oklch(100% 0 10)"
+PASS computedStyle("background-color", "color-mix(in oklch decreasing hue, oklch(100% 0 330deg), oklch(100% 0 50deg))") is "oklch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in oklch decreasing hue, oklch(100% 0 20deg), oklch(100% 0 320deg))") is "oklch(100% 0 350)"
+PASS computedStyle("background-color", "color-mix(in oklch decreasing hue, oklch(100% 0 320deg), oklch(100% 0 20deg))") is "oklch(100% 0 170)"
+-> specified hue
+PASS computedStyle("background-color", "color-mix(in oklch specified hue, oklch(100% 0 40deg), oklch(100% 0 60deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch specified hue, oklch(100% 0 60deg), oklch(100% 0 40deg))") is "oklch(100% 0 50)"
+PASS computedStyle("background-color", "color-mix(in oklch specified hue, oklch(100% 0 50deg), oklch(100% 0 330deg))") is "oklch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in oklch specified hue, oklch(100% 0 330deg), oklch(100% 0 50deg))") is "oklch(100% 0 190)"
+PASS computedStyle("background-color", "color-mix(in oklch specified hue, oklch(100% 0 20deg), oklch(100% 0 320deg))") is "oklch(100% 0 170)"
+PASS computedStyle("background-color", "color-mix(in oklch specified hue, oklch(100% 0 320deg), oklch(100% 0 20deg))") is "oklch(100% 0 170)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) -10%, oklch(50% 60 70deg / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 150%, oklch(50% 60 70deg / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 0%, oklch(50% 60 70deg / .8) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in lab, ...)
PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4), lab(50% 60 70 / .8))") is "lab(30% 40 50 / 0.6)"
@@ -58,10 +238,13 @@
PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4), 25% lab(50% 60 70 / .8))") is "lab(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4), lab(50% 60 70 / .8) 25%)") is "lab(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 25%, lab(50% 60 70 / .8) 75%)") is "lab(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 50%, lab(50% 60 70 / .8) 150%)") is "lab(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 12.5%, lab(50% 60 70 / .8) 37.5%)") is "lab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 30%, lab(50% 60 70 / .8) 90%)") is "lab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 12.5%, lab(50% 60 70 / .8) 37.5%)") is "lab(40% 50 60 / 0.35)"
PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 0%, lab(50% 60 70 / .8))") is "lab(50% 60 70 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) -10%, lab(50% 60 70 / .8))") is "lab(54% 64 74 / 0.84000003)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) -10%, lab(50% 60 70 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 150%, lab(50% 60 70 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 0%, lab(50% 60 70 / .8) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in oklab, ...)
PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), oklab(50% 60 70 / .8))") is "oklab(30% 40 50 / 0.6)"
@@ -70,10 +253,13 @@
PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), 25% oklab(50% 60 70 / .8))") is "oklab(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), oklab(50% 60 70 / .8) 25%)") is "oklab(20% 30 40 / 0.5)"
PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 25%, oklab(50% 60 70 / .8) 75%)") is "oklab(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 50%, oklab(50% 60 70 / .8) 150%)") is "oklab(40% 50 60 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 12.5%, oklab(50% 60 70 / .8) 37.5%)") is "oklab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 30%, oklab(50% 60 70 / .8) 90%)") is "oklab(40% 50 60 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 12.5%, oklab(50% 60 70 / .8) 37.5%)") is "oklab(40% 50 60 / 0.35)"
PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 0%, oklab(50% 60 70 / .8))") is "oklab(50% 60 70 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) -10%, oklab(50% 60 70 / .8))") is "oklab(54% 64 74 / 0.84000003)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) -10%, oklab(50% 60 70 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 150%, oklab(50% 60 70 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 0%, oklab(50% 60 70 / .8) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in srgb, ...)
PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8))") is "color(srgb 0.3 0.4 0.5 / 0.6)"
@@ -82,10 +268,13 @@
PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8) 25%)") is "color(srgb 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4), 25% color(srgb .5 .6 .7 / .8))") is "color(srgb 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 25%, color(srgb .5 .6 .7 / .8) 75%)") is "color(srgb 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 50%, color(srgb .5 .6 .7 / .8) 150%)") is "color(srgb 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 12.5%, color(srgb .5 .6 .7 / .8) 37.5%)") is "color(srgb 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 30%, color(srgb .5 .6 .7 / .8) 90%)") is "color(srgb 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 12.5%, color(srgb .5 .6 .7 / .8) 37.5%)") is "color(srgb 0.4 0.5 0.6 / 0.35)"
PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 0%, color(srgb .5 .6 .7 / .8))") is "color(srgb 0.5 0.6 0.7 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) -10%, color(srgb .5 .6 .7 / .8))") is "color(srgb 0.54 0.64000005 0.74 / 0.84000003)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) -10%, color(srgb .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 150%, color(srgb .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .4) 0%, color(srgb .5 .6 .7 / .8) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in xyz, ...)
PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4), color(xyz .5 .6 .7 / .8))") is "color(xyz-d65 0.3 0.4 0.5 / 0.6)"
@@ -94,10 +283,13 @@
PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4), color(xyz .5 .6 .7 / .8) 25%)") is "color(xyz-d65 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4), 25% color(xyz .5 .6 .7 / .8))") is "color(xyz-d65 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 25%, color(xyz .5 .6 .7 / .8) 75%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 50%, color(xyz .5 .6 .7 / .8) 150%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 12.5%, color(xyz .5 .6 .7 / .8) 37.5%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 30%, color(xyz .5 .6 .7 / .8) 90%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 12.5%, color(xyz .5 .6 .7 / .8) 37.5%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.35)"
PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 0%, color(xyz .5 .6 .7 / .8))") is "color(xyz-d65 0.5 0.6 0.7 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) -10%, color(xyz .5 .6 .7 / .8))") is "color(xyz-d65 0.54 0.64000005 0.74 / 0.84000003)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) -10%, color(xyz .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 150%, color(xyz .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .4) 0%, color(xyz .5 .6 .7 / .8) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in xyz-d50, ...)
PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4), color(xyz-d50 .5 .6 .7 / .8))") is "color(xyz-d50 0.3 0.4 0.5 / 0.6)"
@@ -106,10 +298,13 @@
PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4), color(xyz-d50 .5 .6 .7 / .8) 25%)") is "color(xyz-d50 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4), 25% color(xyz-d50 .5 .6 .7 / .8))") is "color(xyz-d50 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 25%, color(xyz-d50 .5 .6 .7 / .8) 75%)") is "color(xyz-d50 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 50%, color(xyz-d50 .5 .6 .7 / .8) 150%)") is "color(xyz-d50 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 12.5%, color(xyz-d50 .5 .6 .7 / .8) 37.5%)") is "color(xyz-d50 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 30%, color(xyz-d50 .5 .6 .7 / .8) 90%)") is "color(xyz-d50 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 12.5%, color(xyz-d50 .5 .6 .7 / .8) 37.5%)") is "color(xyz-d50 0.4 0.5 0.6 / 0.35)"
PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 0%, color(xyz-d50 .5 .6 .7 / .8))") is "color(xyz-d50 0.5 0.6 0.7 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) -10%, color(xyz-d50 .5 .6 .7 / .8))") is "color(xyz-d50 0.54 0.64000005 0.74 / 0.84000003)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) -10%, color(xyz-d50 .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 150%, color(xyz-d50 .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .4) 0%, color(xyz-d50 .5 .6 .7 / .8) 0%)") is "rgba(0, 0, 0, 0)"
color-mix(in xyz-d65, ...)
PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4), color(xyz-d65 .5 .6 .7 / .8))") is "color(xyz-d65 0.3 0.4 0.5 / 0.6)"
@@ -118,10 +313,13 @@
PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4), color(xyz-d65 .5 .6 .7 / .8) 25%)") is "color(xyz-d65 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4), 25% color(xyz-d65 .5 .6 .7 / .8))") is "color(xyz-d65 0.2 0.3 0.4 / 0.5)"
PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 25%, color(xyz-d65 .5 .6 .7 / .8) 75%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 50%, color(xyz-d65 .5 .6 .7 / .8) 150%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
-PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 12.5%, color(xyz-d65 .5 .6 .7 / .8) 37.5%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 30%, color(xyz-d65 .5 .6 .7 / .8) 90%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.7)"
+PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 12.5%, color(xyz-d65 .5 .6 .7 / .8) 37.5%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.35)"
PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 0%, color(xyz-d65 .5 .6 .7 / .8))") is "color(xyz-d65 0.5 0.6 0.7 / 0.8)"
-PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) -10%, color(xyz-d65 .5 .6 .7 / .8))") is "color(xyz-d65 0.54 0.64000005 0.74 / 0.84000003)"
+-> Invalid examples
+PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) -10%, color(xyz-d65 .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 150%, color(xyz-d65 .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)"
+PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .4) 0%, color(xyz-d65 .5 .6 .7 / .8) 0%)") is "rgba(0, 0, 0, 0)"
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/fast/css/parsing-color-mix.html (286195 => 286196)
--- trunk/LayoutTests/fast/css/parsing-color-mix.html 2021-11-28 18:32:59 UTC (rev 286195)
+++ trunk/LayoutTests/fast/css/parsing-color-mix.html 2021-11-28 18:55:05 UTC (rev 286196)
@@ -26,6 +26,12 @@
testComputedProperty("background-color", value, expected);
}
+ function testComputedComputingResult(value, expected)
+ {
+ let computedExpected = computedStyle("background-color", expected)
+ testComputedProperty("background-color", value, computedExpected);
+ }
+
debug('color-mix(in hsl, ...)');
testComputed(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `rgb(84, 92, 61)`); // hsl(75deg 20% 30%)
@@ -34,14 +40,63 @@
testComputed(`color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))`, `rgb(61, 73, 54)`);
testComputed(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)`, `rgb(61, 73, 54)`);
testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)`, `rgb(112, 106, 67)`);
- testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 50%, hsl(30deg 30% 40%) 150%)`, `rgb(112, 106, 67)`); // Scale down > 100% sum.
- testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)`, `rgb(112, 106, 67)`); // Scale up < 100% sum.
+ testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)`, `rgb(112, 106, 67)`); // Scale down > 100% sum.
+ testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)`, `rgba(112, 106, 67, 0.5)`); // Scale up < 100% sum, causes alpha multiplication.
testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))`, `rgb(133, 102, 71)`);
- // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
- testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))`, `rgb(142, 97, 72)`);
+ debug(`-> no hue method specified, defaults to shorter`)
+ testComputedComputingResult(`color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `hsl(10deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `hsl(10deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `hsl(350deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `hsl(350deg 50% 50%)`);
+ debug(`-> shorter hue`)
+ testComputedComputingResult(`color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `hsl(10deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `hsl(10deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `hsl(350deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `hsl(350deg 50% 50%)`);
+ debug(`-> longer hue`)
+ testComputedComputingResult(`color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `hsl(230deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `hsl(230deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `hsl(190deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `hsl(190deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `hsl(170deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `hsl(170deg 50% 50%)`);
+
+ debug(`-> increasing hue`)
+ testComputedComputingResult(`color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `hsl(230deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `hsl(190deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `hsl(10deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `hsl(170deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `hsl(350deg 50% 50%)`);
+
+ debug(`-> decreasing hue`)
+ testComputedComputingResult(`color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `hsl(230deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `hsl(10deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `hsl(190deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `hsl(350deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `hsl(170deg 50% 50%)`);
+
+ debug(`-> specified hue`)
+ testComputedComputingResult(`color-mix(in hsl specified hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl specified hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `hsl(50deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl specified hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `hsl(190deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl specified hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `hsl(190deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl specified hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `hsl(170deg 50% 50%)`);
+ testComputedComputingResult(`color-mix(in hsl specified hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `hsl(170deg 50% 50%)`);
+
+ debug('-> Invalid examples');
+ testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))`, `rgba(0, 0, 0, 0)`); // Percentages less than 0 are not valid.
+ testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 150%, hsl(30deg 30% 40%))`, `rgba(0, 0, 0, 0)`); // Percentages greater than 100 are not valid.
+ testComputed(`color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%) 0%)`, `rgba(0, 0, 0, 0)`); // Sum of percengates cannot be 0%.
+
debug('');
debug('color-mix(in hwb, ...)');
@@ -51,12 +106,62 @@
testComputed(`color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))`, `rgb(96, 191, 39)`);
testComputed(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)`, `rgb(96, 191, 39)`);
testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)`, `rgb(166, 153, 64)`);
- testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 50%, hwb(30deg 30% 40%) 150%)`, `rgb(166, 153, 64)`); // Scale down > 100% sum.
- testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)`, `rgb(166, 153, 64)`); // Scale up < 100% sum.
+ testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)`, `rgb(166, 153, 64)`); // Scale down > 100% sum.
+ testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)`, `rgba(166, 153, 64, 0.5)`); // Scale up < 100% sum, causes alpha multiplication.
testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))`, `rgb(153, 115, 77)`);
- // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
- testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))`, `rgb(148, 105, 82)`);
+ debug(`-> no hue method specified, defaults to shorter`)
+ testComputedComputingResult(`color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `hwb(10deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `hwb(10deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `hwb(350deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `hwb(350deg 30% 40%)`);
+
+ debug(`-> shorter hue`)
+ testComputedComputingResult(`color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `hwb(10deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `hwb(10deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `hwb(350deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `hwb(350deg 30% 40%)`);
+
+ debug(`-> longer hue`)
+ testComputedComputingResult(`color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `hwb(230deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `hwb(230deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `hwb(190deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `hwb(190deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `hwb(170deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `hwb(170deg 30% 40%)`);
+
+ debug(`-> increasing hue`)
+ testComputedComputingResult(`color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `hwb(230deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `hwb(190deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `hwb(10deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `hwb(170deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `hwb(350deg 30% 40%)`);
+
+ debug(`-> decreasing hue`)
+ testComputedComputingResult(`color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `hwb(230deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `hwb(10deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `hwb(190deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `hwb(350deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `hwb(170deg 30% 40%)`);
+
+ debug(`-> specified hue`)
+ testComputedComputingResult(`color-mix(in hwb specified hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb specified hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `hwb(50deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb specified hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `hwb(190deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb specified hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `hwb(190deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb specified hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `hwb(170deg 30% 40%)`);
+ testComputedComputingResult(`color-mix(in hwb specified hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `hwb(170deg 30% 40%)`);
+
+ debug('-> Invalid examples');
+ testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))`, `rgba(0, 0, 0, 0)`); // Percentages less than 0 are not valid.
+ testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))`, `rgba(0, 0, 0, 0)`); // Percentages greater than 100 are not valid.
+ testComputed(`color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%) 0%)`, `rgba(0, 0, 0, 0)`); // Sum of percengates cannot be 0%.
for (const colorSpace of [ "lch", "oklch" ]) {
debug('');
@@ -68,12 +173,62 @@
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4), 25% ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(20% 30 40 / 0.5)`);
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4), ${colorSpace}(50% 60 70deg / .8) 25%)`, `${colorSpace}(20% 30 40 / 0.5)`);
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 25%, ${colorSpace}(50% 60 70deg / .8) 75%)`, `${colorSpace}(40% 50 60 / 0.7)`);
- testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 50%, ${colorSpace}(50% 60 70deg / .8) 150%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale down > 100% sum.
- testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 12.5%, ${colorSpace}(50% 60 70deg / .8) 37.5%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale up < 100% sum.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 30%, ${colorSpace}(50% 60 70deg / .8) 90%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale down > 100% sum.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 12.5%, ${colorSpace}(50% 60 70deg / .8) 37.5%)`, `${colorSpace}(40% 50 60 / 0.35)`); // Scale up < 100% sum
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 0%, ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(50% 60 70 / 0.8)`);
- // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
- testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) -10%, ${colorSpace}(50% 60 70deg / .8))`, `${colorSpace}(54% 64 74 / 0.84000003)`);
+ debug(`-> no hue method specified, defaults to shorter`)
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(100% 0 40deg), ${colorSpace}(100% 0 60deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(100% 0 60deg), ${colorSpace}(100% 0 40deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(100% 0 50deg), ${colorSpace}(100% 0 330deg))`, `${colorSpace}(100% 0 10)`);
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(100% 0 330deg), ${colorSpace}(100% 0 50deg))`, `${colorSpace}(100% 0 10)`);
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(100% 0 20deg), ${colorSpace}(100% 0 320deg))`, `${colorSpace}(100% 0 350)`);
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(100% 0 320deg), ${colorSpace}(100% 0 20deg))`, `${colorSpace}(100% 0 350)`);
+
+ debug(`-> shorter hue`)
+ testComputed(`color-mix(in ${colorSpace} shorter hue, ${colorSpace}(100% 0 40deg), ${colorSpace}(100% 0 60deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace} shorter hue, ${colorSpace}(100% 0 60deg), ${colorSpace}(100% 0 40deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace} shorter hue, ${colorSpace}(100% 0 50deg), ${colorSpace}(100% 0 330deg))`, `${colorSpace}(100% 0 10)`);
+ testComputed(`color-mix(in ${colorSpace} shorter hue, ${colorSpace}(100% 0 330deg), ${colorSpace}(100% 0 50deg))`, `${colorSpace}(100% 0 10)`);
+ testComputed(`color-mix(in ${colorSpace} shorter hue, ${colorSpace}(100% 0 20deg), ${colorSpace}(100% 0 320deg))`, `${colorSpace}(100% 0 350)`);
+ testComputed(`color-mix(in ${colorSpace} shorter hue, ${colorSpace}(100% 0 320deg), ${colorSpace}(100% 0 20deg))`, `${colorSpace}(100% 0 350)`);
+
+ debug(`-> longer hue`)
+ testComputed(`color-mix(in ${colorSpace} longer hue, ${colorSpace}(100% 0 40deg), ${colorSpace}(100% 0 60deg))`, `${colorSpace}(100% 0 230)`);
+ testComputed(`color-mix(in ${colorSpace} longer hue, ${colorSpace}(100% 0 60deg), ${colorSpace}(100% 0 40deg))`, `${colorSpace}(100% 0 230)`);
+ testComputed(`color-mix(in ${colorSpace} longer hue, ${colorSpace}(100% 0 50deg), ${colorSpace}(100% 0 330deg))`, `${colorSpace}(100% 0 190)`);
+ testComputed(`color-mix(in ${colorSpace} longer hue, ${colorSpace}(100% 0 330deg), ${colorSpace}(100% 0 50deg))`, `${colorSpace}(100% 0 190)`);
+ testComputed(`color-mix(in ${colorSpace} longer hue, ${colorSpace}(100% 0 20deg), ${colorSpace}(100% 0 320deg))`, `${colorSpace}(100% 0 170)`);
+ testComputed(`color-mix(in ${colorSpace} longer hue, ${colorSpace}(100% 0 320deg), ${colorSpace}(100% 0 20deg))`, `${colorSpace}(100% 0 170)`);
+
+ debug(`-> increasing hue`)
+ testComputed(`color-mix(in ${colorSpace} increasing hue, ${colorSpace}(100% 0 40deg), ${colorSpace}(100% 0 60deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace} increasing hue, ${colorSpace}(100% 0 60deg), ${colorSpace}(100% 0 40deg))`, `${colorSpace}(100% 0 230)`);
+ testComputed(`color-mix(in ${colorSpace} increasing hue, ${colorSpace}(100% 0 50deg), ${colorSpace}(100% 0 330deg))`, `${colorSpace}(100% 0 190)`);
+ testComputed(`color-mix(in ${colorSpace} increasing hue, ${colorSpace}(100% 0 330deg), ${colorSpace}(100% 0 50deg))`, `${colorSpace}(100% 0 10)`);
+ testComputed(`color-mix(in ${colorSpace} increasing hue, ${colorSpace}(100% 0 20deg), ${colorSpace}(100% 0 320deg))`, `${colorSpace}(100% 0 170)`);
+ testComputed(`color-mix(in ${colorSpace} increasing hue, ${colorSpace}(100% 0 320deg), ${colorSpace}(100% 0 20deg))`, `${colorSpace}(100% 0 350)`);
+
+ debug(`-> decreasing hue`)
+ testComputed(`color-mix(in ${colorSpace} decreasing hue, ${colorSpace}(100% 0 40deg), ${colorSpace}(100% 0 60deg))`, `${colorSpace}(100% 0 230)`);
+ testComputed(`color-mix(in ${colorSpace} decreasing hue, ${colorSpace}(100% 0 60deg), ${colorSpace}(100% 0 40deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace} decreasing hue, ${colorSpace}(100% 0 50deg), ${colorSpace}(100% 0 330deg))`, `${colorSpace}(100% 0 10)`);
+ testComputed(`color-mix(in ${colorSpace} decreasing hue, ${colorSpace}(100% 0 330deg), ${colorSpace}(100% 0 50deg))`, `${colorSpace}(100% 0 190)`);
+ testComputed(`color-mix(in ${colorSpace} decreasing hue, ${colorSpace}(100% 0 20deg), ${colorSpace}(100% 0 320deg))`, `${colorSpace}(100% 0 350)`);
+ testComputed(`color-mix(in ${colorSpace} decreasing hue, ${colorSpace}(100% 0 320deg), ${colorSpace}(100% 0 20deg))`, `${colorSpace}(100% 0 170)`);
+
+ debug(`-> specified hue`)
+ testComputed(`color-mix(in ${colorSpace} specified hue, ${colorSpace}(100% 0 40deg), ${colorSpace}(100% 0 60deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace} specified hue, ${colorSpace}(100% 0 60deg), ${colorSpace}(100% 0 40deg))`, `${colorSpace}(100% 0 50)`);
+ testComputed(`color-mix(in ${colorSpace} specified hue, ${colorSpace}(100% 0 50deg), ${colorSpace}(100% 0 330deg))`, `${colorSpace}(100% 0 190)`);
+ testComputed(`color-mix(in ${colorSpace} specified hue, ${colorSpace}(100% 0 330deg), ${colorSpace}(100% 0 50deg))`, `${colorSpace}(100% 0 190)`);
+ testComputed(`color-mix(in ${colorSpace} specified hue, ${colorSpace}(100% 0 20deg), ${colorSpace}(100% 0 320deg))`, `${colorSpace}(100% 0 170)`);
+ testComputed(`color-mix(in ${colorSpace} specified hue, ${colorSpace}(100% 0 320deg), ${colorSpace}(100% 0 20deg))`, `${colorSpace}(100% 0 170)`);
+
+ debug('-> Invalid examples');
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) -10%, ${colorSpace}(50% 60 70deg / .8))`, `rgba(0, 0, 0, 0)`); // Percentages less than 0 are not valid.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 150%, ${colorSpace}(50% 60 70deg / .8))`, `rgba(0, 0, 0, 0)`); // Percentages greater than 100 are not valid.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 0%, ${colorSpace}(50% 60 70deg / .8) 0%)`, `rgba(0, 0, 0, 0)`); // Sum of percengates cannot be 0%.
}
for (const colorSpace of [ "lab", "oklab" ]) {
@@ -86,33 +241,37 @@
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4), 25% ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(20% 30 40 / 0.5)`);
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4), ${colorSpace}(50% 60 70 / .8) 25%)`, `${colorSpace}(20% 30 40 / 0.5)`);
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 25%, ${colorSpace}(50% 60 70 / .8) 75%)`, `${colorSpace}(40% 50 60 / 0.7)`);
- testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 50%, ${colorSpace}(50% 60 70 / .8) 150%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale down > 100% sum.
- testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 12.5%, ${colorSpace}(50% 60 70 / .8) 37.5%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale up < 100% sum.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 30%, ${colorSpace}(50% 60 70 / .8) 90%)`, `${colorSpace}(40% 50 60 / 0.7)`); // Scale down > 100% sum.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 12.5%, ${colorSpace}(50% 60 70 / .8) 37.5%)`, `${colorSpace}(40% 50 60 / 0.35)`); // Scale up < 100% sum, causes alpha multiplication.
testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 0%, ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(50% 60 70 / 0.8)`);
- // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
- testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) -10%, ${colorSpace}(50% 60 70 / .8))`, `${colorSpace}(54% 64 74 / 0.84000003)`);
+ debug('-> Invalid examples');
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) -10%, ${colorSpace}(50% 60 70 / .8))`, `rgba(0, 0, 0, 0)`); // Percentages less than 0 are not valid.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 150%, ${colorSpace}(50% 60 70 / .8))`, `rgba(0, 0, 0, 0)`); // Percentages greater than 100 are not valid.
+ testComputed(`color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 0%, ${colorSpace}(50% 60 70 / .8) 0%)`, `rgba(0, 0, 0, 0)`); // Sum of percengates cannot be 0%.
}
-
+
for (const colorSpace of [ "srgb", "xyz", "xyz-d50", "xyz-d65" ]) {
debug('');
debug(`color-mix(in ${colorSpace}, ...)`);
- const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
+ const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.6)`);
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`);
- testComputed(`color-mix(in ${colorSpace}, 25% color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`);
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8) 25%)`, `color(${resultColorSpace} 0.2 0.3 0.4 / 0.5)`);
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), 25% color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.2 0.3 0.4 / 0.5)`);
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8) 75%)`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`);
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 50%, color(${colorSpace} .5 .6 .7 / .8) 150%)`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`); // Scale down > 100% sum.
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 12.5%, color(${colorSpace} .5 .6 .7 / .8) 37.5%)`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`); // Scale up < 100% sum.
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.5 0.6 0.7 / 0.8)`);
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.6)`);
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`);
+ testComputed(`color-mix(in ${colorSpace}, 25% color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`);
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8) 25%)`, `color(${resultColorSpace} 0.2 0.3 0.4 / 0.5)`);
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), 25% color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.2 0.3 0.4 / 0.5)`);
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8) 75%)`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`);
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 30%, color(${colorSpace} .5 .6 .7 / .8) 90%)`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.7)`); // Scale down > 100% sum.
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 12.5%, color(${colorSpace} .5 .6 .7 / .8) 37.5%)`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.35)`); // Scale up < 100% sum, causes alpha multiplication.
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.5 0.6 0.7 / 0.8)`);
- // What should happen if you provide a negative percent? https://github.com/w3c/csswg-drafts/issues/6047
- testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) -10%, color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.54 0.64000005 0.74 / 0.84000003)`);
- }
+ debug('-> Invalid examples');
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) -10%, color(${colorSpace} .5 .6 .7 / .8))`, `rgba(0, 0, 0, 0)`); // Percentages less than 0 are not valid.
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 150%, color(${colorSpace} .5 .6 .7 / .8))`, `rgba(0, 0, 0, 0)`); // Percentages greater than 100 are not valid.
+ testComputed(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8) 0%)`, `rgba(0, 0, 0, 0)`); // Sum of percengates cannot be 0%.
+ }
</script>
<script src=""