Fix two correctness bugs in style-value-parser (shorthand hex + border-radius)

packages/style-value-parser/src/css-types/__tests__/color-test.js

@@ -27,6 +27,21 @@ describe('Test CSS Type: <color>', () => {
     expect(Color.parser.parse('#ffffff')).toEqual(new HashColor('ffffff'));
   });
 
+  test('hash color channel getters expand 3-digit shorthand', () => {
+    // The parser accepts 3-digit shorthand hex, so the channel getters must
+    // expand each digit (#f0a === #ff00aa) rather than slicing fixed windows.
+    expect(Color.parser.parse('#f0a')).toEqual(new HashColor('f0a'));
+    const short = new HashColor('f0a');
+    expect(short.r).toBe(255);
+    expect(short.g).toBe(0);
+    expect(short.b).toBe(170);
+    expect(short.a).toBe(1);
+    // Full-length hex (with and without alpha) is unaffected.
+    const full = new HashColor('ff00aa');
+    expect([full.r, full.g, full.b]).toEqual([255, 0, 170]);
+    expect(new HashColor('ff00aa80').a).toBeCloseTo(128 / 255);
+  });
+
   test('parses RGB values', () => {
     expect(Color.parser.parse('rgb(255, 0, 0)')).toEqual(new Rgb(255, 0, 0));
     expect(Color.parser.parse('rgb(0, 255, 0)')).toEqual(new Rgb(0, 255, 0));

packages/style-value-parser/src/css-types/color.js

@@ -208,22 +208,32 @@ export class HashColor extends Color {
     return `#${this.value}`;
   }
 
+  // Expand 3-digit shorthand (e.g. 'f0a' -> 'ff00aa') so the channel getters
+  // can slice fixed 2-char windows. 6- and 8-digit values are returned as-is.
+  #expanded(): string {
+    return this.value.length === 3
+      ? this.value
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : this.value;
+  }
+
   get r(): number {
-    return parseInt(this.value.slice(0, 2), 16);
+    return parseInt(this.#expanded().slice(0, 2), 16);
   }
 
   get g(): number {
-    return parseInt(this.value.slice(2, 4), 16);
+    return parseInt(this.#expanded().slice(2, 4), 16);
   }
 
   get b(): number {
-    return parseInt(this.value.slice(4, 6), 16);
+    return parseInt(this.#expanded().slice(4, 6), 16);
   }
 
   get a(): number {
-    return this.value.length === 8
-      ? parseInt(this.value.slice(6, 8), 16) / 255
-      : 1;
+    const value = this.#expanded();
+    return value.length === 8 ? parseInt(value.slice(6, 8), 16) / 255 : 1;
   }
 
   static get parser(): TokenParser<HashColor> {

packages/style-value-parser/src/properties/__tests__/border-radius.test.js

@@ -240,6 +240,23 @@ describe('Test CSS property shorthand: `border-radius`', () => {
     );
   });
 
+  test('toString: distinct vertical radii are not overwritten by horizontal', () => {
+    // Horizontal group collapses to a single value (all 5px); the vertical
+    // group is fully asymmetric (1/2/3/4), so it must be serialized as-is and
+    // not fall back to the horizontal values.
+    const radius = new BorderRadiusShorthand(
+      new Length(5, 'px'),
+      new Length(5, 'px'),
+      new Length(5, 'px'),
+      new Length(5, 'px'),
+      new Length(1, 'px'),
+      new Length(2, 'px'),
+      new Length(3, 'px'),
+      new Length(4, 'px'),
+    );
+    expect(radius.toString()).toBe('5px / 1px 2px 3px 4px');
+  });
+
   test('Valid: border-radius: <length-percentage> <length-percentage> / <length-percentage> <length-percentage>', () => {
     expect(
       BorderRadiusShorthand.parse.parseToEnd('10px 20px / 30px 40px'),

packages/style-value-parser/src/properties/border-radius.js

@@ -106,7 +106,7 @@ export class BorderRadiusShorthand {
     const verticalBottomRight = this.verticalBottomRight.toString();
     const verticalBottomLeft = this.verticalBottomLeft.toString();
 
-    let sStr = `${horizontalTopLeft} ${horizontalTopRight} ${horizontalBottomRight} ${horizontalBottomLeft}`;
+    let sStr = `${verticalTopLeft} ${verticalTopRight} ${verticalBottomRight} ${verticalBottomLeft}`;
     // All three are the same
     if (
       verticalTopLeft === verticalTopRight &&