Allow only one pair of property name - value per rule

Author: AdamWr

src/scriptlets/spoof-css.js

@@ -19,8 +19,8 @@ import {
  * ```
  *
  * - `selectors` — string of comma-separated selectors to match
- * - `cssPropertyName` — CSS property name, separated by a comma
- * - `cssPropertyValue` — CSS property value, separated by a comma
+ * - `cssPropertyName` — CSS property name
+ * - `cssPropertyValue` — CSS property value
  * - `debug` — optional, if set to `debug`, will trigger debugger statement
  *   when `getComputedStyle()` or `getBoundingClientRect()` methods is called
  *
@@ -33,24 +33,12 @@ import {
  *     example.org#%#//scriptlet('spoof-css', '.adsbygoogle', 'display', 'block')
  *     ```
  *
- * 2. Spoof CSS property value `display` to `block`, `visibility` to `visible` for all elements with class `adsbygoogle`:
- *
- *     ```adblock
- *     example.org#%#//scriptlet('spoof-css', '.adsbygoogle', 'display, visibility', 'block, visible')
- *     ```
- *
- * 3. Spoof CSS property value `height` to `100` for all elements with class `adsbygoogle` and `advert`:
+ * 2. Spoof CSS property value `height` to `100` for all elements with class `adsbygoogle` and `advert`:
  *
  *     ```adblock
  *     example.org#%#//scriptlet('spoof-css', '.adsbygoogle, .advert', 'height', '100')
  *     ```
  *
- * 4. Spoof CSS property value `height` to `100`, `display` to `block`
- *   for all elements with class `adsbygoogle` and `advert`:
- *
- *     ```adblock
- *     example.org#%#//scriptlet('spoof-css', '.adsbygoogle, .advert', 'height, display', '100, block')
- *     ```
  *
  * @added unknown.
  */
@@ -115,15 +103,7 @@ export function spoofCSS(source, selectors, cssPropertyName, cssPropertyValue, d
             propToValueMap.set(convertToCamelCase(arrayOfProperties[i]), arrayOfProperties[i + 1]);
         }
     } else if (cssPropertyName && cssPropertyValue) {
-        const arrayOfCssNames = cssPropertyName.replace(/\s+/g, '').split(',');
-        const arrayOfCssValues = cssPropertyValue.replace(/\s+/g, '').split(',');
-
-        for (let i = 0; i < arrayOfCssNames.length; i += 1) {
-            if (arrayOfCssNames[i] === '') {
-                break;
-            }
-            propToValueMap.set(convertToCamelCase(arrayOfCssNames[i]), arrayOfCssValues[i]);
-        }
+        propToValueMap.set(convertToCamelCase(cssPropertyName), cssPropertyValue);
     }
 
     const spoofStyle = (cssProperty, realCssValue) => {

tests/scriptlets/spoof-css.test.js

@@ -316,36 +316,6 @@ test('One selector and two properties, set by two separate scriptlets - getCompu
     matchStyle.remove();
 });
 
