summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/largest-contentful-paint/redirects-tao-star.html
blob: 5607ed792e8640da86ee554a486a1b749861fdb3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>