juanatsap
976b8ae2e2
Remove hardcoded width/height HTML attributes from iconify-icon elements that were overriding CSS sizing. The iconify-icon component uses HTML attributes for SVG rendering, ignoring CSS width/height. - Remove width="28" height="28" from 8 button templates - Remove conflicting 768px media query from _buttons.css - Add default desktop icon sizes (24px) in _scroll-behavior.css - Icons now scale via clamp() from 18px (380px) to 24px (900px)
57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import { chromium } from 'playwright';
|
|
|
|
const browser = await chromium.launch();
|
|
const context = await browser.newContext({
|
|
viewport: { width: 375, height: 812 }
|
|
});
|
|
const page = await context.newPage();
|
|
|
|
await page.goto('http://localhost:1999');
|
|
await page.waitForTimeout(1500);
|
|
|
|
// Scroll to show back-to-top button
|
|
await page.evaluate(() => window.scrollTo(0, 500));
|
|
await page.waitForTimeout(500);
|
|
|
|
// Take screenshot of bottom-left floating buttons area
|
|
await page.screenshot({
|
|
path: 'tests/screenshots/button-icon-scaling-375px.png',
|
|
clip: { x: 0, y: 600, width: 200, height: 200 }
|
|
});
|
|
|
|
// Take full page for context
|
|
await page.screenshot({
|
|
path: 'tests/screenshots/full-page-375px.png',
|
|
fullPage: false
|
|
});
|
|
|
|
console.log('📸 Screenshots saved to tests/screenshots/');
|
|
|
|
// Print actual sizes for verification
|
|
const sizes = await page.evaluate(() => {
|
|
const results = [];
|
|
const selectors = ['.cmd-k-btn', '.download-btn', '.print-friendly-btn',
|
|
'.fixed-btn.contact-btn', '.shortcuts-btn',
|
|
'.color-theme-switcher', '.info-button', '.back-to-top'];
|
|
|
|
for (const sel of selectors) {
|
|
const btn = document.querySelector(sel);
|
|
if (btn) {
|
|
const btnStyle = getComputedStyle(btn);
|
|
const icon = btn.querySelector('iconify-icon');
|
|
const iconStyle = icon ? getComputedStyle(icon) : null;
|
|
results.push({
|
|
selector: sel,
|
|
button: Math.round(Number.parseFloat(btnStyle.width)) + 'x' + Math.round(Number.parseFloat(btnStyle.height)),
|
|
icon: iconStyle ? Math.round(Number.parseFloat(iconStyle.width)) + 'x' + Math.round(Number.parseFloat(iconStyle.height)) : 'N/A'
|
|
});
|
|
}
|
|
}
|
|
return results;
|
|
});
|
|
|
|
console.log('\n📐 Sizes at 375px viewport:');
|
|
sizes.forEach(s => console.log(' ' + s.selector + ': button=' + s.button + ', icon=' + s.icon));
|
|
|
|
await browser.close();
|