fix(e2e): allow to fetch CSS variables assigned to host elements (#5682)

src/testing/puppeteer/puppeteer-element.ts

@@ -385,11 +385,29 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal
 
         const computedStyle = window.getComputedStyle(elm, pseudoElt);
 
-        const keys = Object.keys(computedStyle);
+        const keys = [
+          ...Object.keys(computedStyle),
+          /**
+           * include CSS variables defined within the style attribute
+           * of an element, e.g.:
+           * ```
+           * <my-component style="--my-component-text-color: rgb(255, 0, 0);"></my-component>
+           * ```
+           */
+          ...Array.from((elm as HTMLElement).style),
+        ];
 
         keys.forEach((key) => {
           if (isNaN(key as any)) {
-            const value = computedStyle[key as any];
+            const value =
+              /**
+               * access property directly for any known css property
+               */
+              computedStyle[key as any] ||
+              /**
+               * use `getPropertyValue` for css variables
+               */
+              computedStyle.getPropertyValue(key);
             if (value != null) {
               rtn[key] = value;
             }

test/end-to-end/src/element-cmp/element-cmp.e2e.ts

@@ -56,4 +56,14 @@ describe('@Element', () => {
 
     expect(elm).toEqualText('inner content');
   });
+
+  it('should get computed styles of CSS vars assigned on host element', async () => {
+    const page = await newE2EPage({
+      html: `
+      <element-cmp id="my-elm" style="--my-component-text-color: rgb(255, 0, 0);"></element-cmp>
+    `,
+    });
+    const el = await page.find('element-cmp');
+    expect((await el.getComputedStyle()).getPropertyValue('--my-component-text-color')).toEqual('rgb(255, 0, 0)');
+  });
 });