From 10679003a8cec24f9c1f559bdd0c241ec02319a4 Mon Sep 17 00:00:00 2001
From: Evert Heylen <evertheylen@gmail.com>
Date: Tue, 31 Jan 2023 09:27:18 +0100
Subject: [PATCH] fix: use clientWidth/clientHeight instead of
 getBoundingClientRect (#1395)

* fix: use clientWidth/clientHeight instead of getBoundingClientRect

* fix(test): properly mock clientWidth and clientHeight
---
 src/svg/Svg.ts   |  8 ++++----
 test/mock/dom.ts | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/svg/Svg.ts b/src/svg/Svg.ts
index f17a9cad..1fbd0f33 100644
--- a/src/svg/Svg.ts
+++ b/src/svg/Svg.ts
@@ -330,19 +330,19 @@ export class Svg {
   }
 
   /**
-   * Get element height using `getBoundingClientRect`
+   * Get element height using `clientHeight`
    * @return The elements height in pixels
    */
   height() {
-    return this._node.getBoundingClientRect().height;
+    return this._node.clientHeight;
   }
 
   /**
-   * Get element width using `getBoundingClientRect`
+   * Get element width using `clientWidth`
    * @return The elements width in pixels
    */
   width() {
-    return this._node.getBoundingClientRect().width;
+    return this._node.clientWidth;
   }
 
   /**
diff --git a/test/mock/dom.ts b/test/mock/dom.ts
index 7670d4bc..aa9a8759 100644
--- a/test/mock/dom.ts
+++ b/test/mock/dom.ts
@@ -42,8 +42,32 @@ export function mockDomRects() {
     bottom: 0,
     left: 0
   });
+
+  Object.defineProperties(SVGElement.prototype, {
+    clientWidth: {
+      configurable: true,
+      get: () => 500
+    },
+    clientHeight: {
+      configurable: true,
+      get: () => 500
+    }
+  });
 }
 
 export function destroyMockDomRects() {
   SVGElement.prototype.getBoundingClientRect = getBoundingClientRect;
+
+  // Redefine clientWidth and clientHeight properties from the prototype of SVGElement
+  const ElementPrototype = Object.getPrototypeOf(SVGElement.prototype);
+  Object.defineProperties(SVGElement.prototype, {
+    clientWidth: Object.getOwnPropertyDescriptor(
+      ElementPrototype,
+      'clientWidth'
+    )!,
+    clientHeight: Object.getOwnPropertyDescriptor(
+      ElementPrototype,
+      'clientHeight'
+    )!
+  });
 }