Hanson.xyz Dev
74 lines
3.3 KiB
JavaScript
Executable File
74 lines
3.3 KiB
JavaScript
Executable File
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch();
|
|
const context = await browser.newContext({ viewport: { width: 1400, height: 800 } });
|
|
const page = await context.newPage();
|
|
|
|
await page.goto('https://homeproz.dev.hanson.xyz/properties/', { timeout: 60000 });
|
|
await page.waitForTimeout(3000);
|
|
|
|
// Check grid layout and cell sizes
|
|
const gridInfo = await page.evaluate(() => {
|
|
const mapLayout = document.querySelector('.property-map-layout');
|
|
const mapContainer = document.querySelector('.property-map-container');
|
|
const listContainer = document.querySelector('.property-list-container');
|
|
|
|
return {
|
|
mapLayoutHeight: mapLayout ? mapLayout.getBoundingClientRect().height : null,
|
|
mapContainerHeight: mapContainer ? mapContainer.getBoundingClientRect().height : null,
|
|
listContainerHeight: listContainer ? listContainer.getBoundingClientRect().height : null,
|
|
mapContainerStyle: mapContainer ? {
|
|
display: window.getComputedStyle(mapContainer).display,
|
|
position: window.getComputedStyle(mapContainer).position,
|
|
alignSelf: window.getComputedStyle(mapContainer).alignSelf
|
|
} : null
|
|
};
|
|
});
|
|
|
|
console.log('Grid layout info:', JSON.stringify(gridInfo, null, 2));
|
|
|
|
// The map container should be as tall as the grid row (which equals list container height)
|
|
// If alignSelf is "start" or the container has explicit height, it won't fill the grid cell
|
|
|
|
// Now scroll to the very bottom and check CSS sticky behavior
|
|
await page.evaluate(() => window.scrollTo(0, 999999));
|
|
await page.waitForTimeout(1000);
|
|
|
|
const scrolledInfo = await page.evaluate(() => {
|
|
const mapContainer = document.querySelector('.property-map-container');
|
|
const listContainer = document.querySelector('.property-list-container');
|
|
const footer = document.querySelector('footer.site-footer');
|
|
|
|
// Check if CSS sticky naturally stopped
|
|
return {
|
|
scrollY: window.scrollY,
|
|
mapContainerViewport: mapContainer ? mapContainer.getBoundingClientRect() : null,
|
|
listContainerBottom: listContainer ? listContainer.getBoundingClientRect().bottom : null,
|
|
footerTop: footer ? footer.getBoundingClientRect().top : null,
|
|
mapPositionComputed: mapContainer ? window.getComputedStyle(mapContainer).position : null
|
|
};
|
|
});
|
|
|
|
console.log('\nAfter max scroll:', JSON.stringify(scrolledInfo, null, 2));
|
|
|
|
if (scrolledInfo.mapContainerViewport && scrolledInfo.listContainerBottom) {
|
|
const mapBottom = scrolledInfo.mapContainerViewport.y + scrolledInfo.mapContainerViewport.height;
|
|
console.log('\nMap viewport bottom:', mapBottom);
|
|
console.log('List container viewport bottom:', scrolledInfo.listContainerBottom);
|
|
console.log('Footer viewport top:', scrolledInfo.footerTop);
|
|
|
|
// With proper CSS sticky, map should stop when grid cell ends (at list container bottom)
|
|
// Not when footer starts
|
|
if (mapBottom > scrolledInfo.listContainerBottom) {
|
|
console.log('\nMap extends past its grid sibling - CSS sticky NOT constraining properly');
|
|
} else {
|
|
console.log('\nCSS sticky is working - map stops at grid cell boundary');
|
|
}
|
|
}
|
|
|
|
await page.screenshot({ path: '/tmp/grid-test.png' });
|
|
|
|
await browser.close();
|
|
})();
|