feat: computed calc()

Fixes jsdom/jsdom#1332
cdoublev · May 24, 2021 · 38a54db · 38a54db
1 parent ede1584
commit 38a54db
Show file tree

Hide file tree

Showing 15 changed files with 409 additions and 126 deletions.
diff --git a/lib/parsers.js b/lib/parsers.js
diff --git a/lib/parsers.test.js b/lib/parsers.test.js
@@ -20,13 +20,13 @@ describe('parseLength', () => {
   });
   it.todo('more tests');
 });
-describe('parsePercent', () => {
+describe('parsePercentage', () => {
   it('works with calc', () => {
-    expect(parsers.parsePercent('calc(1% + 1%)')).toBe('calc(2%)');
+    expect(parsers.parsePercentage('calc(1% + 1%)')).toBe('calc(2%)');
   });
   it.todo('more tests');
 });
-describe('parseMeasurement', () => {
+describe('parseLengthOrPercentage', () => {
   it.todo('test');
 });
 describe('parseAngle', () => {
@@ -167,3 +167,53 @@ describe('subImplicitSetter', () => {
 describe('camelToDashed', () => {
   it.todo('test');
 });
+describe('splitTokens', () => {
+  it('should split value components separated by space', () => {
+    expect(parsers.splitTokens('1px solid red')).toEqual([['1px', 'solid', 'red'], [' ', ' ']]);
+  });
+  it('should split value components separated by space and forward slash', () => {
+    expect(parsers.splitTokens('url(bg.jpq) center / 50%', /[ /]/)).toEqual([
+      ['url(bg.jpq)', 'center', '50%'],
+      [' ', ' / '],
+    ]);
+  });
+  it('should split a list of values', () => {
+    expect(parsers.splitTokens('1px 1px black, 2px 2px silver', /,/)).toEqual([
+      ['1px 1px black', '2px 2px silver'],
+      [', '],
+    ]);
+  });
+  it('should split color function arguments', () => {
+    const separators = /[,/ ]/;
+    expect(parsers.splitTokens('0,0,0', separators)).toEqual([['0', '0', '0'], [',', ',']]);
+    expect(parsers.splitTokens('0,1%,2%', separators)).toEqual([['0', '1%', '2%'], [',', ',']]);
+    expect(parsers.splitTokens('0   ,   0   , 0', separators)).toEqual([
+      ['0', '0', '0'],
+      [' , ', ' , '],
+    ]);
+    expect(parsers.splitTokens('0deg, 1%, 2%', separators)).toEqual([
+      ['0deg', '1%', '2%'],
+      [', ', ', '],
+    ]);
+    expect(parsers.splitTokens('0deg 1%   /   2%', separators)).toEqual([
+      ['0deg', '1%', '2%'],
+      [' ', ' / '],
+    ]);
+  });
+  it('should split nested function arguments', () => {
+    expect(parsers.splitTokens('calc(45deg * 2) to left, rgb(255, 0, 0), cyan', /,/)).toEqual([
+      ['calc(45deg * 2) to left', 'rgb(255, 0, 0)', 'cyan'],
+      [', ', ', '],
+    ]);
+    expect(parsers.splitTokens('calc(1 + 1) + var(--number, calc(1 + 1)) * 1', /[+*]/)).toEqual([
+      ['calc(1 + 1)', 'var(--number, calc(1 + 1))', '1'],
+      [' + ', ' * '],
+    ]);
+  });
+  it('should split function with empty arguments', () => {
+    expect(parsers.splitTokens(', ,   ,, 1%,', /,/)).toEqual([
+      ['', '', '', '', '1%', ''],
+      [', ', ',   ', ',', ', ', ','],
+    ]);
+  });
+});
diff --git a/lib/properties/backgroundPosition.js b/lib/properties/backgroundPosition.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const { parseKeyword, parseMeasurement } = require('../parsers');
+const { parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
 var valid_keywords = ['top', 'center', 'bottom', 'left', 'right'];
 
@@ -13,9 +13,9 @@ function parse(v) {
     return undefined;
   }
   if (parts.length === 1) {
-    return parseMeasurement(parts[0]) || parseKeyword(parts[0], valid_keywords);
+    return parseLengthOrPercentage(parts[0]) || parseKeyword(parts[0], valid_keywords);
   }
-  if (parseMeasurement(parts[0]) !== undefined && parseMeasurement(parts[1]) !== undefined) {
+  if (parseLengthOrPercentage(parts[0]) !== undefined && parseLengthOrPercentage(parts[1]) !== undefined) {
     return v;
   }
   if (

diff --git a/lib/properties/bottom.js b/lib/properties/bottom.js
@@ -1,10 +1,10 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+const { parseLengthOrPercentage } = require('../parsers');
 
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('bottom', parseMeasurement(v));
+    this._setProperty('bottom', parseLengthOrPercentage(v));
   },
   get: function() {
     return this.getPropertyValue('bottom');

diff --git a/lib/properties/clip.js b/lib/properties/clip.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const { parseKeyword, parseMeasurement } = require('../parsers');
+const { parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
 var shape_regex = /^rect\((.*)\)$/i;
 
@@ -21,7 +21,7 @@ var parse = function(val) {
     return undefined;
   }
   var valid = parts.every(function(part, index) {
-    var measurement = parseMeasurement(part.toLowerCase());
+    var measurement = parseLengthOrPercentage(part);
     parts[index] = measurement;
     return measurement !== undefined;
   });

diff --git a/lib/properties/flexBasis.js b/lib/properties/flexBasis.js
@@ -1,9 +1,9 @@
 'use strict';
 
-const { parseKeyword, parseMeasurement } = require('../parsers');
+const { parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
 function parse(v) {
-  return parseKeyword(v, ['auto']) || parseMeasurement(v);
+  return parseKeyword(v, ['auto']) || parseLengthOrPercentage(v);
 }
 
 module.exports.parse = parse;

diff --git a/lib/properties/fontSize.js b/lib/properties/fontSize.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const { parseKeyword, parseMeasurement } = require('../parsers');
+const { parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
 const sizes = [
   // Absolute
@@ -17,7 +17,7 @@ const sizes = [
 ];
 
 function parse(v) {
-  return parseKeyword(v, sizes) || parseMeasurement(v);
+  return parseKeyword(v, sizes) || parseLengthOrPercentage(v);
 }
 
 module.exports.parse = parse;

diff --git a/lib/properties/height.js b/lib/properties/height.js
@@ -1,10 +1,10 @@
 'use strict';
 
-const { parseKeyword, parseMeasurement } = require('../parsers');
+const { parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('height', parseKeyword(v, ['auto']) || parseMeasurement(v));
+    this._setProperty('height', parseKeyword(v, ['auto']) || parseLengthOrPercentage(v));
   },
   get: function() {
     return this.getPropertyValue('height');

diff --git a/lib/properties/left.js b/lib/properties/left.js
@@ -1,10 +1,10 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+const { parseLengthOrPercentage } = require('../parsers');
 
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('left', parseMeasurement(v));
+    this._setProperty('left', parseLengthOrPercentage(v));
   },
   get: function() {
     return this.getPropertyValue('left');

diff --git a/lib/properties/lineHeight.js b/lib/properties/lineHeight.js
@@ -1,9 +1,9 @@
 'use strict';
 
-const { parseKeyword, parseMeasurement, parseNumber } = require('../parsers');
+const { parseKeyword, parseLengthOrPercentage, parseNumber } = require('../parsers');
 
 function parse(v) {
-  return parseKeyword(v, ['normal']) || parseNumber(v) || parseMeasurement(v);
+  return parseKeyword(v, ['normal']) || parseNumber(v) || parseLengthOrPercentage(v);
 }
 
 module.exports.parse = parse;

diff --git a/lib/properties/margin.js b/lib/properties/margin.js
@@ -1,9 +1,9 @@
 'use strict';
 
-const { implicitSetter, parseKeyword, parseMeasurement } = require('../parsers');
+const { implicitSetter, parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
 function parse(v) {
-  return parseKeyword(v, ['auto']) || parseMeasurement(v);
+  return parseKeyword(v, ['auto']) || parseLengthOrPercentage(v);
 }
 
 const mySetter = implicitSetter('margin', '', parse);

diff --git a/lib/properties/padding.js b/lib/properties/padding.js
@@ -1,8 +1,8 @@
 'use strict';
 
-const { implicitSetter, parseKeyword, parseMeasurement } = require('../parsers');
+const { implicitSetter, parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
-const mySetter = implicitSetter('padding', '', parseMeasurement);
+const mySetter = implicitSetter('padding', '', parseLengthOrPercentage);
 const myGlobal = implicitSetter('padding', '', function(v) {
   return v;
 });
@@ -23,4 +23,4 @@ module.exports.definition = {
   configurable: true,
 };
 
-module.exports.parse = parseMeasurement;
+module.exports.parse = parseLengthOrPercentage;
diff --git a/lib/properties/right.js b/lib/properties/right.js
@@ -1,10 +1,10 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+const { parseLengthOrPercentage } = require('../parsers');
 
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('right', parseMeasurement(v));
+    this._setProperty('right', parseLengthOrPercentage(v));
   },
   get: function() {
     return this.getPropertyValue('right');

diff --git a/lib/properties/top.js b/lib/properties/top.js
@@ -1,10 +1,10 @@
 'use strict';
 
-var parseMeasurement = require('../parsers').parseMeasurement;
+const { parseLengthOrPercentage } = require('../parsers');
 
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('top', parseMeasurement(v));
+    this._setProperty('top', parseLengthOrPercentage(v));
   },
   get: function() {
     return this.getPropertyValue('top');

diff --git a/lib/properties/width.js b/lib/properties/width.js
@@ -1,10 +1,10 @@
 'use strict';
 
-const { parseKeyword, parseMeasurement } = require('../parsers');
+const { parseKeyword, parseLengthOrPercentage } = require('../parsers');
 
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('width', parseKeyword(v, ['auto']) || parseMeasurement(v));
+    this._setProperty('width', parseKeyword(v, ['auto']) || parseLengthOrPercentage(v));
   },
   get: function() {
     return this.getPropertyValue('width');