antv
104 lines
4.1 KiB
JavaScript
104 lines
4.1 KiB
JavaScript
const puppeteer = require('puppeteer');
|
|
|
|
(async () => {
|
|
const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
|
|
const page = await browser.newPage();
|
|
await page.goto('http://127.0.0.1:8000/test-modal');
|
|
|
|
// Make modal visible for accurate computed CSS
|
|
await page.evaluate(() => {
|
|
const modal = document.getElementById('deleteModal');
|
|
if (modal) {
|
|
modal.classList.remove('hidden');
|
|
modal.style.display = 'flex';
|
|
}
|
|
});
|
|
|
|
const data = await page.evaluate(() => {
|
|
const modal = document.getElementById('deleteModal');
|
|
if (!modal) return { error: 'Modal not found' };
|
|
|
|
// 1. DOM Path
|
|
let current = modal;
|
|
let path = [];
|
|
while (current && current.nodeType === 1) {
|
|
let desc = current.tagName.toLowerCase();
|
|
if (current.id) desc += '#' + current.id;
|
|
if (current.className && typeof current.className === 'string') {
|
|
desc += '.' + current.className.split(' ').join('.');
|
|
}
|
|
path.unshift(desc);
|
|
current = current.parentNode;
|
|
}
|
|
|
|
// 2. Computed CSS for modal
|
|
const getStyles = (el) => {
|
|
const cs = window.getComputedStyle(el);
|
|
return {
|
|
position: cs.position,
|
|
top: cs.top,
|
|
right: cs.right,
|
|
bottom: cs.bottom,
|
|
left: cs.left,
|
|
display: cs.display,
|
|
zIndex: cs.zIndex,
|
|
transform: cs.transform !== 'none' ? cs.transform : 'none',
|
|
contain: cs.contain !== 'none' ? cs.contain : 'none',
|
|
filter: cs.filter !== 'none' ? cs.filter : 'none',
|
|
backdropFilter: cs.backdropFilter !== 'none' ? cs.backdropFilter : 'none',
|
|
perspective: cs.perspective !== 'none' ? cs.perspective : 'none',
|
|
overflow: cs.overflow,
|
|
overflowY: cs.overflowY,
|
|
willChange: cs.willChange !== 'auto' ? cs.willChange : 'auto'
|
|
};
|
|
};
|
|
|
|
const modalCSS = getStyles(modal);
|
|
|
|
// 4. Ancestor trace
|
|
let ancestors = [];
|
|
current = modal.parentNode;
|
|
while (current && current.nodeType === 1) {
|
|
const cs = window.getComputedStyle(current);
|
|
const hasContext = cs.transform !== 'none' || cs.filter !== 'none' || cs.perspective !== 'none' || cs.contain !== 'none' || cs.willChange !== 'auto' || cs.position !== 'static' || cs.zIndex !== 'auto' || cs.isolation !== 'auto' || cs.overflow !== 'visible';
|
|
|
|
if (hasContext) {
|
|
ancestors.push({
|
|
tagName: current.tagName,
|
|
id: current.id,
|
|
className: current.className,
|
|
position: cs.position,
|
|
zIndex: cs.zIndex,
|
|
transform: cs.transform !== 'none' ? cs.transform : 'none',
|
|
filter: cs.filter !== 'none' ? cs.filter : 'none',
|
|
perspective: cs.perspective !== 'none' ? cs.perspective : 'none',
|
|
contain: cs.contain !== 'none' ? cs.contain : 'none',
|
|
willChange: cs.willChange !== 'auto' ? cs.willChange : 'auto',
|
|
overflow: cs.overflow,
|
|
isolation: cs.isolation !== 'auto' ? cs.isolation : 'auto'
|
|
});
|
|
}
|
|
current = current.parentNode;
|
|
}
|
|
|
|
// Find element that has large scrollHeight
|
|
const bodyHeight = document.body.scrollHeight;
|
|
const mainContent = document.querySelector('.main-content');
|
|
const scrollContainer = document.querySelector('.overflow-y-auto');
|
|
|
|
return {
|
|
path,
|
|
modalCSS,
|
|
ancestors,
|
|
scrollHeights: {
|
|
body: bodyHeight,
|
|
mainContent: mainContent ? mainContent.scrollHeight : null,
|
|
scrollContainer: scrollContainer ? scrollContainer.scrollHeight : null
|
|
}
|
|
};
|
|
});
|
|
|
|
console.log(JSON.stringify(data, null, 2));
|
|
await browser.close();
|
|
})();
|