You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.0 KiB
29 lines
1.0 KiB
import { chromium } from 'playwright';
|
|
const b = await chromium.launch();
|
|
const ctx = await b.newContext();
|
|
const p = await ctx.newPage();
|
|
await p.setContent(`
|
|
<!DOCTYPE html>
|
|
<style>
|
|
:root { --base: black; --derived: var(--base); }
|
|
.x { --base: red; }
|
|
.y { background: var(--derived); width: 100px; height: 100px; }
|
|
.z { --derived: var(--base); background: var(--derived); width: 100px; height: 100px; }
|
|
</style>
|
|
<div class="x y" id="y">y</div>
|
|
<div class="x z" id="z">z</div>
|
|
`);
|
|
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();
|