From 1b9802ba69d03c9947a52ee9b68f381680e8532b Mon Sep 17 00:00:00 2001
From: Diego Cardoso <diego@vaadin.com>
Date: Tue, 14 Oct 2025 13:52:16 +0200
Subject: [PATCH] fix: check for CQU in shadow container for Safari

Add the same check introduced in #10296 that adds the same testing
element to a container with shadow root.

It couldn't be cherry-picked since the changes have diverged in V25.
---
 packages/icon/src/vaadin-icon-helpers.js | 16 +++++++++++++---
 packages/icon/test/icon-font.test.js     | 13 +++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/icon/src/vaadin-icon-helpers.js b/packages/icon/src/vaadin-icon-helpers.js
index 0d5b63157c2..7d9a7a59e5f 100644
--- a/packages/icon/src/vaadin-icon-helpers.js
+++ b/packages/icon/src/vaadin-icon-helpers.js
@@ -28,11 +28,21 @@ export function supportsCQUnitsForPseudoElements() {
   const testElement = document.createElement('div');
   testElement.classList.add('vaadin-icon-test-element');
 
-  document.body.append(testStyle, testElement);
-  const { height } = getComputedStyle(testElement, '::before');
+  const shadowParent = document.createElement('div');
+  shadowParent.attachShadow({ mode: 'open' });
+  shadowParent.shadowRoot.innerHTML = '<slot></slot>';
+  shadowParent.append(testElement.cloneNode());
+
+  document.body.append(testStyle, testElement, shadowParent);
+
+  const needsFallback = [...document.querySelectorAll('.vaadin-icon-test-element')].find(
+    (el) => getComputedStyle(el, '::before').height !== '2px',
+  );
+
   testStyle.remove();
   testElement.remove();
-  return height === '2px';
+  shadowParent.remove();
+  return !needsFallback;
 }
 
 /**
diff --git a/packages/icon/test/icon-font.test.js b/packages/icon/test/icon-font.test.js
index f0059d94f7f..094693b6e08 100644
--- a/packages/icon/test/icon-font.test.js
+++ b/packages/icon/test/icon-font.test.js
@@ -334,5 +334,18 @@ describe('vaadin-icon - icon fonts', () => {
       await nextFrame(icon);
       expect(icon.style.getPropertyValue('--_vaadin-font-icon-size')).to.equal('');
     });
+
+    fallBackIt('should have the same height as the host with shadow root', async () => {
+      icon = fixtureSync('<vaadin-icon char="foo" style="--vaadin-icon-size: 24px"></vaadin-icon>');
+      const parent = fixtureSync('<div></div>');
+      parent.attachShadow({ mode: 'open' });
+      parent.shadowRoot.innerHTML = '<slot></slot>';
+
+      parent.append(icon);
+      await nextResize(icon);
+
+      const fontIconStyle = getComputedStyle(icon, ':before');
+      expect(parseInt(fontIconStyle.height)).to.be.closeTo(24, 1);
+    });
   });
 });