import { chromium } from 'playwright';
const b = await chromium.launch();
const ctx = await b.newContext();
const p = await ctx.newPage();
await p.setContent(`
y
z
`);
const y = await p.locator('#y').evaluate((el) => ({
bg: getComputedStyle(el).backgroundColor,
base: getComputedStyle(el).getPropertyValue('--base'),
derived: getComputedStyle(el).getPropertyValue('--derived')
}));
const z = await p.locator('#z').evaluate((el) => ({
bg: getComputedStyle(el).backgroundColor,
base: getComputedStyle(el).getPropertyValue('--base'),
derived: getComputedStyle(el).getPropertyValue('--derived')
}));
console.log('Y (--derived only at :root):', JSON.stringify(y));
console.log('Z (--derived RE-declared at .z):', JSON.stringify(z));
await b.close();