Detect image transitions

[siakaramalegos]

Check for image transitions by detecting clues for hiddenness similar to Mateusz's snippet:

{
    let currentElement = $0;
    while (currentElement instanceof HTMLElement) {
        const styles = window.getComputedStyle(currentElement);
        if (styles.getPropertyValue('opacity') == 0 || styles.getPropertyValue('visibility') == 'hidden') {
            console.log('This element has opacity: 0:', currentElement);
            break;
        }
        if (styles.getPropertyValue('visibility') == 'hidden') {
            console.log('This element has visibility: hidden:', currentElement);
            break;
        }
        currentElement = currentElement.parentElement;
    }
    if (!currentElement) {
        console.log('Nobody!');
    }
}

To run the snippet:

1. Block all external JS.
2. Refresh the page.
3. Find the LCP element in the Elements panel and select it.
4. Run the snippet.
5. Check the console.

Is there a way to check the cascade instead? Or just look for the properties as a clue that something changed them? Or to programmatically reload with JS blocked? Also what about inline JS? Or can we access the original source HTML file?