fix: handle outline style/width

Author: cdoublev

lib/CSSStyleDeclaration.test.js

@@ -101,6 +101,10 @@ describe('CSSStyleDeclaration', () => {
     expect(style.borderTopWidth).toEqual('0px');
     expect(style.borderLeftStyle).toEqual('solid');
     expect(style.borderBottomColor).toEqual('black');
+    style.outline = 'black solid 0';
+    expect(style.outlineWidth).toEqual('0px');
+    expect(style.outlineStyle).toEqual('solid');
+    expect(style.outlineColor).toEqual('black');
     style.font = '12em monospace';
     expect(style.fontSize).toEqual('12em');
     expect(style.fontFamily).toEqual('monospace');

lib/properties/borderWidth.js

@@ -35,6 +35,7 @@ var parser = function(v) {
   }
   return undefined;
 };
+module.exports.parse = parser;
 
 module.exports.definition = {
   set: implicitSetter('border', 'width', isValid, parser),

lib/properties/outline.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var shorthandSetter = require('../parsers').shorthandSetter;
+var shorthandGetter = require('../parsers').shorthandGetter;
+
+var shorthand_for = {
+  'outline-color': require('./outlineColor'),
+  'outline-style': require('./outlineStyle'),
+  'outline-width': require('./outlineWidth'),
+};
+
+module.exports.definition = {
+  set: shorthandSetter('outline', shorthand_for),
+  get: shorthandGetter('outline', shorthand_for),
+  enumerable: true,
+  configurable: true,
+};

lib/properties/outlineColor.js

@@ -1,10 +1,12 @@
 'use strict';
 
-var parseColor = require('../parsers').parseColor;
+var isValid = (module.exports.isValid = require('./borderColor').isValid);
 
 module.exports.definition = {
   set: function(v) {
-    this._setProperty('outline-color', parseColor(v));
+    if (isValid(v)) {
+      this._setProperty('outline-color', v);
+    }
   },
   get: function() {
     return this.getPropertyValue('outline-color');

lib/properties/outlineStyle.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var isValid = (module.exports.isValid = require('./borderStyle').isValid);
+
+module.exports.definition = {
+  set: function(v) {
+    if (isValid(v)) {
+      if (v.toLowerCase() === 'none') {
+        v = '';
+        this.removeProperty('outline-width');
+      }
+      this._setProperty('outline-style', v);
+    }
+  },
+  get: function() {
+    return this.getPropertyValue('outline-style');
+  },
+  enumerable: true,
+  configurable: true,
+};

lib/properties/outlineWidth.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var borderWidth = require('./borderWidth');
+var isValid = (module.exports.isValid = borderWidth.isValid);
+var parse = borderWidth.parse;
+
+module.exports.definition = {
+  set: function(v) {
+    if (isValid(v)) {
+      this._setProperty('outline-width', parse(v));
+    }
+  },
+  get: function() {
+    return this.getPropertyValue('outline-width');
+  },
+  enumerable: true,
+  configurable: true,
+};