@ccheever/exact-renderer 0.1.0

package/src/__tests__/normalize.test.ts

@@ -0,0 +1,576 @@
+/**
+ * Style Normalization Tests
+ *
+ * Comprehensive tests for the style normalization utilities.
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  parseDimension,
+  parseFontWeight,
+  parseFontVariantNumeric,
+  extractTransforms,
+  normalizeTransition,
+  normalizeStyle,
+  transitionsEqual,
+  stylesEqual,
+} from '../style/normalize.js';
+
+describe('parseDimension', () => {
+  describe('number input', () => {
+    it('should convert numbers to points', () => {
+      expect(parseDimension(100)).toEqual({ type: 'points', value: 100 });
+      expect(parseDimension(0)).toEqual({ type: 'points', value: 0 });
+      expect(parseDimension(50.5)).toEqual({ type: 'points', value: 50.5 });
+    });
+
+    it('should handle negative numbers', () => {
+      expect(parseDimension(-10)).toEqual({ type: 'points', value: -10 });
+    });
+
+    it('should return undefined for non-finite numbers', () => {
+      expect(parseDimension(Infinity)).toBeUndefined();
+      expect(parseDimension(NaN)).toBeUndefined();
+    });
+  });
+
+  describe('string input', () => {
+    it('should parse "auto"', () => {
+      expect(parseDimension('auto')).toEqual({ type: 'auto' });
+    });
+
+    it('should parse percentage strings', () => {
+      expect(parseDimension('50%')).toEqual({ type: 'percent', value: 50 });
+      expect(parseDimension('100%')).toEqual({ type: 'percent', value: 100 });
+      expect(parseDimension('0%')).toEqual({ type: 'percent', value: 0 });
+    });
+
+    it('should parse px strings', () => {
+      expect(parseDimension('100px')).toEqual({ type: 'points', value: 100 });
+      expect(parseDimension('50.5px')).toEqual({ type: 'points', value: 50.5 });
+    });
+
+    it('should parse bare number strings as points', () => {
+      expect(parseDimension('100')).toEqual({ type: 'points', value: 100 });
+      expect(parseDimension('50.5')).toEqual({ type: 'points', value: 50.5 });
+    });
+
+    it('should handle whitespace', () => {
+      expect(parseDimension('  100  ')).toEqual({ type: 'points', value: 100 });
+      expect(parseDimension('  auto  ')).toEqual({ type: 'auto' });
+    });
+
+    it('should return undefined for invalid strings', () => {
+      expect(parseDimension('invalid')).toBeUndefined();
+      expect(parseDimension('abc%')).toBeUndefined();
+    });
+  });
+
+  describe('object input', () => {
+    it('should pass through valid dimension objects', () => {
+      expect(parseDimension({ type: 'auto' })).toEqual({ type: 'auto' });
+      expect(parseDimension({ type: 'points', value: 100 })).toEqual({ type: 'points', value: 100 });
+      expect(parseDimension({ type: 'percent', value: 50 })).toEqual({ type: 'percent', value: 50 });
+    });
+  });
+
+  describe('undefined/null input', () => {
+    it('should return undefined for undefined', () => {
+      expect(parseDimension(undefined)).toBeUndefined();
+    });
+
+    it('should return undefined for null', () => {
+      expect(parseDimension(null as any)).toBeUndefined();
+    });
+  });
+});
+
+describe('parseFontWeight', () => {
+  it('should parse numeric weights', () => {
+    expect(parseFontWeight(400)).toBe(400);
+    expect(parseFontWeight(700)).toBe(700);
+    expect(parseFontWeight(100)).toBe(100);
+    expect(parseFontWeight(900)).toBe(900);
+  });
+
+  it('should parse string keywords', () => {
+    expect(parseFontWeight('normal')).toBe(400);
+    expect(parseFontWeight('bold')).toBe(700);
+  });
+
+  it('should parse string numbers', () => {
+    expect(parseFontWeight('400')).toBe(400);
+    expect(parseFontWeight('700')).toBe(700);
+  });
+
+  it('should return undefined for invalid values', () => {
+    expect(parseFontWeight(50)).toBeUndefined();
+    expect(parseFontWeight(1000)).toBeUndefined();
+    expect(parseFontWeight('invalid')).toBeUndefined();
+  });
+
+  it('should return undefined for undefined/null', () => {
+    expect(parseFontWeight(undefined)).toBeUndefined();
+    expect(parseFontWeight(null as any)).toBeUndefined();
+  });
+});
+
+describe('parseFontVariantNumeric', () => {
+  it('encodes combinable numeric variants into a bitmask', () => {
+    expect(parseFontVariantNumeric('tabular-nums slashed-zero')).toBe(0x11);
+  });
+
+  it('uses last-token-wins semantics for conflicting spacing values', () => {
+    expect(parseFontVariantNumeric('tabular-nums proportional-nums')).toBe(0x02);
+    expect(parseFontVariantNumeric('proportional-nums tabular-nums')).toBe(0x01);
+  });
+
+  it('uses last-token-wins semantics for conflicting number-case values', () => {
+    expect(parseFontVariantNumeric('oldstyle-nums lining-nums')).toBe(0x04);
+    expect(parseFontVariantNumeric('lining-nums oldstyle-nums')).toBe(0x08);
+  });
+
+  it('treats normal as a reset', () => {
+    expect(parseFontVariantNumeric('tabular-nums normal slashed-zero')).toBe(0x10);
+  });
+});
+
+describe('extractTransforms', () => {
+  it('should extract translateX', () => {
+    const result = extractTransforms([{ translateX: 10 }]);
+    expect(result.x).toBe(10);
+  });
+
+  it('should extract translateY', () => {
+    const result = extractTransforms([{ translateY: 20 }]);
+    expect(result.y).toBe(20);
+  });
+
+  it('should extract scale', () => {
+    const result = extractTransforms([{ scale: 2 }]);
+    expect(result.scale).toBe(2);
+  });
+
+  it('should extract rotate in degrees', () => {
+    const result = extractTransforms([{ rotate: '90deg' }]);
+    expect(result.rotate).toBeCloseTo(Math.PI / 2);
+  });
+
+  it('should extract rotate in radians', () => {
+    const result = extractTransforms([{ rotate: '1.57rad' }]);
+    expect(result.rotate).toBeCloseTo(1.57);
+  });
+
+  it('should assume degrees if no unit', () => {
+    const result = extractTransforms([{ rotate: '180' }]);
+    expect(result.rotate).toBeCloseTo(Math.PI);
+  });
+
+  it('should handle multiple transforms', () => {
+    const result = extractTransforms([
+      { translateX: 10 },
+      { translateY: 20 },
+      { scale: 2 },
+      { rotate: '45deg' },
+    ]);
+    expect(result.x).toBe(10);
+    expect(result.y).toBe(20);
+    expect(result.scale).toBe(2);
+    expect(result.rotate).toBeCloseTo(Math.PI / 4);
+  });
+
+  it('should return empty object for undefined/null', () => {
+    expect(extractTransforms(undefined)).toEqual({});
+    expect(extractTransforms(null as any)).toEqual({});
+  });
+});
+
+describe('normalizeStyle', () => {
+  describe('dimensions', () => {
+    it('should normalize width and height', () => {
+      const result = normalizeStyle({ width: 100, height: 200 });
+      expect(result.width).toEqual({ type: 'points', value: 100 });
+      expect(result.height).toEqual({ type: 'points', value: 200 });
+    });
+
+    it('should normalize min/max dimensions', () => {
+      const result = normalizeStyle({
+        minWidth: 50,
+        maxWidth: 500,
+        minHeight: 100,
+        maxHeight: 1000,
+      });
+      expect(result.minWidth).toEqual({ type: 'points', value: 50 });
+      expect(result.maxWidth).toEqual({ type: 'points', value: 500 });
+      expect(result.minHeight).toEqual({ type: 'points', value: 100 });
+      expect(result.maxHeight).toEqual({ type: 'points', value: 1000 });
+    });
+  });
+
+  describe('padding', () => {
+    it('should normalize padding shorthand', () => {
+      const result = normalizeStyle({ padding: 10 });
+      expect(result.paddingTop).toEqual({ type: 'points', value: 10 });
+      expect(result.paddingRight).toEqual({ type: 'points', value: 10 });
+      expect(result.paddingBottom).toEqual({ type: 'points', value: 10 });
+      expect(result.paddingLeft).toEqual({ type: 'points', value: 10 });
+    });
+
+    it('should normalize paddingVertical/paddingHorizontal', () => {
+      const result = normalizeStyle({ paddingVertical: 10, paddingHorizontal: 20 });
+      expect(result.paddingTop).toEqual({ type: 'points', value: 10 });
+      expect(result.paddingBottom).toEqual({ type: 'points', value: 10 });
+      expect(result.paddingRight).toEqual({ type: 'points', value: 20 });
+      expect(result.paddingLeft).toEqual({ type: 'points', value: 20 });
+    });
+
+    it('should let specific padding override shorthand', () => {
+      const result = normalizeStyle({ padding: 10, paddingTop: 20 });
+      expect(result.paddingTop).toEqual({ type: 'points', value: 20 });
+      expect(result.paddingRight).toEqual({ type: 'points', value: 10 });
+    });
+  });
+
+  describe('margin', () => {
+    it('should normalize margin shorthand', () => {
+      const result = normalizeStyle({ margin: 10 });
+      expect(result.marginTop).toEqual({ type: 'points', value: 10 });
+      expect(result.marginRight).toEqual({ type: 'points', value: 10 });
+      expect(result.marginBottom).toEqual({ type: 'points', value: 10 });
+      expect(result.marginLeft).toEqual({ type: 'points', value: 10 });
+    });
+  });
+
+  describe('direction and logical properties', () => {
+    it('normalizes explicit direction and writingMode', () => {
+      const result = normalizeStyle(
+        { direction: 'rtl', writingMode: 'vertical-rl' },
+        'row',
+        { includeInheritedValues: true },
+      );
+
+      expect(result.direction).toBe('rtl');
+      expect(result.writingMode).toBe('vertical-rl');
+    });
+
+    it('resolves logical spacing and inset props in ltr', () => {
+      const result = normalizeStyle(
+        {
+          marginStart: 8,
+          paddingEnd: 12,
+          start: 4,
+        },
+        'row',
+        { resolvedDirection: 'ltr' },
+      );
+
+      expect(result.marginLeft).toEqual({ type: 'points', value: 8 });
+      expect(result.paddingRight).toEqual({ type: 'points', value: 12 });
+      expect(result.left).toEqual({ type: 'points', value: 4 });
+    });
+
+    it('resolves logical spacing and inset props in rtl', () => {
+      const result = normalizeStyle(
+        {
+          marginStart: 8,
+          paddingEnd: 12,
+          end: 4,
+        },
+        'row',
+        { resolvedDirection: 'rtl' },
+      );
+
+      expect(result.marginRight).toEqual({ type: 'points', value: 8 });
+      expect(result.paddingLeft).toEqual({ type: 'points', value: 12 });
+      expect(result.left).toEqual({ type: 'points', value: 4 });
+    });
+
+    it('resolves inline logical props against vertical writing modes', () => {
+      const result = normalizeStyle(
+        {
+          writingMode: 'vertical-rl',
+          paddingInlineStart: 10,
+          marginInlineEnd: 5,
+          insetInlineStart: 7,
+        },
+        'row',
+        {
+          resolvedDirection: 'ltr',
+          resolvedWritingMode: 'vertical-rl',
+        },
+      );
+
+      expect(result.paddingTop).toEqual({ type: 'points', value: 10 });
+      expect(result.marginBottom).toEqual({ type: 'points', value: 5 });
+      expect(result.top).toEqual({ type: 'points', value: 7 });
+      expect(result.paddingLeft).toBeUndefined();
+      expect(result.marginRight).toBeUndefined();
+      expect(result.left).toBeUndefined();
+    });
+
+    it('lets physical props override logical props', () => {
+      const result = normalizeStyle(
+        {
+          marginStart: 8,
+          marginLeft: 20,
+          paddingEnd: 12,
+          paddingRight: 16,
+        },
+        'row',
+        { resolvedDirection: 'ltr' },
+      );
+
+      expect(result.marginLeft).toEqual({ type: 'points', value: 20 });
+      expect(result.paddingRight).toEqual({ type: 'points', value: 16 });
+    });
+  });
+
+  describe('flexbox', () => {
+    it('should normalize flex shorthand', () => {
+      const result = normalizeStyle({ flex: 1 });
+      expect(result.flexGrow).toBe(1);
+      expect(result.flexShrink).toBe(1);
+    });
+
+    it('should let specific flex props override shorthand', () => {
+      const result = normalizeStyle({ flex: 1, flexGrow: 2, flexShrink: 0 });
+      expect(result.flexGrow).toBe(2);
+      expect(result.flexShrink).toBe(0);
+    });
+
+    it('should normalize flexDirection', () => {
+      const result = normalizeStyle({ flexDirection: 'column' });
+      expect(result.flexDirection).toBe('column');
+    });
+
+    it('should apply default flexDirection for RN style', () => {
+      const result = normalizeStyle({}, 'column');
+      expect(result.flexDirection).toBe('column');
+    });
+
+    it('should not include flexDirection for web default', () => {
+      const result = normalizeStyle({}, 'row');
+      expect(result.flexDirection).toBeUndefined();
+    });
+
+    it('should normalize gap', () => {
+      const result = normalizeStyle({ gap: 10 });
+      expect(result.rowGap).toBe(10);
+      expect(result.columnGap).toBe(10);
+    });
+  });
+
+  describe('appearance', () => {
+    it('should normalize backgroundColor', () => {
+      const result = normalizeStyle({ backgroundColor: '#ff0000' });
+      expect(result.backgroundColor).toEqual({ r: 255, g: 0, b: 0, a: 255 });
+    });
+
+    it('should clamp opacity to 0-1', () => {
+      expect(normalizeStyle({ opacity: -0.5 }).opacity).toBe(0);
+      expect(normalizeStyle({ opacity: 0.5 }).opacity).toBe(0.5);
+      expect(normalizeStyle({ opacity: 1.5 }).opacity).toBe(1);
+    });
+
+    it('should normalize borderRadius', () => {
+      const result = normalizeStyle({ borderRadius: 10 });
+      expect(result.borderRadius).toBe(10);
+    });
+
+    it('should normalize borderRadius to non-negative', () => {
+      const result = normalizeStyle({ borderRadius: -5 });
+      expect(result.borderRadius).toBe(0);
+    });
+
+    it('should normalize boxShadow into canonical shadow properties', () => {
+      const result = normalizeStyle({ boxShadow: '0px 6px 18px rgba(44, 36, 22, 0.14)' });
+      expect(result.shadowColor).toEqual({ r: 44, g: 36, b: 22, a: 255 });
+      expect(result.shadowOpacity).toBeCloseTo(0.14);
+      expect(result.shadowOffsetX).toBe(0);
+      expect(result.shadowOffsetY).toBe(6);
+      expect(result.shadowRadius).toBe(18);
+    });
+
+    it('should let explicit shadow props override boxShadow values', () => {
+      const result = normalizeStyle({
+        boxShadow: '0px 6px 18px rgba(44, 36, 22, 0.14)',
+        shadowColor: '#5ad1ab',
+        shadowOffset: { width: 2, height: 8 },
+        shadowRadius: 12,
+        shadowOpacity: 0.2,
+      });
+      expect(result.shadowColor).toEqual({ r: 90, g: 209, b: 171, a: 255 });
+      expect(result.shadowOpacity).toBe(0.2);
+      expect(result.shadowOffsetX).toBe(2);
+      expect(result.shadowOffsetY).toBe(8);
+      expect(result.shadowRadius).toBe(12);
+    });
+  });
+
+  describe('typography', () => {
+    it('should normalize fontSize', () => {
+      const result = normalizeStyle({ fontSize: 16 });
+      expect(result.fontSize).toBe(16);
+    });
+
+    it('should normalize color to textColor', () => {
+      const result = normalizeStyle({ color: '#ffffff' });
+      expect(result.textColor).toEqual({ r: 255, g: 255, b: 255, a: 255 });
+    });
+
+    it('should normalize fontWeight string', () => {
+      const result = normalizeStyle({ fontWeight: 'bold' });
+      expect(result.fontWeight).toBe(700);
+    });
+
+    it('should normalize built-in font families', () => {
+      const result = normalizeStyle({ fontFamily: 'ui-monospace' });
+      expect(result.fontFamily).toBe(2);
+    });
+
+    it('should preserve textAlign auto for RTL support', () => {
+      const result = normalizeStyle({ textAlign: 'auto' });
+      expect(result.textAlign).toBe('auto');
+    });
+
+    it('should preserve italic fontStyle', () => {
+      const result = normalizeStyle({ fontStyle: 'italic' });
+      expect(result.fontStyle).toBe('italic');
+    });
+
+    it('should normalize fontVariantNumeric to a protocol bitmask', () => {
+      const result = normalizeStyle({ fontVariantNumeric: 'tabular-nums slashed-zero' });
+      expect(result.fontVariantNumeric).toBe(0x11);
+    });
+
+    it('should preserve textDecorationLine values', () => {
+      const result = normalizeStyle({ textDecorationLine: 'underline line-through' });
+      expect(result.textDecorationLine).toBe('underline line-through');
+    });
+  });
+
+  describe('empty style', () => {
+    it('should return empty object for undefined', () => {
+      const result = normalizeStyle(undefined);
+      expect(result).toEqual({});
+    });
+
+    it('should return empty object for empty style', () => {
+      const result = normalizeStyle({});
+      expect(result).toEqual({});
+    });
+  });
+});
+
+describe('normalizeTransition', () => {
+  it('should normalize object timing transitions', () => {
+    expect(
+      normalizeTransition({
+        opacity: { type: 'timing', duration: 180, easing: 'easeOut' },
+      })
+    ).toEqual({
+      opacity: {
+        type: 'timing',
+        duration: 180,
+        delay: 0,
+        easing: 'easeOut',
+        respectsReducedMotion: true,
+      },
+    });
+  });
+
+  it('should normalize object spring transitions', () => {
+    expect(
+      normalizeTransition({
+        transform: { type: 'spring', damping: 18, stiffness: 240, mass: 1.2, velocity: 0.3, delay: 20 },
+      })
+    ).toEqual({
+      transform: {
+        type: 'spring',
+        duration: undefined,
+        delay: 20,
+        damping: 18,
+        stiffness: 240,
+        mass: 1.2,
+        velocity: 0.3,
+        respectsReducedMotion: true,
+      },
+    });
+  });
+
+  it('should normalize string shorthand transitions', () => {
+    expect(normalizeTransition('opacity 180ms ease-out, transform 220ms spring(damping: 16, stiffness: 220)')).toEqual({
+      opacity: {
+        type: 'timing',
+        duration: 180,
+        delay: 0,
+        easing: 'easeOut',
+        respectsReducedMotion: true,
+      },
+      transform: {
+        type: 'spring',
+        duration: 220,
+        delay: 0,
+        damping: 16,
+        stiffness: 220,
+        mass: 1,
+        velocity: 0,
+        respectsReducedMotion: true,
+      },
+    });
+  });
+
+  it('should ignore invalid entries and none shorthand', () => {
+    expect(normalizeTransition('none')).toEqual({});
+    expect(normalizeTransition('opacity nope, width 100ms linear')).toEqual({});
+  });
+});
+
+describe('transitionsEqual', () => {
+  it('should treat equivalent timing maps as equal', () => {
+    const a = normalizeTransition({
+      opacity: { type: 'timing', duration: 180, easing: 'easeOut' },
+    });
+    const b = normalizeTransition('opacity 180ms ease-out');
+    expect(transitionsEqual(a, b)).toBe(true);
+  });
+
+  it('should detect transition differences', () => {
+    const a = normalizeTransition('opacity 180ms ease-out');
+    const b = normalizeTransition('opacity 200ms ease-out');
+    expect(transitionsEqual(a, b)).toBe(false);
+  });
+});
+
+describe('stylesEqual', () => {
+  it('should return true for identical objects', () => {
+    const style = { width: { type: 'points' as const, value: 100 } };
+    expect(stylesEqual(style, style)).toBe(true);
+  });
+
+  it('should return true for equal styles', () => {
+    const a = { width: { type: 'points' as const, value: 100 } };
+    const b = { width: { type: 'points' as const, value: 100 } };
+    expect(stylesEqual(a, b)).toBe(true);
+  });
+
+  it('should return false for different styles', () => {
+    const a = { width: { type: 'points' as const, value: 100 } };
+    const b = { width: { type: 'points' as const, value: 200 } };
+    expect(stylesEqual(a, b)).toBe(false);
+  });
+
+  it('should return false for different key counts', () => {
+    const a = { width: { type: 'points' as const, value: 100 } };
+    const b = { width: { type: 'points' as const, value: 100 }, height: { type: 'points' as const, value: 100 } };
+    expect(stylesEqual(a, b)).toBe(false);
+  });
+
+  it('should compare RGBA colors correctly', () => {
+    const a = { backgroundColor: { r: 255, g: 0, b: 0, a: 255 } };
+    const b = { backgroundColor: { r: 255, g: 0, b: 0, a: 255 } };
+    const c = { backgroundColor: { r: 0, g: 255, b: 0, a: 255 } };
+    expect(stylesEqual(a, b)).toBe(true);
+    expect(stylesEqual(a, c)).toBe(false);
+  });
+});