Fix parsing gradients and linear()

Gradient color stops specified with two positions, or linear() control
points specified with two input progress values, should be normalized
into two two color stops or control points (w3c/csswg-drafts#9288).

Author: cdoublev

__tests__/value.js

@@ -3574,6 +3574,10 @@ describe('<gradient>', () => {
             ['radial-gradient(at center, red)', 'radial-gradient(at center center, red)'],
             ['radial-gradient(at center center, red)'],
             ['radial-gradient(in oklab, red)', 'radial-gradient(red)'],
+            // Implicit color stops
+            ['conic-gradient(red 0deg 180deg)', 'conic-gradient(red 0deg, red 180deg)'],
+            ['linear-gradient(red 0% 50%)', 'linear-gradient(red 0%, red 50%)'],
+            ['radial-gradient(red 0% 50%)', 'radial-gradient(red 0%, red 50%)'],
         ]
         valid.forEach(([input, expected = input]) => expect(parse('<gradient>', input)).toBe(expected))
     })
@@ -3733,6 +3737,18 @@ describe('<line-names>', () => {
         })
     })
 })
+describe('<linear()>', () => {
+    test('representation', () => {
+        expect(parse('<linear()>', 'linear(1)', false)).toMatchObject({
+            name: 'linear',
+            types: ['<function>', '<linear()>'],
+            value: list([list([number(1), list()])], ','),
+        })
+    })
+    test('valid', () => {
+        expect(parse('<linear()>', 'linear(0 0% 50%)')).toBe('linear(0 0%, 0 50%)')
+    })
+})
 describe('<media-type>', () => {
     test('invalid', () => {
         const invalid = [

lib/serialize.js

@@ -391,6 +391,25 @@ function serializeColor({ name, types, value }, mixed = false) {
     return `${name}(${value.join(' ')})`
 }
 
+/**
+ * @param {object[]} stop
+ * @param {object} node
+ * @returns {object[]}
+ * @see {@link https://drafts.csswg.org/css-images-4/#typedef-angular-color-stop}
+ * @see {@link https://drafts.csswg.org/css-images-4/#typedef-linear-color-stop}
+ */
+function serializeColorStop([color, position]) {
+    color = serializeCSSComponentValue(color)
+    if (isOmitted(position)) {
+        return color
+    }
+    if (position.length === 2) {
+        const [p1, p2] = position.map(serializeCSSComponentValue)
+        return `${color} ${p1}, ${color} ${p2}`
+    }
+    return `${color} ${serializeCSSComponentValue(position)}`
+}
+
 /**
  * @param {object[]} stripe
  * @returns {string}
@@ -780,6 +799,28 @@ function serializeLineNameList(list) {
     }).join(' ')
 }
 
+/**
+ * @param {object} linear
+ * @returns {string}
+ * @see {@link https://drafts.csswg.org/css-easing-2/#funcdef-linear}
+ */
+function serializeLinear({ value }) {
+    let string = 'linear('
+    for (const [output, input] of value) {
+        const [x, x2] = input.map(serializeCSSComponentValue)
+        const y = serializeCSSComponentValue(output)
+        string += y
+        if (x) {
+            string += ` ${x}`
+            if(x2) {
+                string += `, ${y} ${x2}`
+            }
+        }
+    }
+    string += ')'
+    return string
+}
+
 /**
  * @param {object[]} gradient
  * @returns {string}
@@ -1427,6 +1468,9 @@ function serializeCSSComponentValue(component) {
                 return serializeAlpha(component)
             case '<an+b>':
                 return serializeAnB(component)
+            case '<angular-color-stop>':
+            case '<linear-color-stop>':
+                return serializeColorStop(component)
             case '<attr()>':
                 return serializeAttribute(component)
             case '<arc-command>':
@@ -1496,6 +1540,8 @@ function serializeCSSComponentValue(component) {
                 return serializeLineNames(component)
             case '<line-name-list>':
                 return serializeLineNameList(component)
+            case '<linear()>':
+                return serializeLinear(component)
             case '<linear-gradient-syntax>':
                 return serializeLinearGradientSyntax(component)
             case '<math-function>':