From 984ec8fb783e9b9fa2b0bd7a0ce72d6234c086dc Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Thu, 28 Sep 2023 12:25:28 +0200
Subject: [PATCH] MOBILE-4189 core: Fix collapsible header zoom

When the system font size is increased, the CSS values and computed style values are not equivalent. So we have to take that into account when mirroring styles to the floating title.
---
 src/core/directives/collapsible-header.ts |  4 +--
 src/core/singletons/dom.ts                | 34 +++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts
index bdc9dc474..0aaff8cef 100644
--- a/src/core/directives/collapsible-header.ts
+++ b/src/core/directives/collapsible-header.ts
@@ -378,8 +378,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                     textProperties.includes(property),
             )
             .reduce((styles, property) => {
-                styles[0][property] = collapsedTitleStyles.getPropertyValue(property);
-                styles[1][property] = expandedTitleStyles.getPropertyValue(property);
+                styles[0][property] = CoreDom.getCSSPropertyValue(collapsedTitleStyles, property);
+                styles[1][property] = CoreDom.getCSSPropertyValue(expandedTitleStyles, property);
 
                 return styles;
             }, [{}, {}]);
diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts
index 36bdceb2d..a969e6463 100644
--- a/src/core/singletons/dom.ts
+++ b/src/core/singletons/dom.ts
@@ -22,6 +22,8 @@ import { CoreEventObserver } from '@singletons/events';
  */
 export class CoreDom {
 
+    static fontSizeZoom: number | null = null;
+
     // Avoid creating singleton instances.
     private constructor() {
         // Nothing to do.
@@ -579,6 +581,38 @@ export class CoreDom {
         }
     }
 
+    /**
+     * Get CSS property value from computed styles.
+     *
+     * @param styles Computed styles.
+     * @param property Property name.
+     * @returns Property CSS value (may not be the same as the computed value).
+     */
+    static getCSSPropertyValue(styles: CSSStyleDeclaration, property: string): string {
+        const value = styles.getPropertyValue(property);
+
+        if (property === 'font-size') {
+            if (this.fontSizeZoom === null) {
+                const baseFontSize = 20;
+                const span = document.createElement('span');
+                span.style.opacity = '0';
+                span.style.fontSize = `${baseFontSize}px`;
+
+                document.body.append(span);
+
+                this.fontSizeZoom = baseFontSize / Number(getComputedStyle(span).fontSize.slice(0, -2));
+
+                span.remove();
+            }
+
+            if (this.fontSizeZoom !== 1) {
+                return `calc(${this.fontSizeZoom} * ${value})`;
+            }
+        }
+
+        return value;
+    }
+
 }
 
 /**