Omit 50% when the other color-mix() percentage is omitted

Author: cdoublev

__tests__/value.js

@@ -3014,9 +3014,13 @@ describe('<color>', () => {
     test('valid <color-mix()>', () => {
         const valid = [
             // Omitted component values
+            ['color-mix(in srgb, red 50%, green)', 'color-mix(in srgb, red, green)'],
+            ['color-mix(in srgb, red, green 50%)', 'color-mix(in srgb, red, green)'],
             ['color-mix(in srgb, red 50%, green 50%)', 'color-mix(in srgb, red, green)'],
             ['color-mix(in srgb, red 51%, green 49%)', 'color-mix(in srgb, red 51%, green)'],
             ['color-mix(in srgb, red 49%, green 51%)', 'color-mix(in srgb, red 49%, green)'],
+            ['color-mix(in srgb, red 49%, green)'],
+            ['color-mix(in srgb, red, green 51%)', 'color-mix(in srgb, red 49%, green)'],
             ['color-mix(in srgb, red 100%, green 100%)'],
             // Preserve channel values except <hue> and <alpha-value>
             ['color-mix(in srgb, rgba(-100% 200% 0 / 101%), hsla(540deg -1% 0 / 50%))', 'color-mix(in srgb, rgb(-255 510 0), hsl(180 -1 0 / 0.5))'],

lib/serialize.js

@@ -331,7 +331,7 @@ function serializeColor({ name, types, value }, specified) {
         c1 = serializeColor(c1, true)
         c2 = serializeColor(c2, true)
         if (isOmitted(p2)) {
-            if (isOmitted(p1)) {
+            if (isOmitted(p1) || (p1.types.includes('<percentage>') && p1.value === 50)) {
                 return `color-mix(${interpolation}, ${c1}, ${c2})`
             }
             return `color-mix(${interpolation}, ${c1} ${serializeCSSComponentValue(p1)}, ${c2})`
@@ -347,6 +347,9 @@ function serializeColor({ name, types, value }, specified) {
                 return `color-mix(${interpolation}, ${c1} ${serializeCSSComponentValue(p1)}, ${c2} ${serializeCSSComponentValue(p2)})`
             }
             if (isOmitted(p1)) {
+                if (p2.value === 50) {
+                    return `color-mix(${interpolation}, ${c1}, ${c2})`
+                }
                 return `color-mix(${interpolation}, ${c1} ${serializeCSSComponentValue({ ...p2, value: 100 - p2.value })}, ${c2})`
             }
             return `color-mix(${interpolation}, ${c1} ${serializeCSSComponentValue(p1)}, ${c2} ${serializeCSSComponentValue(p2)})`