test: computed calc()

cdoublev · Jun 14, 2021 · 3fff0e9 · 3fff0e9
1 parent 97b3f29
commit 3fff0e9
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 10 deletions.
diff --git a/lib/CSSStyleDeclaration.test.js b/lib/CSSStyleDeclaration.test.js
@@ -259,12 +259,6 @@ describe('CSSStyleDeclaration', () => {
     expect(style.getPropertyValue('--fOo')).toBe('purple');
   });
 
-  test('supports calc', () => {
-    const style = new CSSStyleDeclaration();
-    style.setProperty('width', 'calc(100% - 100px)');
-    expect(style.getPropertyValue('width')).toBe('calc(100% - 100px)');
-  });
-
   // Can be removed (already covered by parsers.test.js)
 
   test('colors', () => {

diff --git a/lib/parsers.test.js b/lib/parsers.test.js
@@ -3,23 +3,81 @@
 const parsers = require('./parsers');
 
 describe('parseInteger', () => {
-  it.todo('test');
+  it('works with calc', () => {
+    expect(parsers.parseInteger('calc(1 + 1)')).toBe('2');
+  });
+  it.todo('more tests');
 });
 describe('parseNumber', () => {
-  it.todo('test');
+  it('works with calc', () => {
+    expect(parsers.parseNumber('calc(1.5 + 1.5)')).toBe('3');
+  });
+  it.todo('more tests');
 });
 describe('parseLength', () => {
-  it.todo('test');
+  it('works with calc', () => {
+    expect(parsers.parseLength('calc(1px + 1px)')).toBe('calc(2px)');
+  });
+  it.todo('more tests');
 });
 describe('parsePercent', () => {
-  it.todo('test');
+  it('works with calc', () => {
+    expect(parsers.parsePercent('calc(1% + 1%)')).toBe('calc(2%)');
+  });
+  it.todo('more tests');
 });
 describe('parseMeasurement', () => {
   it.todo('test');
 });
 describe('parseAngle', () => {
+  it('works with calc', () => {
+    expect(parsers.parseAngle('calc(1deg + 1deg)')).toBe('calc(2deg)');
+  });
   it.todo('test');
 });
+describe('parseTime', () => {
+  it('works with calc', () => {
+    expect(parsers.parseTime('calc(1s + 1s)')).toBe('calc(2s)');
+  });
+  it.todo('more tests');
+});
+describe('parseCalc', () => {
+  const resolveAngle = v => parsers.parseAngle(v, true);
+  const resolveLengthOrPercentage = v => parsers.parseLengthOrPercentage(v, true);
+  const resolveTime = v => parsers.parseTime(v, true);
+  it('returns null with 0 and <dimension-percentage> as operands', () => {
+    expect(parsers.parseCalc('calc(0 + 1px)', resolveLengthOrPercentage)).toBeNull();
+    expect(parsers.parseCalc('calc(1% * 1px)', resolveLengthOrPercentage)).toBeNull();
+  });
+  it('parses a single operand', () => {
+    expect(parsers.parseCalc('calc(1)')).toBe('1');
+    expect(parsers.parseCalc('calc(1px)', resolveLengthOrPercentage)).toBe('calc(1px)');
+  });
+  it('resolves numbers', () => {
+    expect(parsers.parseCalc('calc(1 - 2)')).toBe('-1');
+    expect(parsers.parseCalc('calc(1 + 2)')).toBe('3');
+    expect(parsers.parseCalc('calc(1 * 2)')).toBe('2');
+    expect(parsers.parseCalc('calc(1 / 2)')).toBe('0.5');
+    expect(parsers.parseCalc('calc(1.5 + 2.5 * 3)')).toBe('9');
+    expect(parsers.parseCalc('calc((1 + 2) * 3)')).toBe('9');
+    expect(parsers.parseCalc('calc(1 + 2 * (3 + 4))')).toBe('15');
+    expect(parsers.parseCalc('calc(calc(1 + 2) * 3 * calc(2 - 1))')).toBe('9');
+    expect(parsers.parseCalc('CALc(1 - 2)')).toBe('-1');
+  });
+  it('resolves numerics of the same type', () => {
+    expect(parsers.parseCalc('calc(1% + 2 * 1%)', resolveLengthOrPercentage)).toBe('calc(3%)');
+    expect(parsers.parseCalc('calc(1px + 2px * 1)', resolveLengthOrPercentage)).toBe('calc(3px)');
+    expect(parsers.parseCalc('calc(1px + 2em * 2)', resolveLengthOrPercentage)).toBe(
+      'calc(1px + 4em)'
+    );
+    expect(parsers.parseCalc('calc(1px + 1pc)', resolveLengthOrPercentage)).toBe('calc(17px)');
+    expect(parsers.parseCalc('calc(1turn + 180deg)', resolveAngle)).toBe('calc(180deg)');
+    expect(parsers.parseCalc('calc(1s + 1000ms)', resolveTime)).toBe('calc(2000ms)');
+    expect(parsers.parseCalc('CALc(1px + 1em)', resolveLengthOrPercentage)).toBe(
+      'calc(1px + 1em)'
+    );
+  });
+});
 describe('parseKeyword', () => {
   it('returns null for invalid values', () => {
     const invalid = ['ninitial', 'initiall', '--initial', 'liquid'];