do not apply CssHitsCounter 'content' style on selected elements. AG-…

…17957 Squashed commit of the following: commit 179b99c Author: Slava Leleka <[email protected]> Date: Fri Dec 2 18:25:21 2022 +0200 remove comment commit 326a2a7 Merge: 9dd3729 d7f44fd Author: Slava Leleka <[email protected]> Date: Fri Dec 2 18:24:34 2022 +0200 Merge branch 'master' into fix/AG-17957_01 commit 9dd3729 Author: Slava Leleka <[email protected]> Date: Fri Dec 2 12:47:11 2022 +0200 improve test for CssHitsCounter content commit 5321fbf Author: Slava Leleka <[email protected]> Date: Thu Dec 1 21:28:20 2022 +0200 beautify commit ee0bf6d Author: Slava Leleka <[email protected]> Date: Thu Dec 1 21:27:58 2022 +0200 beautify commit daefe41 Author: Slava Leleka <[email protected]> Date: Thu Dec 1 21:24:57 2022 +0200 do not apply content style on selected elements
AdguardTeam · Dec 2, 2022 · 8d1517a · 8d1517a
1 parent d7f44fd
commit 8d1517a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -200,6 +200,8 @@ export const REGULAR_PSEUDO_ELEMENTS = {
     TARGET_TEXT: 'target-text',
 };
 
+export const CONTENT_CSS_PROPERTY = 'content';
+
 export const PSEUDO_PROPERTY_POSITIVE_VALUE = 'true';
 export const DEBUG_PSEUDO_PROPERTY_GLOBAL_VALUE = 'global';
 

diff --git a/src/extended-css/helpers/style-setter.ts b/src/extended-css/helpers/style-setter.ts
@@ -9,8 +9,12 @@ import {
     MAX_STYLE_PROTECTION_COUNT,
     PSEUDO_PROPERTY_POSITIVE_VALUE,
     REMOVE_PSEUDO_MARKER,
+    CONTENT_CSS_PROPERTY,
 } from '../../common/constants';
 
+// added by tsurlfilter's CssHitsCounter
+const CONTENT_ATTR_PREFIX_REGEXP = /^("|')adguard.+?/;
+
 /**
  * Removes affectedElement.node from DOM.
  *
@@ -57,6 +61,11 @@ export const setStyleToElement = (node: Node, style: CssStyleMap): void => {
             if (!value) {
                 return;
             }
+            // do not apply 'content' style given by tsurlfilter
+            // which is needed only for BeforeStyleAppliedCallback
+            if (prop === CONTENT_CSS_PROPERTY && value.match(CONTENT_ATTR_PREFIX_REGEXP)) {
+                return;
+            }
             // First we should remove !important attribute (or it won't be applied')
             value = removeSuffix(value.trim(), '!important').trim();
             node.style.setProperty(prop, value, 'important');

diff --git a/src/stylesheet/parser.ts b/src/stylesheet/parser.ts
@@ -21,12 +21,11 @@ import {
     REMOVE_ERROR_PREFIX,
     SLASH,
     ASTERISK,
+    CONTENT_CSS_PROPERTY,
 } from '../common/constants';
 
 const DEBUG_PSEUDO_PROPERTY_KEY = 'debug';
 
-const CONTENT_CSS_PROPERTY = 'content';
-
 const REGEXP_DECLARATION_END = /[;}]/g;
 const REGEXP_DECLARATION_DIVIDER = /[;:}]/g;
 const REGEXP_NON_WHITESPACE = /\S/g;

diff --git a/test/extended-css.test.ts b/test/extended-css.test.ts
@@ -741,4 +741,31 @@ describe('extended css library', () => {
 
         extendedCss.apply();
     });
+
+    it("do not apply CssHitsCounter's 'content' style to selected element", () => {
+        document.body.innerHTML = `
+            <div id="case14">
+                <div id="case14-hidden-no-content"></div>
+            </div>
+        `;
+        const styleSheet = '#case14>div { display: none; content: "adguardTestContentRuleText" !important }';
+        const extendedCss = new ExtendedCss({ styleSheet });
+        extendedCss.apply();
+
+        const affectedElements = extendedCss.getAffectedElements();
+        // one element matched
+        expect(affectedElements.length).toBe(1);
+        // one rule applied
+        expect(affectedElements[0].rules.length).toBe(1);
+
+        const expectRuleStyle = {
+            display: 'none',
+            content: '"adguardTestContentRuleText" !important',
+        };
+        // 'content' in affectedElement is needed for CssHitsCounter
+        expect(affectedElements[0].rules[0].style).toEqual(expectRuleStyle);
+
+        // but it should not be set in matched element style
+        expectElementStyle('case14-hidden-no-content', { display: 'none', content: '' });
+    });
 });