Migrate CSSStyleDeclaration to WebIDL2JS

Author: ExE-Boss

.eslintignore

@@ -1,4 +1,6 @@
 node_modules
+lib/CSSStyleDeclaration.js
 lib/implementedProperties.js
 lib/properties.js
+lib/utils.js
 jest.config.js

.gitignore

@@ -1,5 +1,8 @@
 node_modules
 npm-debug.log
+lib/CSSStyleDeclaration.js
 lib/implementedProperties.js
 lib/properties.js
+lib/utils.js
 coverage
+src/CSSStyleDeclaration-properties.webidl

index.js

@@ -0,0 +1,36 @@
+'use strict';
+const webidlWrapper = require('./webidl2js-wrapper.js');
+const webidlConversions = require('webidl-conversions');
+
+const sharedGlobalObject = {};
+webidlWrapper.install(sharedGlobalObject);
+
+const origCSSStyleDeclaration = sharedGlobalObject.CSSStyleDeclaration;
+function CSSStyleDeclaration() {
+  if (new.target === undefined) {
+    throw new TypeError('Illegal invocation');
+  }
+
+  let onChangeCallback = arguments[0];
+  if (onChangeCallback === null || onChangeCallback === undefined) {
+    onChangeCallback = null;
+  } else {
+    onChangeCallback = webidlConversions.Function(onChangeCallback, {
+      context: 'Failed to constructor CSSStyleDeclaration: parameter 1',
+    });
+  }
+
+  return webidlWrapper.create(sharedGlobalObject, undefined, {
+    onChangeCallback: onChangeCallback,
+  });
+}
+
+sharedGlobalObject.CSSStyleDeclaration = CSSStyleDeclaration;
+Object.defineProperty(CSSStyleDeclaration, 'prototype', {
+  value: origCSSStyleDeclaration.prototype,
+  writable: false,
+});
+CSSStyleDeclaration.prototype.constructor = CSSStyleDeclaration;
+Object.setPrototypeOf(CSSStyleDeclaration, Object.getPrototypeOf(origCSSStyleDeclaration));
+
+exports.CSSStyleDeclaration = CSSStyleDeclaration;

jest.config.js

@@ -3,8 +3,10 @@ module.exports = {
   "collectCoverage": true,
   "collectCoverageFrom": [
     "lib/**/*.js",
+    "!lib/CSSStyleDeclaration.js",
     "!lib/implementedProperties.js",
     "!lib/properties.js",
+    "!lib/utils.js",
   ],
   "coverageDirectory": "coverage",
 };

lib/CSSStyleDeclaration.js renamed to lib/CSSStyleDeclaration-impl.js

@@ -9,23 +9,24 @@ var allExtraProperties = require('./allExtraProperties');
 var implementedProperties = require('./implementedProperties');
 var { dashedToCamelCase } = require('./parsers');
 var getBasicPropertyDescriptor = require('./utils/getBasicPropertyDescriptor');
+const idlUtils = require('./utils.js');
 
