<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Capture canvas to video track framerate</title>
    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
    <script src="../../webrtc/routines.js"></script>
</head>
<body>
    <video id="video" autoplay playsInline controls width="200px"></video>
    <script>
promise_test(async (t) => {
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 200;

    const ctx = canvas.getContext('2d');

    let frames = 0;
    const loop = () => {
        frames += 1;
        ctx.fillStyle = (ctx.fillStyle !== '#ff0000') ? 'red' : 'green';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        setTimeout(loop, 1000/30);
    }

    loop();

    const stream = canvas.captureStream();
    video.srcObject = stream;
    video.play();

    const frameRate = await computeFrameRate(stream, video);

    // If the test was unable to generate any frames then nothing meaningful can be determined. Our test only makes sense if we have sufficient fps.
    if (frames <= 10)
        return;

    // Check that the difference in expected and observed frame rates is < 25%
    const percentDiff = Math.abs(frameRate - frames) / frames * 100;
    assert_less_than(percentDiff, 25, `frame rate difference between ${frames} & ${frameRate} is below 25%`);
}, "check frame of capture canvas is sufficient");
    </script>
</body>
</html>