feat: add background-size, background-origin, background-clip

Author: cdoublev

lib/CSSStyleDeclaration.test.js

@@ -358,6 +358,42 @@ describe('properties', () => {
       expect(style.cssText).toEqual('');
     });
   });
+  describe('background-size', () => {
+    test('invalid', () => {
+      const style = new CSSStyleDeclaration();
+      const invalid = ['full', '100viewport', '100px cover', 'cover auto', 'cover contain'];
+      invalid.forEach(value => {
+        style.backgroundSize = value;
+        expect(style.backgroundSize).toBe('');
+      });
+    });
+    test('valid', () => {
+      const style = new CSSStyleDeclaration();
+      const valid = ['100px', '100px 100%', 'auto', 'cover', 'contain'];
+      valid.forEach(value => {
+        style.backgroundSize = value;
+        expect(style.backgroundSize).toBe(value);
+      });
+    });
+  });
+  describe('background-origin and background-clip', () => {
+    test('invalid', () => {
+      const style = new CSSStyleDeclaration();
+      const invalid = ['0', '0px', 'left left', 'margin-box', 'border-box border-box'];
+      invalid.forEach(value => {
+        style.backgroundOrigin = value;
+        expect(style.backgroundOrigin).toBe('');
+      });
+    });
+    test('valid', () => {
+      const style = new CSSStyleDeclaration();
+      const valid = ['border-box', 'content-box', 'padding-box'];
+      valid.forEach(value => {
+        style.backgroundOrigin = value;
+        expect(style.backgroundOrigin).toBe(value);
+      });
+    });
+  });
   describe('border', () => {
     test('"none" should propagate', () => {
       const style = new CSSStyleDeclaration();

lib/properties/backgroundClip.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const { parseBox } = require('../parsers');
+
+module.exports.parse = parseBox;
+
+module.exports.definition = {
+  set: function(v) {
+    this._setProperty('background-clip', parseBox(v));
+  },
+  get: function() {
+    return this.getPropertyValue('background-clip');
+  },
+  enumerable: true,
+  configurable: true,
+};

lib/properties/backgroundOrigin.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const { parseBox } = require('../parsers');
+
+module.exports.parse = parseBox;
+
+module.exports.definition = {
+  set: function(v) {
+    this._setProperty('background-origin', parseBox(v));
+  },
+  get: function() {
+    return this.getPropertyValue('background-origin');
+  },
+  enumerable: true,
+  configurable: true,
+};

lib/properties/backgroundSize.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const { parseKeyword, parseLengthOrPercentage, splitTokens } = require('../parsers');
+
+function parse(v) {
+  const keyword = parseKeyword(v, ['auto', 'cover', 'contain']);
+  if (keyword !== undefined) {
+    return keyword;
+  }
+  const [components] = splitTokens(v);
+  const { length: componentsLength } = components;
+  if (componentsLength > 2) {
+    return undefined;
+  }
+  const size = [];
+  for (let i = 0; i < componentsLength; i++) {
+    const component = components[i];
+    const parsed = parseLengthOrPercentage(component);
+    if (parsed === undefined) {
+      return undefined;
+    }
+    size.push(parsed);
+  }
+  return size.join(' ');
+}
+
+module.exports.parse = parse;
+
+module.exports.definition = {
+  set: function(v) {
+    this._setProperty('background-size', parse(v));
+  },
+  get: function() {
+    return this.getPropertyValue('background-size');
+  },
+  enumerable: true,
+  configurable: true,
+};