Skip to content

Commit

Permalink
Allow only one pair of property name - value per rule
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdamWr
AdamWr committed Jan 26, 2024
1 parent a12558a commit 6403dc8
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 140 deletions.
28 changes: 4 additions & 24 deletions src/scriptlets/spoof-css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand All @@ -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.
*/
Expand Down Expand Up @@ -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) => {
Expand Down
116 changes: 0 additions & 116 deletions tests/scriptlets/spoof-css.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';

Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 6403dc8

Please sign in to comment.