Add support text-decoration-skip shorthand

Author: cdoublev

__tests__/style.js

@@ -3543,8 +3543,28 @@ describe('text-decoration', () => {
     })
 })
 describe('text-decoration-skip', () => {
-    it.todo('parses longhand declarations from a shorthand value')
-    it.todo('serializes a shorthand value from the declarations for its longhands')
+    test('expansion and reification', () => {
+
+        const style = createStyleBlock()
+        const longhands = shorthands.get('text-decoration-skip')[0]
+
+        // All equal longhand values
+        style.textDecorationSkip = 'auto'
+        expect(style).toHaveLength(longhands.length)
+        longhands.forEach(longhand => expect(style[longhand]).toBe(initial(longhand)))
+        expect(style.textDecorationSkip).toBe('auto')
+
+        // none
+        style.textDecorationSkip = 'none'
+        longhands.forEach(longhand =>
+            expect(style[longhand]).toBe(longhand === 'text-decoration-skip-self' ? 'no-skip' : 'none'))
+        expect(style.textDecorationSkip).toBe('none')
+
+        // All longhands cannot be represented
+        style.textDecorationSkipSelf = 'skip-all'
+        expect(style.textDecorationSkip).toBe('')
+        expect(style.cssText).toBe('text-decoration-skip-self: skip-all; text-decoration-skip-box: none; text-decoration-skip-spaces: none; text-decoration-skip-ink: none;')
+    })
 })
 describe('text-emphasis', () => {
     test('expansion and reification', () => {

lib/parse/shorthand.js

@@ -867,6 +867,20 @@ function parseTextBox(values, longhands) {
     return getInitialLonghandDeclarations(longhands)
 }
 
+/**
+ * @param {object} value
+ * @param {Map} longhands
+ * @see {@link https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-skip}
+ */
+function parseTextDecorationSkip(value, longhands) {
+    if (value.value === 'auto') {
+        return getInitialLonghandDeclarations(longhands)
+    }
+    const declarations = setLonghands(value, longhands)
+    declarations.set('text-decoration-skip-self', keyword('no-skip', ['text-decoration-skip-self']))
+    return declarations
+}
+
 /**
  * @param {object|object[]} values
  * @param {string[]} longhands
@@ -1081,6 +1095,8 @@ function parse(value, name, subProperties) {
             return parseTextAlign(value, longhands)
         case 'text-box':
             return parseTextBox(value, longhands)
+        case 'text-decoration-skip':
+            return parseTextDecorationSkip(value, longhands)
         case 'text-spacing':
             return parseTextSpacing(value, longhands)
         case 'transition':

lib/serialize.js

@@ -3130,6 +3130,23 @@ function representTextBox(declarations) {
     return [trim, edge]
 }
 
+/**
+ * @param {object[]} declarations
+ * @returns {string[]}
+ * @see {@link https://drafts.csswg.org/css-text-decor-4/#propdef-text-decoration-skip}
+ */
+function representTextDecorationSkip(declarations, longhands) {
+    const values = declarations.map(serializeValue)
+    if (values.every((value, i) => value === properties[longhands[i]].initial.serialized)) {
+        return ['auto']
+    }
+    const [self, ...tail] = values
+    if (self === 'no-skip' && tail.every(value => value === 'none')) {
+        return ['none']
+    }
+    return ['']
+}
+
 /**
  * @param {object[]} position
  * @returns {object[]}
@@ -3530,6 +3547,8 @@ function representDeclarationValue({ name, pending, source, value }) {
                 return representTextAlign(declarations)
             case 'text-box':
                 return representTextBox(declarations)
+            case 'text-decoration-skip':
+                return representTextDecorationSkip(declarations, longhands)
             case 'text-spacing':
                 return representTextSpacing(declarations)
             case 'transition':