-/**
- * @constructor
- * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
- */
-var CSSStyleDeclaration = function CSSStyleDeclaration(onChangeCallback) {
-  this._values = {};
-  this._importants = {};
-  this._length = 0;
-  this._onChange =
-    onChangeCallback ||
-    function() {
-      return;
-    };
-};
-CSSStyleDeclaration.prototype = {
-  constructor: CSSStyleDeclaration,
+class CSSStyleDeclaration {
+  /**
+   * @constructor
+   * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
+   */
+  constructor(globalObject, args, { onChangeCallback }) {
+    this._globalObject = globalObject;
+    this._values = {};
+    this._importants = {};
+    this._length = 0;
+    this._onChange =
+      onChangeCallback ||
+      function() {
+        return;
+      };
+  }
 
   /**
    *
@@ -34,12 +35,12 @@ CSSStyleDeclaration.prototype = {
    * @return {string} the value of the property if it has been explicitly set for this declaration block.
    * Returns the empty string if the property has not been set.
    */
-  getPropertyValue: function(name) {
+  getPropertyValue(name) {
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
     return this._values[name].toString();
-  },
+  }
 
   /**
    *
@@ -48,7 +49,7 @@ CSSStyleDeclaration.prototype = {
    * @param {string} [priority=null] "important" or null
    * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-setProperty
    */
-  setProperty: function(name, value, priority) {
+  setProperty(name, value, priority) {
     if (value === undefined) {
       return;
     }
@@ -68,8 +69,9 @@ CSSStyleDeclaration.prototype = {
 
     this[lowercaseName] = value;
     this._importants[lowercaseName] = priority;
-  },
-  _setProperty: function(name, value, priority) {
+  }
+
+  _setProperty(name, value, priority) {
     if (value === undefined) {
       return;
     }
@@ -92,7 +94,7 @@ CSSStyleDeclaration.prototype = {
     this._values[name] = value;
     this._importants[name] = priority;
     this._onChange(this.cssText);
-  },
+  }
 
   /**
    *
@@ -101,7 +103,7 @@ CSSStyleDeclaration.prototype = {
    * @return {string} the value of the property if it has been explicitly set for this declaration block.
    * Returns the empty string if the property has not been set or the property name does not correspond to a known CSS property.
    */
-  removeProperty: function(name) {
+  removeProperty(name) {
     if (!this._values.hasOwnProperty(name)) {
       return '';
     }
@@ -123,47 +125,30 @@ CSSStyleDeclaration.prototype = {
 
     this._onChange(this.cssText);
     return prevValue;
-  },
+  }
 
   /**
    *
    * @param {String} name
    */
-  getPropertyPriority: function(name) {
+  getPropertyPriority(name) {
     return this._importants[name] || '';
-  },
-
-  getPropertyCSSValue: function() {
-    //FIXME
-    return;
-  },
-
-  /**
-   *   element.style.overflow = "auto"
-   *   element.style.getPropertyShorthand("overflow-x")
-   *   -> "overflow"
-   */
-  getPropertyShorthand: function() {
-    //FIXME
-    return;
-  },
-
-  isPropertyImplicit: function() {
-    //FIXME
-    return;
-  },
+  }
 
   /**
    *   http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-item
    */
-  item: function(index) {
-    index = parseInt(index, 10);
+  item(index) {
     if (index < 0 || index >= this._length) {
       return '';
     }
     return this[index];
-  },
-};
+  }
+
+  [idlUtils.supportsPropertyIndex](index) {
+    return index >= 0 && index < this._length;
+  }
+}
 
 Object.defineProperties(CSSStyleDeclaration.prototype, {
   cssText: {
@@ -257,4 +242,4 @@ allExtraProperties.forEach(function(property) {
   }
 });
 
-exports.CSSStyleDeclaration = CSSStyleDeclaration;
+exports.implementation = CSSStyleDeclaration;

lib/CSSStyleDeclaration.test.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var { CSSStyleDeclaration } = require('./CSSStyleDeclaration');
+var { CSSStyleDeclaration } = require('../index.js');
 
 var allProperties = require('./allProperties');
 var allExtraProperties = require('./allExtraProperties');
@@ -9,6 +9,7 @@ var parsers = require('./parsers');
 
 var dashedProperties = [...allProperties, ...allExtraProperties];
 var allowedProperties = dashedProperties.map(parsers.dashedToCamelCase);
+allowedProperties.push('cssFloat');
 implementedProperties = Array.from(implementedProperties).map(parsers.dashedToCamelCase);
 var invalidProperties = implementedProperties.filter(prop => !allowedProperties.includes(prop));
 
@@ -41,9 +42,6 @@ describe('CSSStyleDeclaration', () => {
     expect(typeof style.setProperty).toEqual('function');
     expect(typeof style.getPropertyPriority).toEqual('function');
     expect(typeof style.removeProperty).toEqual('function');
-
-    // TODO - deprecated according to MDN and not implemented at all, can we remove?
-    expect(typeof style.getPropertyCSSValue).toEqual('function');
   });
 
   test('has special properties', () => {
@@ -52,7 +50,6 @@ describe('CSSStyleDeclaration', () => {
     expect(style.__lookupGetter__('cssText')).toBeTruthy();
     expect(style.__lookupSetter__('cssText')).toBeTruthy();
     expect(style.__lookupGetter__('length')).toBeTruthy();
-    expect(style.__lookupSetter__('length')).toBeTruthy();
     expect(style.__lookupGetter__('parentRule')).toBeTruthy();
   });
 

lib/allExtraProperties.js

@@ -16,7 +16,6 @@ module.exports = new Set(
     'color-interpolation',
     'color-profile',
     'color-rendering',
-    'css-float',
     'enable-background',
     'fill',
     'fill-opacity',

lib/allWebkitProperties.js

@@ -191,4 +191,4 @@ module.exports = [
   'wrap-through',
   'writing-mode',
   'zoom',
-].map(prop => 'webkit-' + prop);
+].map(prop => '-webkit-' + prop);

lib/parsers.js

@@ -709,7 +709,7 @@ exports.subImplicitSetter = function(prefix, part, isValid, parser) {
 };
 
 var camel_to_dashed = /[A-Z]/g;
-var first_segment = /^\([^-]\)-/;
+var first_segment = /^([^-]+)-/;
 var vendor_prefixes = ['o', 'moz', 'ms', 'webkit'];
 exports.camelToDashed = function(camel_case) {
   var match;

lib/properties/borderSpacing.js

@@ -10,7 +10,7 @@ var parse = function parse(v) {
   if (v === '' || v === null) {
     return undefined;
   }
-  if (v === 0) {
+  if (v === '0' || v === 0) {
     return '0px';
   }
   if (v.toLowerCase() === 'inherit') {