AG-42075 Fix 'spoof-css' — DOMRect is set incorrectly. #498

Squashed commit of the following:

commit e3b53b9
Merge: 38497ba ed3dcd8
Author: Adam Wróblewski <[email protected]>
Date:   Fri May 23 13:56:28 2025 +0200

    Merge branch 'master' into fix/AG-42075

commit 38497ba
Author: Slava Leleka <[email protected]>
Date:   Wed May 21 17:16:34 2025 +0300

    Update changelog

commit 861df71
Author: Adam Wróblewski <[email protected]>
Date:   Wed May 21 14:22:49 2025 +0200

    Fix `DOMRect` in `spoof-css` scriptlet

Author: AdamWr

CHANGELOG.md

@@ -33,6 +33,7 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 
 ### Fixed
 
+- `spoof-css` scriptlet — incorrect `DOMRect` setting [#498].
 - Escaping quotes in `trusted-replace-node-text` scriptlet [#440].
 - `trusted-suppress-native-method` scriptlet, `isMatchingSuspended` was not reset when the stack does not match,
   so in some cases given method was not prevented [#496].
@@ -44,6 +45,7 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 [#477]: https://github.com/AdguardTeam/Scriptlets/issues/477
 [#496]: https://github.com/AdguardTeam/Scriptlets/issues/496
 [#497]: https://github.com/AdguardTeam/Scriptlets/issues/497
+[#498]: https://github.com/AdguardTeam/Scriptlets/issues/498
 
 ## [v2.1.7] - 2025-04-03
 

src/scriptlets/spoof-css.js

@@ -201,15 +201,13 @@ export function spoofCSS(source, selectors, cssPropertyName, cssPropertyValue) {
         }
 
         const {
-            top,
-            bottom,
+            x,
+            y,
             height,
             width,
-            left,
-            right,
         } = rect;
 
-        const newDOMRect = new window.DOMRect(rect.x, rect.y, top, bottom, width, height, left, right);
+        const newDOMRect = new window.DOMRect(x, y, width, height);
 
         if (propToValueMap.has('top')) {
             setRectValue(newDOMRect, 'top', propToValueMap.get('top'));

tests/scriptlets/spoof-css.test.js

@@ -440,6 +440,68 @@ test('One selector and one property - getBoundingClientRect height', (assert) =>
     matchStyle.remove();
 });
 
+test('One selector and one property - check if "width" in getBoundingClientRect is set correctly', (assert) => {
+    const EXPECTED_WIDTH = 100;
+    const EXPECTED_VISIBILITY = 'hidden';
+    const matchClassName = 'testClassClientRect';
+
+    const matchElem = createElem(matchClassName);
+    const cssProperty = 'height: 100px !important; width: 100px !important; visibility: visible !important;';
+    const matchStyle = addStyle(`.${matchClassName} { ${cssProperty} }`);
+
+    const cssNameProperty = 'visibility';
+    const cssValueProperty = `${EXPECTED_VISIBILITY}`;
+
+    const scriptletArgs = [`.${matchClassName}`, cssNameProperty, cssValueProperty];
+    runScriptlet(name, scriptletArgs);
+
+    const boundingClientRect = matchElem.getBoundingClientRect();
+    const elStyleWidth = boundingClientRect.width;
+    const elStyleVisibility = window.getComputedStyle(matchElem).visibility;
+
+    assert.strictEqual(elStyleWidth, EXPECTED_WIDTH, `width is set to ${EXPECTED_WIDTH}`);
+    assert.strictEqual(elStyleVisibility, EXPECTED_VISIBILITY, `visibility is set to ${EXPECTED_VISIBILITY}`);
+    assert.strictEqual(window.hit, 'FIRED');
+
+    clearGlobalProps('hit');
+    matchElem.remove();
+    matchStyle.remove();
+});
+
+test('Two separated scriptlets - getBoundingClientRect - width and height', (assert) => {
+    const EXPECTED_HEIGHT = 7000;
+    const EXPECTED_WIDTH = 8000;
+    const matchClassName = 'testClassClientRect';
+
+    const matchElem = createElem(matchClassName);
+    const cssProperty = 'height: 100px !important; width: 100px !important;';
+    const matchStyle = addStyle(`.${matchClassName} { ${cssProperty} }`);
+
+    const cssNamePropertyOne = 'height';
+    const cssValuePropertyOne = `${EXPECTED_HEIGHT}`;
+
+    const scriptletArgsOne = [`.${matchClassName}`, cssNamePropertyOne, cssValuePropertyOne];
+    runScriptlet(name, scriptletArgsOne);
+
+    const cssNamePropertyTwo = 'width';
+    const cssValuePropertyTwo = `${EXPECTED_WIDTH}`;
+
+    const scriptletArgsTwo = [`.${matchClassName}`, cssNamePropertyTwo, cssValuePropertyTwo];
+    runScriptlet(name, scriptletArgsTwo);
+
+    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_WIDTH}`);
+    assert.strictEqual(window.hit, 'FIRED');
+
+    clearGlobalProps('hit');
+    matchElem.remove();
+    matchStyle.remove();
+});
+
 test('One selector and one property - getBoundingClientRect top', (assert) => {
     const EXPECTED_TOP = 2050;
     const matchClassName = 'testClassClientRect';