59 lines
2.5 KiB
JavaScript
59 lines
2.5 KiB
JavaScript
const { test, expect } = require('@playwright/test');
|
|
|
|
test.use({ viewport: { width: 1920, height: 1080 } });
|
|
|
|
test.describe('aura-bg Carbon Blue gradient (global, fixed background)', () => {
|
|
test('body carries the dark base color that the aura layers blend against', async ({ page }) => {
|
|
await page.goto('/');
|
|
|
|
// Without the body color, mix-blend-mode on the aura layers has nothing
|
|
// to composite against and the gradient disappears.
|
|
const bodyBg = await page.evaluate(() => getComputedStyle(document.body).backgroundColor);
|
|
// #100e0b = rgb(16, 14, 11)
|
|
expect(bodyBg).toBe('rgb(16, 14, 11)');
|
|
});
|
|
|
|
test('.aura-bg renders globally as a fixed viewport layer (not a per-template wrapper)', async ({ page }) => {
|
|
await page.goto('/');
|
|
|
|
// aura-bg is rendered once in header.php and must be position:fixed so
|
|
// it covers the entire viewport behind all content regardless of scroll.
|
|
const auraBg = page.locator('.aura-bg').first();
|
|
await expect(auraBg).toBeAttached();
|
|
|
|
const position = await auraBg.evaluate((el) => getComputedStyle(el).position);
|
|
expect(position).toBe('fixed');
|
|
|
|
// z-index: -1 puts the gradient behind page content. Content must sit
|
|
// on top via its own stacking context (which the body and main do not
|
|
// create, so the negative z-index is safe).
|
|
const zIndex = await auraBg.evaluate((el) => getComputedStyle(el).zIndex);
|
|
expect(zIndex).toBe('-1');
|
|
|
|
// pointer-events: none so clicks pass through to content underneath.
|
|
const pointerEvents = await auraBg.evaluate((el) => getComputedStyle(el).pointerEvents);
|
|
expect(pointerEvents).toBe('none');
|
|
});
|
|
|
|
test('.aura-layer-1 renders the Carbon Blue linear gradient', async ({ page }) => {
|
|
await page.goto('/');
|
|
|
|
const layer1 = page.locator('.aura-layer-1').first();
|
|
await expect(layer1).toBeAttached();
|
|
|
|
const bgImage = await layer1.evaluate((el) => getComputedStyle(el).backgroundImage);
|
|
expect(bgImage).toMatch(/linear-gradient/);
|
|
});
|
|
|
|
test('.aura-bg is not isolated (no stacking context traps blend modes)', async ({ page }) => {
|
|
await page.goto('/');
|
|
|
|
// isolation: isolate on the .aura-bg parent would trap mix-blend-mode
|
|
// children inside an empty container, preventing them from blending
|
|
// with the body's #100e0b beneath. The global fixed layer must let
|
|
// blend modes reach through to the body.
|
|
const isolation = await page.locator('.aura-bg').first().evaluate((el) => getComputedStyle(el).isolation);
|
|
expect(isolation).not.toBe('isolate');
|
|
});
|
|
});
|