<!DOCTYPE html>
<head>
    <title>
      Ensure the timing is marked during the `update the rendering` step.
    </title>
</head>
<style>
    #main {
        width: 100px;
        height: 100px;
        left: 0px;
        position: relative;
        top: 0;
        background-image: url(../resources/circles.png);
        opacity: 0;
    }

    #main.contentful {
        opacity: 0.1;
    }
</style>
<body>
<script src="../resources/utils.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="main"></div>
<script>
setup({"hide_test_state": true});
async_test(function (t) {
    assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported.");
    let fired = false;
    const main = document.getElementById('main');
    let animationFrameStamps = [];
    requestAnimationFrame(function frame(stamp) {
        animationFrameStamps.unshift(stamp);
        main.className = "contentful";
        while (performance.now() - stamp <= 5) {
          /* Busy-wait */
        }
        if(!fired)
            requestAnimationFrame(frame);
    });
    new PerformanceObserver(t.step_func(list=>{
        for (let entry of list.getEntries()) {
            if (entry.name == "first-contentful-paint") {
                fired = true;
                assert_any(assert_approx_equals, entry.startTime, animationFrameStamps, 1, "One of the past requestAnimationFrame should have the same timestamp as paint entry");
                t.done();
            }
        }
    })).observe({type: "paint"});
}, 'The first-contentful-paint timestamp should be same as the last RAF');
</script>
</body>
</html>
