<!doctype html>
<html>
<head>
    <title>MediaRecorder Dataavailable</title>
    <link rel="help" href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#mediarecorder">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="../common/canvas-tests.js"></script>
    <link rel="stylesheet" href="../common/canvas-tests.css">
</head>
<body>
<div>
    <video id="player">
    </video>
</div>
<div>
    <canvas id="canvas" width="200" height="200">
    </canvas>
    <canvas id="frame" width="200" height="200">
    </canvas>
</div>
<script>
    var context;
    var drawStartTime;

    function createVideoStream() {
        const canvas = document.getElementById("canvas");
        context = canvas.getContext('2d');
        return canvas.captureStream();
    }

    function doRedImageDraw() {
        if (context) {
            context.fillStyle = "#ff0000";
            context.fillRect(0, 0, 200, 200);
            if (Date.now() - drawStartTime < 500) {
                window.requestAnimationFrame(doRedImageDraw);
            } else {
                drawStartTime = Date.now();
                doGreenImageDraw();
            }
        }
    }

    function doGreenImageDraw() {
        if (context) {
            context.fillStyle = "#00ff00";
            context.fillRect(0, 0, 200, 200);
            if (Date.now() - drawStartTime < 2000) {
                window.requestAnimationFrame(doGreenImageDraw);
            }
        }
    }

    async_test(t => {
        const video = createVideoStream();
        const recorder = new MediaRecorder(video);
        let mode = 0;

        recorder.ondataavailable = t.step_func(blobEvent => {
            assert_true(blobEvent instanceof BlobEvent, 'the type of event should be BlobEvent');
            assert_equals(blobEvent.type, 'dataavailable', 'the event type should be dataavailable');
            assert_true(blobEvent.isTrusted, 'isTrusted should be true when the event is created by C++');
            assert_true(blobEvent.data instanceof Blob, 'the type of data should be Blob');
            assert_true(blobEvent.data.size > 0, 'the blob should contain some buffers');
            t.done();
        });
        drawStartTime = Date.now();
        doRedImageDraw();
        recorder.start();
        assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully');
        setTimeout(() => {
            recorder.stop();
        }, 2000);
    }, 'Verify MediaRecorder is working in GPUProcess');

</script>
</body>
</html>