| Test the parsing of CSS Color 5 color-mix(). |
| |
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". |
| |
| |
| color-mix(in hsl, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))") is "rgb(84, 92, 61)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%))") is "rgb(112, 106, 67)" |
| PASS computedStyle("background-color", "color-mix(in hsl, 25% hsl(120deg 10% 20%), hsl(30deg 30% 40%))") is "rgb(112, 106, 67)" |
| 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%) 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)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))") is "rgba(95, 105, 65, 0.6)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40% / .8))") is "rgba(108, 103, 66, 0.85)" |
| PASS computedStyle("background-color", "color-mix(in hsl, 25% hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))") is "rgba(121, 114, 69, 0.7)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% / .4), 25% hsl(30deg 30% 40% / .8))") is "rgba(68, 84, 59, 0.5)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8) 25%)") is "rgba(68, 84, 59, 0.5)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% / .4) 25%, hsl(30deg 30% 40% / .8) 75%)") is "rgba(121, 114, 69, 0.7)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% / .4) 30%, hsl(30deg 30% 40% / .8) 90%)") is "rgba(121, 114, 69, 0.7)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% / .4) 12.5%, hsl(30deg 30% 40% / .8) 37.5%)") is "rgba(121, 114, 69, 0.35)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% / .4) 0%, hsl(30deg 30% 40% / .8))") is "rgba(133, 102, 71, 0.8)" |
| -> 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)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% 40%) -10%, hsl(30deg 30% 40% 80%))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% 40%) 150%, hsl(30deg 30% 40% 80%))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in hsl, hsl(120deg 10% 20% 40%) 0%, hsl(30deg 30% 40% 80%) 0%)") is "rgba(0, 0, 0, 0)" |
| |
| color-mix(in hwb, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))") is "rgb(147, 179, 52)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%))") is "rgb(166, 153, 64)" |
| PASS computedStyle("background-color", "color-mix(in hwb, 25% hwb(120deg 10% 20%), hwb(30deg 30% 40%))") is "rgb(166, 153, 64)" |
| 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%) 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)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))") is "rgba(143, 170, 60, 0.6)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8))") is "rgba(160, 149, 70, 0.7)" |
| PASS computedStyle("background-color", "color-mix(in hwb, 25% hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))") is "rgba(160, 149, 70, 0.7)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40% / .8))") is "rgba(95, 193, 37, 0.95)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8) 25%)") is "rgba(98, 184, 46, 0.5)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8) 75%)") is "rgba(160, 149, 70, 0.7)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% / .4) 30%, hwb(30deg 30% 40% / .8) 90%)") is "rgba(160, 149, 70, 0.7)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% / .4) 12.5%, hwb(30deg 30% 40% / .8) 37.5%)") is "rgba(160, 149, 70, 0.35)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% / .4) 0%, hwb(30deg 30% 40% / .8))") is "rgba(153, 115, 77, 0.8)" |
| -> 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)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% 40%) -10%, hwb(30deg 30% 40% 80%))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% 40%) 150%, hwb(30deg 30% 40% 80%))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in hwb, hwb(120deg 10% 20% 40%) 0%, hwb(30deg 30% 40% 80%) 0%)") is "rgba(0, 0, 0, 0)" |
| |
| color-mix(in lch, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg), lch(50% 60 70deg))") is "lch(30% 40 50)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg) 25%, lch(50% 60 70deg))") is "lch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lch, 25% lch(10% 20 30deg), lch(50% 60 70deg))") is "lch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg), 25% lch(50% 60 70deg))") is "lch(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg), lch(50% 60 70deg) 25%)") is "lch(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg) 25%, lch(50% 60 70deg) 75%)") is "lch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg) 30%, lch(50% 60 70deg) 90%)") is "lch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg) 12.5%, lch(50% 60 70deg) 37.5%)") is "lch(40% 50 60 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg) 0%, lch(50% 60 70deg))") is "lch(50% 60 70)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4), lch(50% 60 70deg / .8))") is "lch(36.666664% 46.666664 50 / 0.6)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4) 25%, lch(50% 60 70deg / .8))") is "lch(44.285713% 54.285717 60 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in lch, 25% lch(10% 20 30deg / .4), lch(50% 60 70deg / .8))") is "lch(44.285713% 54.285717 60 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4), 25% lch(50% 60 70deg / .8))") is "lch(26% 36 40 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg / .4), lch(50% 60 70deg / .8) 25%)") is "lch(26% 36 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(44.285713% 54.285717 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(44.285713% 54.285717 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(44.285713% 54.285717 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)" |
| -> 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) -10%, lch(50% 60 70deg))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg) 150%, lch(50% 60 70deg))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in lch, lch(10% 20 30deg) 0%, lch(50% 60 70deg) 0%)") is "rgba(0, 0, 0, 0)" |
| 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, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg), oklch(50% 60 70deg))") is "oklch(30% 40 50)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg) 25%, oklch(50% 60 70deg))") is "oklch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklch, 25% oklch(10% 20 30deg), oklch(50% 60 70deg))") is "oklch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg), 25% oklch(50% 60 70deg))") is "oklch(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg), oklch(50% 60 70deg) 25%)") is "oklch(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg) 25%, oklch(50% 60 70deg) 75%)") is "oklch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg) 30%, oklch(50% 60 70deg) 90%)") is "oklch(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg) 12.5%, oklch(50% 60 70deg) 37.5%)") is "oklch(40% 50 60 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg) 0%, oklch(50% 60 70deg))") is "oklch(50% 60 70)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8))") is "oklch(36.666664% 46.666664 50 / 0.6)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4) 25%, oklch(50% 60 70deg / .8))") is "oklch(44.285713% 54.285717 60 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in oklch, 25% oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8))") is "oklch(44.285713% 54.285717 60 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), 25% oklch(50% 60 70deg / .8))") is "oklch(26% 36 40 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg / .4), oklch(50% 60 70deg / .8) 25%)") is "oklch(26% 36 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(44.285713% 54.285717 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(44.285713% 54.285717 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(44.285713% 54.285717 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)" |
| -> 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) -10%, oklch(50% 60 70deg))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg) 150%, oklch(50% 60 70deg))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in oklch, oklch(10% 20 30deg) 0%, oklch(50% 60 70deg) 0%)") is "rgba(0, 0, 0, 0)" |
| 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, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30), lab(50% 60 70))") is "lab(30% 40 50)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) 25%, lab(50% 60 70))") is "lab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lab, 25% lab(10% 20 30), lab(50% 60 70))") is "lab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30), 25% lab(50% 60 70))") is "lab(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30), lab(50% 60 70) 25%)") is "lab(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) 25%, lab(50% 60 70) 75%)") is "lab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) 30%, lab(50% 60 70) 90%)") is "lab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) 12.5%, lab(50% 60 70) 37.5%)") is "lab(40% 50 60 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) 0%, lab(50% 60 70))") is "lab(50% 60 70)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4), lab(50% 60 70 / .8))") is "lab(36.666664% 46.666664 56.666664 / 0.6)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 25%, lab(50% 60 70 / .8))") is "lab(44.285713% 54.285717 64.28571 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in lab, 25% lab(10% 20 30 / .4), lab(50% 60 70 / .8))") is "lab(44.285713% 54.285717 64.28571 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4), 25% lab(50% 60 70 / .8))") is "lab(26% 36 46 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4), lab(50% 60 70 / .8) 25%)") is "lab(26% 36 46 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 25%, lab(50% 60 70 / .8) 75%)") is "lab(44.285713% 54.285717 64.28571 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30 / .4) 30%, lab(50% 60 70 / .8) 90%)") is "lab(44.285713% 54.285717 64.28571 / 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(44.285713% 54.285717 64.28571 / 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)" |
| -> Invalid examples |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) -10%, lab(50% 60 70))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) 150%, lab(50% 60 70))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in lab, lab(10% 20 30) 0%, lab(50% 60 70) 0%)") is "rgba(0, 0, 0, 0)" |
| 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, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30), oklab(50% 60 70))") is "oklab(30% 40 50)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) 25%, oklab(50% 60 70))") is "oklab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklab, 25% oklab(10% 20 30), oklab(50% 60 70))") is "oklab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30), 25% oklab(50% 60 70))") is "oklab(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30), oklab(50% 60 70) 25%)") is "oklab(20% 30 40)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) 25%, oklab(50% 60 70) 75%)") is "oklab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) 30%, oklab(50% 60 70) 90%)") is "oklab(40% 50 60)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) 12.5%, oklab(50% 60 70) 37.5%)") is "oklab(40% 50 60 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) 0%, oklab(50% 60 70))") is "oklab(50% 60 70)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), oklab(50% 60 70 / .8))") is "oklab(36.666664% 46.666664 56.666664 / 0.6)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 25%, oklab(50% 60 70 / .8))") is "oklab(44.285713% 54.285717 64.28571 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in oklab, 25% oklab(10% 20 30 / .4), oklab(50% 60 70 / .8))") is "oklab(44.285713% 54.285717 64.28571 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), 25% oklab(50% 60 70 / .8))") is "oklab(26% 36 46 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4), oklab(50% 60 70 / .8) 25%)") is "oklab(26% 36 46 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 25%, oklab(50% 60 70 / .8) 75%)") is "oklab(44.285713% 54.285717 64.28571 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30 / .4) 30%, oklab(50% 60 70 / .8) 90%)") is "oklab(44.285713% 54.285717 64.28571 / 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(44.285713% 54.285717 64.28571 / 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)" |
| -> Invalid examples |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) -10%, oklab(50% 60 70))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) 150%, oklab(50% 60 70))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in oklab, oklab(10% 20 30) 0%, oklab(50% 60 70) 0%)") is "rgba(0, 0, 0, 0)" |
| 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, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb .5 .6 .7))") is "color(srgb 0.3 0.4 0.5)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) 25%, color(srgb .5 .6 .7))") is "color(srgb 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb, 25% color(srgb .1 .2 .3), color(srgb .5 .6 .7))") is "color(srgb 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3), color(srgb .5 .6 .7) 25%)") is "color(srgb 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3), 25% color(srgb .5 .6 .7))") is "color(srgb 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) 25%, color(srgb .5 .6 .7) 75%)") is "color(srgb 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) 30%, color(srgb .5 .6 .7) 90%)") is "color(srgb 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) 12.5%, color(srgb .5 .6 .7) 37.5%)") is "color(srgb 0.4 0.5 0.6 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) 0%, color(srgb .5 .6 .7))") is "color(srgb 0.5 0.6 0.7)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3 / .5), color(srgb .5 .6 .7 / .8))") is "color(srgb 0.3461539 0.4461539 0.5461539 / 0.65)" |
| 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.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in srgb, 25% color(srgb .1 .2 .3 / .4), color(srgb .5 .6 .7 / .8))") is "color(srgb 0.44285715 0.54285717 0.64285713 / 0.7)" |
| 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.26000002 0.36 0.46 / 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.26000002 0.36 0.46 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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)" |
| -> Invalid examples |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) -10%, color(srgb .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) 150%, color(srgb .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in srgb, color(srgb .1 .2 .3) 0%, color(srgb .5 .6 .7) 0%)") is "rgba(0, 0, 0, 0)" |
| 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 srgb-linear, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))") is "color(srgb-linear 0.3 0.4 0.5)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 25%, color(srgb-linear .5 .6 .7))") is "color(srgb-linear 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, 25% color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7))") is "color(srgb-linear 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), color(srgb-linear .5 .6 .7) 25%)") is "color(srgb-linear 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3), 25% color(srgb-linear .5 .6 .7))") is "color(srgb-linear 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 25%, color(srgb-linear .5 .6 .7) 75%)") is "color(srgb-linear 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 30%, color(srgb-linear .5 .6 .7) 90%)") is "color(srgb-linear 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 12.5%, color(srgb-linear .5 .6 .7) 37.5%)") is "color(srgb-linear 0.4 0.5 0.6 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 0%, color(srgb-linear .5 .6 .7))") is "color(srgb-linear 0.5 0.6 0.7)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .5), color(srgb-linear .5 .6 .7 / .8))") is "color(srgb-linear 0.3461539 0.4461539 0.5461539 / 0.65)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 25%, color(srgb-linear .5 .6 .7 / .8))") is "color(srgb-linear 0.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, 25% color(srgb-linear .1 .2 .3 / .4), color(srgb-linear .5 .6 .7 / .8))") is "color(srgb-linear 0.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4), color(srgb-linear .5 .6 .7 / .8) 25%)") is "color(srgb-linear 0.26000002 0.36 0.46 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4), 25% color(srgb-linear .5 .6 .7 / .8))") is "color(srgb-linear 0.26000002 0.36 0.46 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 25%, color(srgb-linear .5 .6 .7 / .8) 75%)") is "color(srgb-linear 0.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 30%, color(srgb-linear .5 .6 .7 / .8) 90%)") is "color(srgb-linear 0.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 12.5%, color(srgb-linear .5 .6 .7 / .8) 37.5%)") is "color(srgb-linear 0.44285715 0.54285717 0.64285713 / 0.35)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 0%, color(srgb-linear .5 .6 .7 / .8))") is "color(srgb-linear 0.5 0.6 0.7 / 0.8)" |
| -> Invalid examples |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) -10%, color(srgb-linear .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 150%, color(srgb-linear .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3) 0%, color(srgb-linear .5 .6 .7) 0%)") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) -10%, color(srgb-linear .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 150%, color(srgb-linear .5 .6 .7 / .8))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in srgb-linear, color(srgb-linear .1 .2 .3 / .4) 0%, color(srgb-linear .5 .6 .7 / .8) 0%)") is "rgba(0, 0, 0, 0)" |
| |
| color-mix(in xyz, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz .5 .6 .7))") is "color(xyz-d65 0.3 0.4 0.5)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) 25%, color(xyz .5 .6 .7))") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz, 25% color(xyz .1 .2 .3), color(xyz .5 .6 .7))") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3), color(xyz .5 .6 .7) 25%)") is "color(xyz-d65 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3), 25% color(xyz .5 .6 .7))") is "color(xyz-d65 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) 25%, color(xyz .5 .6 .7) 75%)") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) 30%, color(xyz .5 .6 .7) 90%)") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) 12.5%, color(xyz .5 .6 .7) 37.5%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) 0%, color(xyz .5 .6 .7))") is "color(xyz-d65 0.5 0.6 0.7)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3 / .5), color(xyz .5 .6 .7 / .8))") is "color(xyz-d65 0.3461539 0.4461539 0.5461539 / 0.65)" |
| 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.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in xyz, 25% color(xyz .1 .2 .3 / .4), color(xyz .5 .6 .7 / .8))") is "color(xyz-d65 0.44285715 0.54285717 0.64285713 / 0.7)" |
| 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.26000002 0.36 0.46 / 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.26000002 0.36 0.46 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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)" |
| -> Invalid examples |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) -10%, color(xyz .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) 150%, color(xyz .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in xyz, color(xyz .1 .2 .3) 0%, color(xyz .5 .6 .7) 0%)") is "rgba(0, 0, 0, 0)" |
| 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, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))") is "color(xyz-d50 0.3 0.4 0.5)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 25%, color(xyz-d50 .5 .6 .7))") is "color(xyz-d50 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, 25% color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7))") is "color(xyz-d50 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), color(xyz-d50 .5 .6 .7) 25%)") is "color(xyz-d50 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3), 25% color(xyz-d50 .5 .6 .7))") is "color(xyz-d50 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 25%, color(xyz-d50 .5 .6 .7) 75%)") is "color(xyz-d50 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 30%, color(xyz-d50 .5 .6 .7) 90%)") is "color(xyz-d50 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 12.5%, color(xyz-d50 .5 .6 .7) 37.5%)") is "color(xyz-d50 0.4 0.5 0.6 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 0%, color(xyz-d50 .5 .6 .7))") is "color(xyz-d50 0.5 0.6 0.7)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3 / .5), color(xyz-d50 .5 .6 .7 / .8))") is "color(xyz-d50 0.3461539 0.4461539 0.5461539 / 0.65)" |
| 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.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, 25% color(xyz-d50 .1 .2 .3 / .4), color(xyz-d50 .5 .6 .7 / .8))") is "color(xyz-d50 0.44285715 0.54285717 0.64285713 / 0.7)" |
| 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.26000002 0.36 0.46 / 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.26000002 0.36 0.46 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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)" |
| -> Invalid examples |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) -10%, color(xyz-d50 .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 150%, color(xyz-d50 .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d50, color(xyz-d50 .1 .2 .3) 0%, color(xyz-d50 .5 .6 .7) 0%)") is "rgba(0, 0, 0, 0)" |
| 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, ...) |
| -> No Alpha |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))") is "color(xyz-d65 0.3 0.4 0.5)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 25%, color(xyz-d65 .5 .6 .7))") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, 25% color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7))") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), color(xyz-d65 .5 .6 .7) 25%)") is "color(xyz-d65 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3), 25% color(xyz-d65 .5 .6 .7))") is "color(xyz-d65 0.2 0.3 0.4)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 25%, color(xyz-d65 .5 .6 .7) 75%)") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 30%, color(xyz-d65 .5 .6 .7) 90%)") is "color(xyz-d65 0.4 0.5 0.6)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 12.5%, color(xyz-d65 .5 .6 .7) 37.5%)") is "color(xyz-d65 0.4 0.5 0.6 / 0.5)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 0%, color(xyz-d65 .5 .6 .7))") is "color(xyz-d65 0.5 0.6 0.7)" |
| -> Alpha |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3 / .5), color(xyz-d65 .5 .6 .7 / .8))") is "color(xyz-d65 0.3461539 0.4461539 0.5461539 / 0.65)" |
| 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.44285715 0.54285717 0.64285713 / 0.7)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, 25% color(xyz-d65 .1 .2 .3 / .4), color(xyz-d65 .5 .6 .7 / .8))") is "color(xyz-d65 0.44285715 0.54285717 0.64285713 / 0.7)" |
| 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.26000002 0.36 0.46 / 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.26000002 0.36 0.46 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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.44285715 0.54285717 0.64285713 / 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)" |
| -> Invalid examples |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) -10%, color(xyz-d65 .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 150%, color(xyz-d65 .5 .6 .7))") is "rgba(0, 0, 0, 0)" |
| PASS computedStyle("background-color", "color-mix(in xyz-d65, color(xyz-d65 .1 .2 .3) 0%, color(xyz-d65 .5 .6 .7) 0%)") is "rgba(0, 0, 0, 0)" |
| 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 |
| |
