Named color parsing

package.json

@@ -44,6 +44,7 @@
     "url": "https://opencollective.com/openlayers"
   },
   "dependencies": {
+    "color-name": "^2.0.0",
     "earcut": "^2.2.3",
     "geotiff": "^2.0.7",
     "pbf": "3.2.1",

src/ol/color.js

@@ -1,6 +1,7 @@
 /**
  * @module ol/color
  */
+import colorNames from 'color-name';
 import {clamp} from './math.js';
 
 /**
@@ -42,20 +43,20 @@ export function asString(color) {
 }
 
 /**
- * Return named color as an rgba string.
+ * Return named color as an rgb(a) string.
  * @param {string} color Named color.
- * @return {string} Rgb string.
+ * @return {string} RGB(A) string.
  */
 function fromNamed(color) {
-  const el = document.createElement('div');
-  el.style.color = color;
-  if (el.style.color !== '') {
-    document.body.appendChild(el);
-    const rgb = getComputedStyle(el).color;
-    document.body.removeChild(el);
-    return rgb;
+  const name = color.toLowerCase();
+  if (!colorNames.hasOwnProperty(name)) {
+    if (name === 'transparent') {
+      return 'rgba(0,0,0,0)';
+    }
+    return '';
   }
-  return '';
+  const rgb = colorNames[name];
+  return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
 }
 
 /**
@@ -180,7 +181,7 @@ function fromStringInternal_(s) {
 }
 
 /**
- * TODO this function is only used in the test, we probably shouldn't export it
+ * Exported for the tests.
  * @param {Color} color Color.
  * @return {Color} Clamped color.
  */

test/browser/spec/ol/color.test.js → test/node/ol/color.test.js

@@ -1,85 +1,116 @@
+import expect from '../expect.js';
 import {
   asArray,
   asString,
   fromString,
   isStringColor,
   normalize,
   toString,
-} from '../../../../src/ol/color.js';
+} from '../../../src/ol/color.js';
 
-describe('ol.color', function () {
-  describe('asArray()', function () {
-    it('returns the same for an array', function () {
+describe('ol/color', () => {
+  describe('asArray()', () => {
+    it('returns the same for an array', () => {
       const color = [1, 2, 3, 0.4];
       const got = asArray(color);
       expect(got).to.be(color);
     });
 
-    it('returns an array given an rgba string', function () {
+    it('returns an array given an rgba string', () => {
       const color = asArray('rgba(1,2,3,0.4)');
       expect(color).to.eql([1, 2, 3, 0.4]);
     });
 
-    it('returns an array given an rgb string', function () {
+    it('returns an array given an rgb string', () => {
       const color = asArray('rgb(1,2,3)');
       expect(color).to.eql([1, 2, 3, 1]);
     });
 
-    it('returns an array given a hex string', function () {
+    it('returns an array given a hex string', () => {
       const color = asArray('#00ccff');
       expect(color).to.eql([0, 204, 255, 1]);
     });
 
-    it('returns an array given a hex string with alpha', function () {
+    it('returns an array given a hex string with alpha', () => {
       const color = asArray('#00ccffb0');
       expect(color).to.eql([0, 204, 255, 176 / 255]);
     });
   });
 
-  describe('asString()', function () {
-    it('returns the same for a string', function () {
+  describe('asString()', () => {
+    it('returns the same for a string', () => {
       const color = 'rgba(0,1,2,0.3)';
       const got = asString(color);
       expect(got).to.be(color);
     });
 
-    it('returns a string given an rgba array', function () {
+    it('returns a string given an rgba array', () => {
       const color = asString([1, 2, 3, 0.4]);
       expect(color).to.eql('rgba(1,2,3,0.4)');
     });
 
-    it('returns a string given an rgb array', function () {
+    it('returns a string given an rgb array', () => {
       const color = asString([1, 2, 3]);
       expect(color).to.eql('rgba(1,2,3,1)');
     });
   });
 
-  describe('fromString()', function () {
-    it('can parse 3-digit hex colors', function () {
+  describe('fromString()', () => {
+    describe('with named colors', () => {
+      const cases = [
+        ['red', [255, 0, 0, 1]],
+        ['green', [0, 128, 0, 1]],
+        ['blue', [0, 0, 255, 1]],
+        ['yellow', [255, 255, 0, 1]],
+        ['orange', [255, 165, 0, 1]],
+        ['purple', [128, 0, 128, 1]],
+        ['violet', [238, 130, 238, 1]],
+        ['white', [255, 255, 255, 1]],
+        ['black', [0, 0, 0, 1]],
+        ['wheat', [245, 222, 179, 1]],
+        ['olive', [128, 128, 0, 1]],
+        ['transparent', [0, 0, 0, 0]],
+        ['oops', 'Invalid color'],
+      ];
+      for (const c of cases) {
+        it(`works for ${c[0]}`, () => {
+          const expected = c[1];
+          if (typeof expected === 'string') {
+            expect(() => {
+              fromString(c[0]);
+            }).to.throwException(expected);
+            return;
+          }
+          expect(fromString(c[0])).to.eql(c[1]);
+        });
+      }
+    });
+
+    it('can parse 3-digit hex colors', () => {
       expect(fromString('#087')).to.eql([0, 136, 119, 1]);
     });
 
-    it('can parse 4-digit hex colors', function () {
+    it('can parse 4-digit hex colors', () => {
       expect(fromString('#0876')).to.eql([0, 136, 119, 102 / 255]);
     });
 
-    it('can parse 6-digit hex colors', function () {
+    it('can parse 6-digit hex colors', () => {
       expect(fromString('#56789a')).to.eql([86, 120, 154, 1]);
     });
 
-    it('can parse 8-digit hex colors', function () {
+    it('can parse 8-digit hex colors', () => {
       expect(fromString('#56789acc')).to.eql([86, 120, 154, 204 / 255]);
     });
 
-    it('can parse rgb colors', function () {
+    it('can parse rgb colors', () => {
       expect(fromString('rgb(0, 0, 255)')).to.eql([0, 0, 255, 1]);
     });
 
-    it('ignores whitespace before, between & after numbers (rgb)', function () {
+    it('ignores whitespace before, between & after numbers (rgb)', () => {
       expect(fromString('rgb( \t 0  ,   0 \n , 255  )')).to.eql([0, 0, 255, 1]);
     });
 
-    it('can parse rgba colors', function () {
+    it('can parse rgba colors', () => {
       // opacity 0
       expect(fromString('rgba(255, 255, 0, 0)')).to.eql([255, 255, 0, 0]);
       // opacity 0.0 (simple float)
@@ -108,49 +139,49 @@ describe('ol.color', function () {
       ).to.eql([255, 255, 0, 0.12345678901234567890123456789]);
     });
 
-    it('ignores whitespace before, between & after numbers (rgba)', function () {
+    it('ignores whitespace before, between & after numbers (rgba)', () => {
       expect(fromString('rgba( \t 0  ,   0 \n ,   255  ,   0.4711   )')).to.eql(
         [0, 0, 255, 0.4711]
       );
     });
 
-    it('throws an error on invalid colors', function () {
+    it('throws an error on invalid colors', () => {
       const invalidColors = ['tuesday', '#12345', '#1234567'];
       let i, ii;
       for (i = 0, ii = invalidColors.length; i < ii; ++i) {
-        expect(function () {
+        expect(() => {
           fromString(invalidColors[i]);
         }).to.throwException();
       }
     });
   });
 
-  describe('normalize()', function () {
-    it('clamps out-of-range channels', function () {
+  describe('normalize()', () => {
+    it('clamps out-of-range channels', () => {
       expect(normalize([-1, 256, 0, 2])).to.eql([0, 255, 0, 1]);
     });
 
-    it('rounds color channels to integers', function () {
+    it('rounds color channels to integers', () => {
       expect(normalize([1.2, 2.5, 3.7, 1])).to.eql([1, 3, 4, 1]);
     });
   });
 
-  describe('toString()', function () {
-    it('converts valid colors', function () {
+  describe('toString()', () => {
+    it('converts valid colors', () => {
       expect(toString([1, 2, 3, 0.4])).to.be('rgba(1,2,3,0.4)');
     });
 
-    it('rounds to integers if needed', function () {
+    it('rounds to integers if needed', () => {
       expect(toString([1.2, 2.5, 3.7, 0.4])).to.be('rgba(1,3,4,0.4)');
     });
 
-    it('sets default alpha value if undefined', function () {
+    it('sets default alpha value if undefined', () => {
       expect(toString([0, 0, 0])).to.be('rgba(0,0,0,1)');
     });
   });
 
-  describe('isValid()', function () {
-    it('correctly detects valid colors', function () {
+  describe('isValid()', () => {
+    it('correctly detects valid colors', () => {
       expect(isStringColor('rgba(1,3,4,0.4)')).to.be(true);
       expect(isStringColor('rgb(1,3,4)')).to.be(true);
       expect(isStringColor('lightgreen')).to.be(true);