appmap 0.62.1 → 0.65.1

data/node_modules/cssom/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "cssom",
+  "description": "CSS Object Model implementation and CSS parser",
+  "keywords": [
+    "CSS",
+    "CSSOM",
+    "parser",
+    "styleSheet"
+  ],
+  "version": "0.4.4",
+  "author": "Nikita Vasilyev <me@elv1s.ru>",
+  "repository": "NV/CSSOM",
+  "files": [
+    "lib/"
+  ],
+  "main": "./lib/index.js",
+  "license": "MIT"
+}

data/node_modules/cssstyle/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) Chad Walker
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/node_modules/cssstyle/README.md

@@ -0,0 +1,15 @@
+# CSSStyleDeclaration
+
+A Node JS implementation of the CSS Object Model [CSSStyleDeclaration interface](https://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface).
+
+[![NpmVersion](https://img.shields.io/npm/v/cssstyle.svg)](https://www.npmjs.com/package/cssstyle) [![Build Status](https://travis-ci.org/jsdom/cssstyle.svg?branch=master)](https://travis-ci.org/jsdom/cssstyle) [![codecov](https://codecov.io/gh/jsdom/cssstyle/branch/master/graph/badge.svg)](https://codecov.io/gh/jsdom/cssstyle)
+
+---
+
+#### Background
+
+This package is an extension of the CSSStyleDeclaration class in Nikita Vasilyev's [CSSOM](https://github.com/NV/CSSOM) with added support for CSS 2 & 3 properties. The primary use case is for testing browser code in a Node environment. 
+
+It was originally created by Chad Walker, it is now maintaind by Jon Sakas and other open source contributors.
+
+Bug reports and pull requests are welcome.

data/node_modules/cssstyle/lib/CSSStyleDeclaration.js

@@ -0,0 +1,260 @@
+/*********************************************************************
+ * This is a fork from the CSS Style Declaration part of
+ * https://github.com/NV/CSSOM
+ ********************************************************************/
+'use strict';
+var CSSOM = require('cssom');
+var allProperties = require('./allProperties');
+var allExtraProperties = require('./allExtraProperties');
+var implementedProperties = require('./implementedProperties');
+var { dashedToCamelCase } = require('./parsers');
+var getBasicPropertyDescriptor = require('./utils/getBasicPropertyDescriptor');
+
+/**
+ * @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,
+
+  /**
+   *
+   * @param {string} name
+   * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-getPropertyValue
+   * @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) {
+    if (!this._values.hasOwnProperty(name)) {
+      return '';
+    }
+    return this._values[name].toString();
+  },
+
+  /**
+   *
+   * @param {string} name
+   * @param {string} value
+   * @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) {
+    if (value === undefined) {
+      return;
+    }
+    if (value === null || value === '') {
+      this.removeProperty(name);
+      return;
+    }
+    var isCustomProperty = name.indexOf('--') === 0;
+    if (isCustomProperty) {
+      this._setProperty(name, value, priority);
+      return;
+    }
+    var lowercaseName = name.toLowerCase();
+    if (!allProperties.has(lowercaseName) && !allExtraProperties.has(lowercaseName)) {
+      return;
+    }
+
+    this[lowercaseName] = value;
+    this._importants[lowercaseName] = priority;
+  },
+  _setProperty: function(name, value, priority) {
+    if (value === undefined) {
+      return;
+    }
+    if (value === null || value === '') {
+      this.removeProperty(name);
+      return;
+    }
+    if (this._values[name]) {
+      // Property already exist. Overwrite it.
+      var index = Array.prototype.indexOf.call(this, name);
+      if (index < 0) {
+        this[this._length] = name;
+        this._length++;
+      }
+    } else {
+      // New property.
+      this[this._length] = name;
+      this._length++;
+    }
+    this._values[name] = value;
+    this._importants[name] = priority;
+    this._onChange(this.cssText);
+  },
+
+  /**
+   *
+   * @param {string} name
+   * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration-removeProperty
+   * @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) {
+    if (!this._values.hasOwnProperty(name)) {
+      return '';
+    }
+
+    var prevValue = this._values[name];
+    delete this._values[name];
+    delete this._importants[name];
+
+    var index = Array.prototype.indexOf.call(this, name);
+    if (index < 0) {
+      return prevValue;
+    }
+
+    // That's what WebKit and Opera do
+    Array.prototype.splice.call(this, index, 1);
+
+    // That's what Firefox does
+    //this[index] = ""
+
+    this._onChange(this.cssText);
+    return prevValue;
+  },
+
+  /**
+   *
+   * @param {String} name
+   */
+  getPropertyPriority: function(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);
+    if (index < 0 || index >= this._length) {
+      return '';
+    }
+    return this[index];
+  },
+};
+
+Object.defineProperties(CSSStyleDeclaration.prototype, {
+  cssText: {
+    get: function() {
+      var properties = [];
+      var i;
+      var name;
+      var value;
+      var priority;
+      for (i = 0; i < this._length; i++) {
+        name = this[i];
+        value = this.getPropertyValue(name);
+        priority = this.getPropertyPriority(name);
+        if (priority !== '') {
+          priority = ' !' + priority;
+        }
+        properties.push([name, ': ', value, priority, ';'].join(''));
+      }
+      return properties.join(' ');
+    },
+    set: function(value) {
+      var i;
+      this._values = {};
+      Array.prototype.splice.call(this, 0, this._length);
+      this._importants = {};
+      var dummyRule;
+      try {
+        dummyRule = CSSOM.parse('#bogus{' + value + '}').cssRules[0].style;
+      } catch (err) {
+        // malformed css, just return
+        return;
+      }
+      var rule_length = dummyRule.length;
+      var name;
+      for (i = 0; i < rule_length; ++i) {
+        name = dummyRule[i];
+        this.setProperty(
+          dummyRule[i],
+          dummyRule.getPropertyValue(name),
+          dummyRule.getPropertyPriority(name)
+        );
+      }
+      this._onChange(this.cssText);
+    },
+    enumerable: true,
+    configurable: true,
+  },
+  parentRule: {
+    get: function() {
+      return null;
+    },
+    enumerable: true,
+    configurable: true,
+  },
+  length: {
+    get: function() {
+      return this._length;
+    },
+    /**
+     * This deletes indices if the new length is less then the current
+     * length. If the new length is more, it does nothing, the new indices
+     * will be undefined until set.
+     **/
+    set: function(value) {
+      var i;
+      for (i = value; i < this._length; i++) {
+        delete this[i];
+      }
+      this._length = value;
+    },
+    enumerable: true,
+    configurable: true,
+  },
+});
+
+require('./properties')(CSSStyleDeclaration.prototype);
+
+allProperties.forEach(function(property) {
+  if (!implementedProperties.has(property)) {
+    var declaration = getBasicPropertyDescriptor(property);
+    Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
+    Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration);
+  }
+});
+
+allExtraProperties.forEach(function(property) {
+  if (!implementedProperties.has(property)) {
+    var declaration = getBasicPropertyDescriptor(property);
+    Object.defineProperty(CSSStyleDeclaration.prototype, property, declaration);
+    Object.defineProperty(CSSStyleDeclaration.prototype, dashedToCamelCase(property), declaration);
+  }
+});
+
+exports.CSSStyleDeclaration = CSSStyleDeclaration;

