Skip to content

Commit

Permalink
fix(e2e): allow to fetch CSS variables assigned to host elements (#5682)
Browse files Browse the repository at this point in the history
  • Loading branch information
christian-bromann committed May 13, 2024
1 parent a3c0f37 commit e420eb6
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 2 deletions.
22 changes: 20 additions & 2 deletions src/testing/puppeteer/puppeteer-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
10 changes: 10 additions & 0 deletions test/end-to-end/src/element-cmp/element-cmp.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)');
});
});

0 comments on commit e420eb6

Please sign in to comment.