redirects-tao-star.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /largest-contentful-paint/redirects-tao-star.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>This test validates LargestContentfulPaint information for cross-origin redirect chain images.</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/largest-contentful-paint-helpers.js"></script>

<script src=/common/get-host-info.sub.js></script>

</head>

<body>

<script>

setup({"hide_test_state": true});

async_test(t => {

    assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");

    let destUrl = get_host_info().HTTP_REMOTE_ORIGIN

            + '/resource-timing/resources/multi_redirect.py?';

    destUrl += 'page_origin=' +  get_host_info().HTTP_ORIGIN;

    destUrl += '&cross_origin=' + get_host_info().HTTP_REMOTE_ORIGIN;

    destUrl += '&final_resource=/element-timing/resources/circle-tao.svg';

    destUrl += '&tao_steps=';

    const sizes = [50*50, 66*66, 100*100, 200*200];

    const image = document.createElement('img');

    image.src = destUrl + '0';

    image.setAttribute('id', 'id');

    image.width = 200 / 4;

    document.body.appendChild(image);

    let numObserved = 0;

    let beforeLoad = performance.now();

    new PerformanceObserver(t.step_func(entries => {

        assert_equals(entries.getEntries().length, 1);

        const entry = entries.getEntries()[0];

        const options = numObserved === 3 ? [] : ['renderTimeIs0'];

        checkImage(entry, destUrl + numObserved, 'id', sizes[numObserved], beforeLoad, options);

        numObserved++;

        if (numObserved === 4)

            t.done();

        else {

            // Change the image to trigger a new LCP entry.

            const img = document.getElementById('id');

            image.src = destUrl + numObserved;

            // Use monotonically increasing image sizes to trigger LCP every time.

            image.width = 200 / (4 - numObserved);

            beforeLoad = performance.now();

    })).observe({type: 'largest-contentful-paint'});

}, 'Cross-origin image without TAO should not have its renderTime set, with full TAO it should.');

</script>

</body>

</html>