data/node_modules/cssstyle/lib/CSSStyleDeclaration.test.js

@@ -0,0 +1,556 @@
+'use strict';
+
+var { CSSStyleDeclaration } = require('./CSSStyleDeclaration');
+
+var allProperties = require('./allProperties');
+var allExtraProperties = require('./allExtraProperties');
+var implementedProperties = require('./implementedProperties');
+var parsers = require('./parsers');
+
+var dashedProperties = [...allProperties, ...allExtraProperties];
+var allowedProperties = dashedProperties.map(parsers.dashedToCamelCase);
+implementedProperties = Array.from(implementedProperties).map(parsers.dashedToCamelCase);
+var invalidProperties = implementedProperties.filter(prop => !allowedProperties.includes(prop));
+
+describe('CSSStyleDeclaration', () => {
+  test('has only valid properties implemented', () => {
+    expect(invalidProperties.length).toEqual(0);
+  });
+
+  test('has all properties', () => {
+    var style = new CSSStyleDeclaration();
+    allProperties.forEach(property => {
+      expect(style.__lookupGetter__(property)).toBeTruthy();
+      expect(style.__lookupSetter__(property)).toBeTruthy();
+    });
+  });
+
+  test('has dashed properties', () => {
+    var style = new CSSStyleDeclaration();
+    dashedProperties.forEach(property => {
+      expect(style.__lookupGetter__(property)).toBeTruthy();
+      expect(style.__lookupSetter__(property)).toBeTruthy();
+    });
+  });
+
+  test('has all functions', () => {
+    var style = new CSSStyleDeclaration();
+
+    expect(typeof style.item).toEqual('function');
+    expect(typeof style.getPropertyValue).toEqual('function');
+    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', () => {
+    var style = new 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();
+  });
+
+  test('from style string', () => {
+    var style = new CSSStyleDeclaration();
+    style.cssText = 'color: blue; background-color: red; width: 78%; height: 50vh;';
+    expect(style.length).toEqual(4);
+    expect(style.cssText).toEqual('color: blue; background-color: red; width: 78%; height: 50vh;');
+    expect(style.getPropertyValue('color')).toEqual('blue');
+    expect(style.item(0)).toEqual('color');
+    expect(style[1]).toEqual('background-color');
+    expect(style.backgroundColor).toEqual('red');
+    style.cssText = '';
+    expect(style.cssText).toEqual('');
+    expect(style.length).toEqual(0);
+  });
+
+  test('from properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.color = 'blue';
+    expect(style.length).toEqual(1);
+    expect(style[0]).toEqual('color');
+    expect(style.cssText).toEqual('color: blue;');
+    expect(style.item(0)).toEqual('color');
+    expect(style.color).toEqual('blue');
+    style.backgroundColor = 'red';
+    expect(style.length).toEqual(2);
+    expect(style[0]).toEqual('color');
+    expect(style[1]).toEqual('background-color');
+    expect(style.cssText).toEqual('color: blue; background-color: red;');
+    expect(style.backgroundColor).toEqual('red');
+    style.removeProperty('color');
+    expect(style[0]).toEqual('background-color');
+  });
+
+  test('shorthand properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.background = 'blue url(http://www.example.com/some_img.jpg)';
+    expect(style.backgroundColor).toEqual('blue');
+    expect(style.backgroundImage).toEqual('url(http://www.example.com/some_img.jpg)');
+    expect(style.background).toEqual('blue url(http://www.example.com/some_img.jpg)');
+    style.border = '0 solid black';
+    expect(style.borderWidth).toEqual('0px');
+    expect(style.borderStyle).toEqual('solid');
+    expect(style.borderColor).toEqual('black');
+    expect(style.borderTopWidth).toEqual('0px');
+    expect(style.borderLeftStyle).toEqual('solid');
+    expect(style.borderBottomColor).toEqual('black');
+    style.font = '12em monospace';
+    expect(style.fontSize).toEqual('12em');
+    expect(style.fontFamily).toEqual('monospace');
+  });
+
+  test('width and height properties and null and empty strings', () => {
+    var style = new CSSStyleDeclaration();
+    style.height = 6;
+    expect(style.height).toEqual('');
+    style.width = 0;
+    expect(style.width).toEqual('0px');
+    style.height = '34%';
+    expect(style.height).toEqual('34%');
+    style.height = '100vh';
+    expect(style.height).toEqual('100vh');
+    style.height = '100vw';
+    expect(style.height).toEqual('100vw');
+    style.height = '';
+    expect(1).toEqual(style.length);
+    expect(style.cssText).toEqual('width: 0px;');
+    style.width = null;
+    expect(0).toEqual(style.length);
+    expect(style.cssText).toEqual('');
+  });
+
+  test('implicit properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.borderWidth = 0;
+    expect(style.length).toEqual(1);
+    expect(style.borderWidth).toEqual('0px');
+    expect(style.borderTopWidth).toEqual('0px');
+    expect(style.borderBottomWidth).toEqual('0px');
+    expect(style.borderLeftWidth).toEqual('0px');
+    expect(style.borderRightWidth).toEqual('0px');
+    expect(style.cssText).toEqual('border-width: 0px;');
+  });
+
+  test('top, left, right, bottom properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.top = 0;
+    style.left = '0%';
+    style.right = '5em';
+    style.bottom = '12pt';
+    expect(style.top).toEqual('0px');
+    expect(style.left).toEqual('0%');
+    expect(style.right).toEqual('5em');
+    expect(style.bottom).toEqual('12pt');
+    expect(style.length).toEqual(4);
+    expect(style.cssText).toEqual('top: 0px; left: 0%; right: 5em; bottom: 12pt;');
+  });
+
+  test('clear and clip properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.clear = 'none';
+    expect(style.clear).toEqual('none');
+    style.clear = 'lfet';
+    expect(style.clear).toEqual('none');
+    style.clear = 'left';
+    expect(style.clear).toEqual('left');
+    style.clear = 'right';
+    expect(style.clear).toEqual('right');
+    style.clear = 'both';
+    expect(style.clear).toEqual('both');
+    style.clip = 'elipse(5px, 10px)';
+    expect(style.clip).toEqual('');
+    expect(style.length).toEqual(1);
+    style.clip = 'rect(0, 3Em, 2pt, 50%)';
+    expect(style.clip).toEqual('rect(0px, 3em, 2pt, 50%)');
+    expect(style.length).toEqual(2);
+    expect(style.cssText).toEqual('clear: both; clip: rect(0px, 3em, 2pt, 50%);');
+  });
+
+  test('colors', () => {
+    var style = new CSSStyleDeclaration();
+    style.color = 'rgba(0,0,0,0)';
+    expect(style.color).toEqual('rgba(0, 0, 0, 0)');
+    style.color = 'rgba(5%, 10%, 20%, 0.4)';
+    expect(style.color).toEqual('rgba(12, 25, 51, 0.4)');
+    style.color = 'rgb(33%, 34%, 33%)';
+    expect(style.color).toEqual('rgb(84, 86, 84)');
+    style.color = 'rgba(300, 200, 100, 1.5)';
+    expect(style.color).toEqual('rgb(255, 200, 100)');
+    style.color = 'hsla(0, 1%, 2%, 0.5)';
+    expect(style.color).toEqual('rgba(5, 5, 5, 0.5)');
+    style.color = 'hsl(0, 1%, 2%)';
+    expect(style.color).toEqual('rgb(5, 5, 5)');
+    style.color = 'rebeccapurple';
+    expect(style.color).toEqual('rebeccapurple');
+    style.color = 'transparent';
+    expect(style.color).toEqual('transparent');
+    style.color = 'currentcolor';
+    expect(style.color).toEqual('currentcolor');
+    style.color = '#ffffffff';
+    expect(style.color).toEqual('rgba(255, 255, 255, 1)');
+    style.color = '#fffa';
+    expect(style.color).toEqual('rgba(255, 255, 255, 0.667)');
+    style.color = '#ffffff66';
+    expect(style.color).toEqual('rgba(255, 255, 255, 0.4)');
+  });
+
+  test('short hand properties with embedded spaces', () => {
+    var style = new CSSStyleDeclaration();
+    style.background = 'rgb(0, 0, 0) url(/something/somewhere.jpg)';
+    expect(style.backgroundColor).toEqual('rgb(0, 0, 0)');
+    expect(style.backgroundImage).toEqual('url(/something/somewhere.jpg)');
+    expect(style.cssText).toEqual('background: rgb(0, 0, 0) url(/something/somewhere.jpg);');
+    style = new CSSStyleDeclaration();
+    style.border = '  1px  solid   black  ';
+    expect(style.border).toEqual('1px solid black');
+  });
+
+  test('setting shorthand properties to an empty string should clear all dependent properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.borderWidth = '1px';
+    expect(style.cssText).toEqual('border-width: 1px;');
+    style.border = '';
+    expect(style.cssText).toEqual('');
+  });
+
+  test('setting implicit properties to an empty string should clear all dependent properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.borderTopWidth = '1px';
+    expect(style.cssText).toEqual('border-top-width: 1px;');
+    style.borderWidth = '';
+    expect(style.cssText).toEqual('');
+  });
+
+  test('setting a shorthand property, whose shorthands are implicit properties, to an empty string should clear all dependent properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.borderTopWidth = '1px';
+    expect(style.cssText).toEqual('border-top-width: 1px;');
+    style.border = '';
+    expect(style.cssText).toEqual('');
+    style.borderTop = '1px solid black';
+    expect(style.cssText).toEqual('border-top: 1px solid black;');
+    style.border = '';
+    expect(style.cssText).toEqual('');
+  });
+
+  test('setting border values to "none" should clear dependent values', () => {
+    var style = new CSSStyleDeclaration();
+    style.borderTopWidth = '1px';
+    expect(style.cssText).toEqual('border-top-width: 1px;');
+    style.border = 'none';
+    expect(style.cssText).toEqual('');
+    style.borderTopWidth = '1px';
+    expect(style.cssText).toEqual('border-top-width: 1px;');
+    style.borderTopStyle = 'none';
+    expect(style.cssText).toEqual('');
+    style.borderTopWidth = '1px';
+    expect(style.cssText).toEqual('border-top-width: 1px;');
+    style.borderTop = 'none';
+    expect(style.cssText).toEqual('');
+    style.borderTopWidth = '1px';
+    style.borderLeftWidth = '1px';
+    expect(style.cssText).toEqual('border-top-width: 1px; border-left-width: 1px;');
+    style.borderTop = 'none';
+    expect(style.cssText).toEqual('border-left-width: 1px;');
+  });
+
+  test('setting border to 0 should be okay', () => {
+    var style = new CSSStyleDeclaration();
+    style.border = 0;
+    expect(style.cssText).toEqual('border: 0px;');
+  });
+
+  test('setting values implicit and shorthand properties via csstext and setproperty should propagate to dependent properties', () => {
+    var style = new CSSStyleDeclaration();
+    style.cssText = 'border: 1px solid black;';
+    expect(style.cssText).toEqual('border: 1px solid black;');
+    expect(style.borderTop).toEqual('1px solid black');
+    style.border = '';
+    expect(style.cssText).toEqual('');
+    style.setProperty('border', '1px solid black');
+    expect(style.cssText).toEqual('border: 1px solid black;');
+  });
+
+  test('setting opacity should work', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('opacity', 0.75);
+    expect(style.cssText).toEqual('opacity: 0.75;');
+    style.opacity = '0.50';
+    expect(style.cssText).toEqual('opacity: 0.5;');
+    style.opacity = 1;
+    expect(style.cssText).toEqual('opacity: 1;');
+  });
+
+  test('width and height of auto should work', () => {
+    var style = new CSSStyleDeclaration();
+    style.width = 'auto';
+    expect(style.cssText).toEqual('width: auto;');
+    expect(style.width).toEqual('auto');
+    style = new CSSStyleDeclaration();
+    style.height = 'auto';
+    expect(style.cssText).toEqual('height: auto;');
+    expect(style.height).toEqual('auto');
+  });
+
+  test('padding and margin should set/clear shorthand properties', () => {
+    var style = new CSSStyleDeclaration();
+    var parts = ['Top', 'Right', 'Bottom', 'Left'];
+    var testParts = function(name, v, V) {
+      style[name] = v;
+      for (var i = 0; i < 4; i++) {
+        var part = name + parts[i];
+        expect(style[part]).toEqual(V[i]);
+      }
+
+      expect(style[name]).toEqual(v);
+      style[name] = '';
+    };
+    testParts('padding', '1px', ['1px', '1px', '1px', '1px']);
+    testParts('padding', '1px 2%', ['1px', '2%', '1px', '2%']);
+    testParts('padding', '1px 2px 3px', ['1px', '2px', '3px', '2px']);
+    testParts('padding', '1px 2px 3px 4px', ['1px', '2px', '3px', '4px']);
+    style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = '1px';
+    testParts('padding', '', ['', '', '', '']);
+    testParts('margin', '1px', ['1px', '1px', '1px', '1px']);
+    testParts('margin', '1px auto', ['1px', 'auto', '1px', 'auto']);
+    testParts('margin', '1px 2% 3px', ['1px', '2%', '3px', '2%']);
+    testParts('margin', '1px 2px 3px 4px', ['1px', '2px', '3px', '4px']);
+    style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = '1px';
+    testParts('margin', '', ['', '', '', '']);
+  });
+
+  test('padding and margin shorthands should set main properties', () => {
+    var style = new CSSStyleDeclaration();
+    var parts = ['Top', 'Right', 'Bottom', 'Left'];
+    var testParts = function(name, v, V) {
+      var expected;
+      for (var i = 0; i < 4; i++) {
+        style[name] = v;
+        style[name + parts[i]] = V;
+        expected = v.split(/ /);
+        expected[i] = V;
+        expected = expected.join(' ');
+
+        expect(style[name]).toEqual(expected);
+      }
+    };
+    testParts('padding', '1px 2px 3px 4px', '10px');
+    testParts('margin', '1px 2px 3px 4px', '10px');
+    testParts('margin', '1px 2px 3px 4px', 'auto');
+  });
+
+  test('setting a value to 0 should return the string value', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('fill-opacity', 0);
+    expect(style.fillOpacity).toEqual('0');
+  });
+
+  test('onchange callback should be called when the csstext changes', () => {
+    var style = new CSSStyleDeclaration(function(cssText) {
+      expect(cssText).toEqual('opacity: 0;');
+    });
+    style.setProperty('opacity', 0);
+  });
+
+  test('setting float should work the same as cssfloat', () => {
+    var style = new CSSStyleDeclaration();
+    style.float = 'left';
+    expect(style.cssFloat).toEqual('left');
+  });
+
+  test('setting improper css to csstext should not throw', () => {
+    var style = new CSSStyleDeclaration();
+    style.cssText = 'color: ';
+    expect(style.cssText).toEqual('');
+    style.color = 'black';
+    style.cssText = 'float: ';
+    expect(style.cssText).toEqual('');
+  });
+
+  test('url parsing works with quotes', () => {
+    var style = new CSSStyleDeclaration();
+    style.backgroundImage = 'url(http://some/url/here1.png)';
+    expect(style.backgroundImage).toEqual('url(http://some/url/here1.png)');
+    style.backgroundImage = "url('http://some/url/here2.png')";
+    expect(style.backgroundImage).toEqual('url(http://some/url/here2.png)');
+    style.backgroundImage = 'url("http://some/url/here3.png")';
+    expect(style.backgroundImage).toEqual('url(http://some/url/here3.png)');
+  });
+
+  test('setting 0 to a padding or margin works', () => {
+    var style = new CSSStyleDeclaration();
+    style.padding = 0;
+    expect(style.cssText).toEqual('padding: 0px;');
+    style.margin = '1em';
+    style.marginTop = '0';
+    expect(style.marginTop).toEqual('0px');
+  });
+
+  test('setting ex units to a padding or margin works', () => {
+    var style = new CSSStyleDeclaration();
+    style.padding = '1ex';
+    expect(style.cssText).toEqual('padding: 1ex;');
+    style.margin = '1em';
+    style.marginTop = '0.5ex';
+    expect(style.marginTop).toEqual('0.5ex');
+  });
+
+  test('setting null to background works', () => {
+    var style = new CSSStyleDeclaration();
+    style.background = 'red';
+    expect(style.cssText).toEqual('background: red;');
+    style.background = null;
+    expect(style.cssText).toEqual('');
+  });
+
+  test('flex properties should keep their values', () => {
+    var style = new CSSStyleDeclaration();
+    style.flexDirection = 'column';
+    expect(style.cssText).toEqual('flex-direction: column;');
+    style.flexDirection = 'row';
+    expect(style.cssText).toEqual('flex-direction: row;');
+  });
+
+  test('camelcase properties are not assigned with `.setproperty()`', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('fontSize', '12px');
+    expect(style.cssText).toEqual('');
+  });
+
+  test('casing is ignored in `.setproperty()`', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('FoNt-SiZe', '12px');
+    expect(style.fontSize).toEqual('12px');
+    expect(style.getPropertyValue('font-size')).toEqual('12px');
+  });
+
+  test('support non string entries in border-spacing', () => {
+    var style = new CSSStyleDeclaration();
+    style.borderSpacing = 0;
+    expect(style.cssText).toEqual('border-spacing: 0px;');
+  });
+
+  test('float should be valid property for `.setproperty()`', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('float', 'left');
+    expect(style.float).toEqual('left');
+    expect(style.getPropertyValue('float')).toEqual('left');
+  });
+
+  test('flex-shrink works', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('flex-shrink', 0);
+    expect(style.getPropertyValue('flex-shrink')).toEqual('0');
+    style.setProperty('flex-shrink', 1);
+    expect(style.getPropertyValue('flex-shrink')).toEqual('1');
+    expect(style.cssText).toEqual('flex-shrink: 1;');
+  });
+
+  test('flex-grow works', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('flex-grow', 2);
+    expect(style.getPropertyValue('flex-grow')).toEqual('2');
+    expect(style.cssText).toEqual('flex-grow: 2;');
+  });
+
+  test('flex-basis works', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('flex-basis', 0);
+    expect(style.getPropertyValue('flex-basis')).toEqual('0px');
+    style.setProperty('flex-basis', '250px');
+    expect(style.getPropertyValue('flex-basis')).toEqual('250px');
+    style.setProperty('flex-basis', '10em');
+    expect(style.getPropertyValue('flex-basis')).toEqual('10em');
+    style.setProperty('flex-basis', '30%');
+    expect(style.getPropertyValue('flex-basis')).toEqual('30%');
+    expect(style.cssText).toEqual('flex-basis: 30%;');
+  });
+
+  test('shorthand flex works', () => {
+    var style = new CSSStyleDeclaration();
+    style.setProperty('flex', 'none');
+    expect(style.getPropertyValue('flex-grow')).toEqual('0');
+    expect(style.getPropertyValue('flex-shrink')).toEqual('0');
+    expect(style.getPropertyValue('flex-basis')).toEqual('auto');
+    style.removeProperty('flex');
+    style.removeProperty('flex-basis');
+    style.setProperty('flex', 'auto');
+    expect(style.getPropertyValue('flex-grow')).toEqual('');
+    expect(style.getPropertyValue('flex-shrink')).toEqual('');
+    expect(style.getPropertyValue('flex-basis')).toEqual('auto');
+    style.removeProperty('flex');
+    style.setProperty('flex', '0 1 250px');
+    expect(style.getPropertyValue('flex')).toEqual('0 1 250px');
+    expect(style.getPropertyValue('flex-grow')).toEqual('0');
+    expect(style.getPropertyValue('flex-shrink')).toEqual('1');
+    expect(style.getPropertyValue('flex-basis')).toEqual('250px');
+    style.removeProperty('flex');
+    style.setProperty('flex', '2');
+    expect(style.getPropertyValue('flex-grow')).toEqual('2');
+    expect(style.getPropertyValue('flex-shrink')).toEqual('');
+    expect(style.getPropertyValue('flex-basis')).toEqual('');
+    style.removeProperty('flex');
+    style.setProperty('flex', '20%');
+    expect(style.getPropertyValue('flex-grow')).toEqual('');
+    expect(style.getPropertyValue('flex-shrink')).toEqual('');
+    expect(style.getPropertyValue('flex-basis')).toEqual('20%');
+    style.removeProperty('flex');
+    style.setProperty('flex', '2 2');
+    expect(style.getPropertyValue('flex-grow')).toEqual('2');
+    expect(style.getPropertyValue('flex-shrink')).toEqual('2');
+    expect(style.getPropertyValue('flex-basis')).toEqual('');
+    style.removeProperty('flex');
+  });
+
+  test('font-size get a valid value', () => {
+    var style = new CSSStyleDeclaration();
+    const invalidValue = '1r5px';
+    style.cssText = 'font-size: 15px';
+    expect(1).toEqual(style.length);
+    style.cssText = `font-size: ${invalidValue}`;
+    expect(0).toEqual(style.length);
+    expect(undefined).toEqual(style[0]);
+  });
+
+  test('getPropertyValue for custom properties in cssText', () => {
+    const style = new CSSStyleDeclaration();
+    style.cssText = '--foo: red';
+
+    expect(style.getPropertyValue('--foo')).toEqual('red');
+  });
+
+  test('getPropertyValue for custom properties with setProperty', () => {
+    const style = new CSSStyleDeclaration();
+    style.setProperty('--bar', 'blue');
+
+    expect(style.getPropertyValue('--bar')).toEqual('blue');
+  });
+
+  test('getPropertyValue for custom properties with object setter', () => {
+    const style = new CSSStyleDeclaration();
+    style['--baz'] = 'yellow';
+
+    expect(style.getPropertyValue('--baz')).toEqual('');
+  });
+
+  test('custom properties are case-sensitive', () => {
+    const style = new CSSStyleDeclaration();
+    style.cssText = '--fOo: purple';
+
+    expect(style.getPropertyValue('--foo')).toEqual('');
+    expect(style.getPropertyValue('--fOo')).toEqual('purple');
+  });
+
+  test('supports calc', () => {
+    const style = new CSSStyleDeclaration();
+    style.setProperty('width', 'calc(100% - 100px)');
+    expect(style.getPropertyValue('width')).toEqual('calc(100% - 100px)');
+  });
+});