fix: check for CQU in shadow container for Safari (#10296) (#10325)

Author: DiegoCardoso

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;
 }
 
 /**

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);
+    });
   });
 });