Skip to content

chore: update backstop to support addl themes #8276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcoker merged 3 commits into from
Apr 4, 2026
Merged

chore: update backstop to support addl themes #8276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8561860
chore: update backstop to support addl themes
mcoker Apr 4, 2026
57ac736
chore: s/unified/felt
mcoker Apr 4, 2026
94490c9
chore: remove unused scripts
mcoker Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions backstop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,19 @@ const config = require('./backstop.config');
const scenarios = [];
const viewports = [];

// check for --dark flag to trigger separate reference & test images, html report
const isDarkTheme = process.argv.includes('--dark');
const themeSuffix = isDarkTheme ? '_dark' : '';
// Check for theme flags to trigger separate reference & test images, html report
const isFelt = process.argv.includes('--felt');
const isDark = process.argv.includes('--dark');
const isGlass = process.argv.includes('--glass');
const isHighContrast = process.argv.includes('--high-contrast');

// Build theme suffix based on active flags
const themeParts = [];
if (isFelt) themeParts.push('felt');
if (isDark) themeParts.push('dark');
if (isGlass) themeParts.push('glass');
if (isHighContrast) themeParts.push('hc');
const themeSuffix = themeParts.length > 0 ? `_${themeParts.join('_')}` : '';

config.relativeUrls.map((relativeUrl) => {
const url = relativeUrl.url || relativeUrl;
Expand Down
9 changes: 0 additions & 9 deletions backstop_data/engine_scripts/playwright/addDarkThemeClass.js
View file
Open in desktop

This file was deleted.

25 changes: 25 additions & 0 deletions backstop_data/engine_scripts/playwright/applyThemeClasses.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// Apply theme classes to html tag based on theme options
module.exports = async (page, options) => {
const { felt, dark, glass, highContrast } = options;

await page.evaluate((opts) => {
const root = document.querySelector('html');

// Apply theme classes based on options
if (opts.felt) {
root.classList.add('pf-v6-theme-redhat');
}

if (opts.dark) {
root.classList.add('pf-v6-theme-dark');
}

if (opts.glass) {
root.classList.add('pf-v6-theme-glass');
}

if (opts.highContrast) {
root.classList.add('pf-v6-theme-high-contrast');
}
}, options);
};
28 changes: 17 additions & 11 deletions backstop_data/engine_scripts/playwright/onReady.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,22 @@ module.exports = async (page, scenario, vp) => {
// Wait until all network requests have completed for a moment
await page.waitForLoadState('networkidle');

if (process.argv.includes('--dark')) {
// Emulate dark mode
if (page.emulateMedia) {
await page.emulateMedia({ colorScheme: 'dark' });
}
await require('./addDarkThemeClass')(page, scenario);
} else {
// Emulate light mode
if (page.emulateMedia) {
await page.emulateMedia({ colorScheme: 'light' });
}
// Detect theme flags
const isFelt = process.argv.includes('--felt');
const isDark = process.argv.includes('--dark');
const isGlass = process.argv.includes('--glass');
const isHighContrast = process.argv.includes('--high-contrast');

// Emulate color scheme based on dark mode
if (page.emulateMedia) {
await page.emulateMedia({ colorScheme: isDark ? 'dark' : 'light' });
}

// Apply theme classes
await require('./applyThemeClasses')(page, {
felt: isFelt,
dark: isDark,
glass: isGlass,
highContrast: isHighContrast
});
};
20 changes: 20 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,28 @@
"backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
"backstop:test": "backstop test --config='backstop.js'",
"backstop:test:dark": "backstop test --config='backstop.js' --dark",
"backstop:test:glass": "backstop test --config='backstop.js' --glass",
"backstop:test:hc": "backstop test --config='backstop.js' --high-contrast",
"backstop:test:dark-hc": "backstop test --config='backstop.js' --dark --high-contrast",
"backstop:test:dark-glass": "backstop test --config='backstop.js' --dark --glass",
"backstop:test:felt": "backstop test --config='backstop.js' --felt",
"backstop:test:felt-dark": "backstop test --config='backstop.js' --felt --dark",
"backstop:test:felt-glass": "backstop test --config='backstop.js' --felt --glass",
"backstop:test:felt-hc": "backstop test --config='backstop.js' --felt --high-contrast",
"backstop:test:felt-dark-hc": "backstop test --config='backstop.js' --felt --dark --high-contrast",
"backstop:test:felt-dark-glass": "backstop test --config='backstop.js' --felt --dark --glass",
"backstop:approve": "backstop approve --config='backstop.js'",
"backstop:approve:dark": "backstop approve --config='backstop.js' --dark",
"backstop:approve:glass": "backstop approve --config='backstop.js' --glass",
"backstop:approve:hc": "backstop approve --config='backstop.js' --high-contrast",
"backstop:approve:dark-hc": "backstop approve --config='backstop.js' --dark --high-contrast",
"backstop:approve:dark-glass": "backstop approve --config='backstop.js' --dark --glass",
"backstop:approve:felt": "backstop approve --config='backstop.js' --felt",
"backstop:approve:felt-dark": "backstop approve --config='backstop.js' --felt --dark",
"backstop:approve:felt-glass": "backstop approve --config='backstop.js' --felt --glass",
"backstop:approve:felt-hc": "backstop approve --config='backstop.js' --felt --high-contrast",
"backstop:approve:felt-dark-hc": "backstop approve --config='backstop.js' --felt --dark --high-contrast",
"backstop:approve:felt-dark-glass": "backstop approve --config='backstop.js' --felt --dark --glass",
"backstop:chrome": "node backstop_data/engine_scripts/puppet/chrome.js",
"playwright": "node ./node_modules/playwright/cli.js",
"build-patternfly": "gulp buildPatternfly",
Expand Down
Loading