-test('One selector and two properties - getComputedStyle', (assert) => {
-    const matchClassName = 'testClassFewProps';
-
-    const matchElem = createElem(matchClassName);
-    const cssProperty = 'display: none !important; visibility: hidden !important;';
-    const matchStyle = addStyle(`.${matchClassName} { ${cssProperty} }`);
-
-    const cssNameProperty = 'display, visibility';
-    const cssValueProperty = 'block, visible';
-
-    const scriptletArgs = [`.${matchClassName}`, cssNameProperty, cssValueProperty];
-    runScriptlet(name, scriptletArgs);
-
-    const computedStyle = window.getComputedStyle(matchElem);
-    const elStyleDisplay = computedStyle.display;
-    const elStylePropValDisplay = computedStyle.getPropertyValue('display');
-    const elStyleVisibility = computedStyle.visibility;
-    const elStylePropValVisibility = computedStyle.getPropertyValue('visibility');
-
-    assert.strictEqual(elStyleDisplay, 'block', 'display style is set to block');
-    assert.strictEqual(elStylePropValDisplay, 'block', 'display style is set to block - getPropertyValue');
-    assert.strictEqual(elStyleVisibility, 'visible', 'visibility style is set to visible');
-    assert.strictEqual(elStylePropValVisibility, 'visible', 'visibility style is set to visible - getPropertyValue');
-    assert.strictEqual(window.hit, 'FIRED');
-
-    clearGlobalProps('hit');
-    matchElem.remove();
-    matchStyle.remove();
-});
-
 test('Two selectors and one property - getComputedStyle', (assert) => {
     const matchClassNameFirst = 'testClassFirst';
     const matchClassNameSecond = 'testClassSecond';
@@ -421,64 +391,6 @@ test('Two selectors divided by escaped comma and one property - getComputedStyle
     matchStyle.remove();
 });
 
-test('Two selectors and two properties - getComputedStyle', (assert) => {
-    const matchClassNameFirst = 'testClassFirst';
-    const matchClassNameSecond = 'testClassSecond';
-
-    const matchElemFirst = createElem(matchClassNameFirst);
-    const matchElemSecond = createElem(matchClassNameFirst);
-    const cssProperty = 'display: none !important; visibility: hidden !important;';
-    const matchStyle = addStyle(
-        `
-        .${matchClassNameFirst} { ${cssProperty} }
-        .${matchClassNameSecond} { ${cssProperty} }
-        `,
-    );
-
-    const cssNameProperty = 'display, visibility';
-    const cssValueProperty = 'block, visible';
-
-    const scriptletArgs = [`.${matchClassNameFirst}, .${matchClassNameSecond}`, cssNameProperty, cssValueProperty];
-    runScriptlet(name, scriptletArgs);
-
-    const computedStyleSecond = window.getComputedStyle(matchElemSecond);
-    const elStyleDisplaySecond = computedStyleSecond.display;
-    const elStylePropValDisplaySecond = computedStyleSecond.getPropertyValue('display');
-    const elStyleVisibilitySecond = computedStyleSecond.visibility;
-    const elStylePropValVisibilitySecond = computedStyleSecond.getPropertyValue('visibility');
-
-    const computedStyleFirst = window.getComputedStyle(matchElemFirst);
-    const elStyleDisplayFirst = computedStyleFirst.display;
-    const elStylePropValDisplayFirst = computedStyleFirst.getPropertyValue('display');
-    const elStyleVisibilityFirst = computedStyleFirst.visibility;
-    const elStylePropValVisibilityFirst = computedStyleFirst.getPropertyValue('visibility');
-
-    assert.strictEqual(elStyleDisplayFirst, 'block', 'display style is set to block');
-    assert.strictEqual(elStylePropValDisplayFirst, 'block', 'display style is set to block - getPropertyValue');
-    assert.strictEqual(elStyleVisibilityFirst, 'visible', 'visibility style is set to visible');
-    assert.strictEqual(
-        elStylePropValVisibilityFirst,
-        'visible',
-        'visibility style is set to visible - getPropertyValue',
-    );
-
-    assert.strictEqual(elStyleDisplaySecond, 'block', 'display style is set to block');
-    assert.strictEqual(elStylePropValDisplaySecond, 'block', 'display style is set to block - getPropertyValue');
-    assert.strictEqual(elStyleVisibilitySecond, 'visible', 'visibility style is set to visible');
-    assert.strictEqual(
-        elStylePropValVisibilitySecond,
-        'visible',
-        'visibility style is set to visible - getPropertyValue',
-    );
-
-    assert.strictEqual(window.hit, 'FIRED');
-
-    clearGlobalProps('hit');
-    matchElemFirst.remove();
-    matchElemSecond.remove();
-    matchStyle.remove();
-});
-
 test('One selector and one property - getComputedStyle getOwnPropertyDescriptor', (assert) => {
     const matchClassName = 'testClassGetOwnPropertyDescriptor';
 
@@ -553,34 +465,6 @@ test('One selector and one property - getBoundingClientRect top', (assert) => {
     matchStyle.remove();
 });
 
-test('One selector and two properties - getBoundingClientRect', (assert) => {
-    const EXPECTED_HEIGHT = 555;
-    const EXPECTED_WIDTH = 666;
-    const matchClassName = 'testClassClientRect';
-
-    const matchElem = createElem(matchClassName);
-    const cssProperty = 'height: 100px !important; width: 100px !important;';
-    const matchStyle = addStyle(`.${matchClassName} { ${cssProperty} }`);
-
-    const cssNameProperty = 'height, width';
-    const cssValueProperty = `${EXPECTED_HEIGHT}, ${EXPECTED_WIDTH}`;
-
-    const scriptletArgs = [`.${matchClassName}`, cssNameProperty, cssValueProperty];
-    runScriptlet(name, scriptletArgs);
-
-    const boundingClientRect = matchElem.getBoundingClientRect();
-    const elStyleHeight = boundingClientRect.height;
-    const elStyleWidth = boundingClientRect.width;
-
-    assert.strictEqual(elStyleHeight, EXPECTED_HEIGHT, `height is set to ${EXPECTED_HEIGHT}`);
-    assert.strictEqual(elStyleWidth, EXPECTED_WIDTH, `width is set to ${EXPECTED_HEIGHT}`);
-    assert.strictEqual(window.hit, 'FIRED');
-
-    clearGlobalProps('hit');
-    matchElem.remove();
-    matchStyle.remove();
-});
-
 test('Native code check', (assert) => {
     const matchClassName = 'testClassNativeCode';
     const matchElem = createElem(matchClassName);