77 lines
3.5 KiB
JavaScript
77 lines
3.5 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
const LANDSCAPE_VIEWPORT = { width: 667, height: 375 };
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: true });
|
||
|
|
const context = await browser.newContext({
|
||
|
|
viewport: LANDSCAPE_VIEWPORT,
|
||
|
|
userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
|
||
|
|
hasTouch: true
|
||
|
|
});
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999/?lang=en&view=extended');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
|
||
|
|
const positioning = await page.evaluate(() => {
|
||
|
|
const sidebar = document.querySelector('.cv-sidebar-left');
|
||
|
|
const accordion = document.querySelector('.sidebar-accordion');
|
||
|
|
const content = document.querySelector('.sidebar-accordion-content');
|
||
|
|
|
||
|
|
return {
|
||
|
|
sidebar: {
|
||
|
|
position: window.getComputedStyle(sidebar).position,
|
||
|
|
overflow: window.getComputedStyle(sidebar).overflow,
|
||
|
|
overflowY: window.getComputedStyle(sidebar).overflowY,
|
||
|
|
height: window.getComputedStyle(sidebar).height,
|
||
|
|
maxHeight: window.getComputedStyle(sidebar).maxHeight,
|
||
|
|
},
|
||
|
|
accordion: {
|
||
|
|
position: window.getComputedStyle(accordion).position,
|
||
|
|
display: window.getComputedStyle(accordion).display,
|
||
|
|
overflow: window.getComputedStyle(accordion).overflow,
|
||
|
|
height: window.getComputedStyle(accordion).height,
|
||
|
|
maxHeight: window.getComputedStyle(accordion).maxHeight,
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
position: window.getComputedStyle(content).position,
|
||
|
|
display: window.getComputedStyle(content).display,
|
||
|
|
overflow: window.getComputedStyle(content).overflow,
|
||
|
|
height: window.getComputedStyle(content).height,
|
||
|
|
maxHeight: window.getComputedStyle(content).maxHeight,
|
||
|
|
top: window.getComputedStyle(content).top,
|
||
|
|
left: window.getComputedStyle(content).left,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('Positioning Debug:\n');
|
||
|
|
console.log('Sidebar (.cv-sidebar-left):');
|
||
|
|
console.log(` • position: ${positioning.sidebar.position}`);
|
||
|
|
console.log(` • overflow: ${positioning.sidebar.overflow}`);
|
||
|
|
console.log(` • overflowY: ${positioning.sidebar.overflowY}`);
|
||
|
|
console.log(` • height: ${positioning.sidebar.height}`);
|
||
|
|
console.log(` • max-height: ${positioning.sidebar.maxHeight}\n`);
|
||
|
|
|
||
|
|
console.log('Accordion (.sidebar-accordion):');
|
||
|
|
console.log(` • position: ${positioning.accordion.position}`);
|
||
|
|
console.log(` • display: ${positioning.accordion.display}`);
|
||
|
|
console.log(` • overflow: ${positioning.accordion.overflow}`);
|
||
|
|
console.log(` • height: ${positioning.accordion.height}`);
|
||
|
|
console.log(` • max-height: ${positioning.accordion.maxHeight}\n`);
|
||
|
|
|
||
|
|
console.log('Content (.sidebar-accordion-content):');
|
||
|
|
console.log(` • position: ${positioning.content.position}`);
|
||
|
|
console.log(` • display: ${positioning.content.display}`);
|
||
|
|
console.log(` • overflow: ${positioning.content.overflow}`);
|
||
|
|
console.log(` • height: ${positioning.content.height}`);
|
||
|
|
console.log(` • max-height: ${positioning.content.maxHeight}`);
|
||
|
|
console.log(` • top: ${positioning.content.top}`);
|
||
|
|
console.log(` • left: ${positioning.content.left}\n`);
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
})();
|