<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/single-detection-helpers.js"></script>
<body>
</body>
<script>
const imageTests = {
    aztecCorrection: {
        name: "aztec-correction.jpg",
        format: "aztec",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 240, right: 559, top: 144, bottom: 454}, fuzziness: 15},
        topLeft: {position: {x: 240, y: 144}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 559, y: 144}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 559, y: 454}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 240, y: 454}, fuzzinessX: 15, fuzzinessY: 15}},
    aztecFull: {
        name: "aztec-full.jpg",
        format: "aztec",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 281, right: 518, top: 184, bottom: 414}, fuzziness: 15},
        topLeft: {position: {x: 281, y: 184}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 518, y: 184}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 518, y: 414}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 281, y: 414}, fuzzinessX: 15, fuzzinessY: 15}},
    aztecLayers: {
        name: "aztec-layers.jpg",
        format: "aztec",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 175, right: 625, top: 75, bottom: 525}, fuzziness: 15},
        topLeft: {position: {x: 175, y: 75}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 625, y: 75}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 625, y: 525}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 175, y: 525}, fuzzinessX: 15, fuzzinessY: 15}},
    aztec: {
        name: "aztec.jpg",
        format: "aztec",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 302, right: 497, top: 202, bottom: 397}, fuzziness: 15},
        topLeft: {position: {x: 302, y: 202}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 497, y: 202}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 497, y: 397}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 302, y: 397}, fuzzinessX: 15, fuzzinessY: 15}},
    code128Height: {
        name: "code128-height.jpg",
        format: "code_128",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 90, right: 711, top: 149, bottom: 449}, fuzziness: 15},
        topLeft: {position: {x: 90, y: 149}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 711, y: 149}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 711, y: 450}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 90, y: 450}, fuzzinessX: 15, fuzzinessY: 15}},
    code128: {
        name: "code128.jpg",
        format: "code_128",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 90, right: 710, top: 267, bottom: 332}, fuzziness: 15},
        topLeft: {position: {x: 90, y: 267}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 710, y: 267}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 710, y: 332}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 90, y: 332}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Columns: {
        name: "pdf417-columns.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 39, right: 755, top: 243, bottom: 356}, fuzziness: 15},
        topLeft: {position: {x: 39, y: 243}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 755, y: 243}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 755, y: 356}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 39, y: 356}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Compact: {
        name: "pdf417-compact.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 186, right: 786, top: 242, bottom: 359}, fuzziness: 15},
        topLeft: {position: {x: 186, y: 242}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 786, y: 242}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 786, y: 359}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 186, y: 359}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Compaction: {
        name: "pdf417-compaction.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 84, right: 712, top: 217, bottom: 382}, fuzziness: 15},
        topLeft: {position: {x: 84, y: 217}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 712, y: 217}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 712, y: 382}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 84, y: 382}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Correction: {
        name: "pdf417-correction.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 39, right: 755, top: 209, bottom: 390}, fuzziness: 15},
        topLeft: {position: {x: 39, y: 209}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 755, y: 209}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 755, y: 390}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 39, y: 390}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Rows: {
        name: "pdf417-rows.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 84, right: 712, top: 227, bottom: 360}, fuzziness: 15},
        topLeft: {position: {x: 84, y: 227}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 712, y: 227}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 712, y: 360}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 84, y: 360}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Square: {
        name: "pdf417-square.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 170, right: 621, top: 119, bottom: 480}, fuzziness: 15},
        topLeft: {position: {x: 171, y: 119}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 621, y: 119}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 621, y: 480}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 170, y: 480}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Taller: {
        name: "pdf417-taller.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 84, right: 713, top: 209, bottom: 390}, fuzziness: 15},
        topLeft: {position: {x: 84, y: 209}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 713, y: 209}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 713, y: 390}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 84, y: 390}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417Wider: {
        name: "pdf417-wider.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 84, right: 712, top: 227, bottom: 360}, fuzziness: 15},
        topLeft: {position: {x: 84, y: 227}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 712, y: 227}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 712, y: 360}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 84, y: 360}, fuzzinessX: 15, fuzzinessY: 15}},
    pdf417: {
        name: "pdf417.jpg",
        format: "pdf417",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 126, right: 666, top: 209, bottom: 390}, fuzziness: 15},
        topLeft: {position: {x: 126, y: 209}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 666, y: 209}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 666, y: 390}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 126, y: 390}, fuzzinessX: 15, fuzzinessY: 15}},
    qrBottomLeft: {
        name: "qr-bottom-left.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 75, right: 325, top: 325, bottom: 575}, fuzziness: 5},
        topLeft: {position: {x: 75, y: 325}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 325, y: 325}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 325, y: 575}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 75, y: 575}, fuzzinessX: 15, fuzzinessY: 15}},
    qrBottomRight: {
        name: "qr-bottom-right.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 475, right: 725, top: 325, bottom: 575}, fuzziness: 5},
        topLeft: {position: {x: 475, y: 325}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 725, y: 325}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 725, y: 575}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 475, y: 575}, fuzzinessX: 15, fuzzinessY: 15}},
    qrCenter: {
        name: "qr-center.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 277, right: 524, top: 172, bottom: 428}, fuzziness: 5},
        topLeft: {position: {x: 277, y: 172}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 521, y: 172}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 524, y: 425}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 277, y: 428}, fuzzinessX: 15, fuzzinessY: 15}},
    qrH: {
        name: "qr-h.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 235, right: 565, top: 135, bottom: 465}, fuzziness: 5},
        topLeft: {position: {x: 235, y: 135}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 565, y: 135}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 565, y: 465}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 235, y: 465}, fuzzinessX: 15, fuzzinessY: 15}},
    qrL: {
        name: "qr-l.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 275, right: 525, top: 175, bottom: 425}, fuzziness: 5},
        topLeft: {position: {x: 275, y: 175}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 525, y: 175}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 525, y: 425}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 275, y: 425}, fuzzinessX: 15, fuzzinessY: 15}},
    qrM: {
        name: "qr-m.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 277, right: 524, top: 172, bottom: 428}, fuzziness: 5},
        topLeft: {position: {x: 277, y: 172}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 521, y: 172}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 524, y: 425}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 277, y: 428}, fuzzinessX: 15, fuzzinessY: 15}},
    qrQ: {
        name: "qr-q.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 252, right: 548, top: 157, bottom: 444}, fuzziness: 5},
        topLeft: {position: {x: 252, y: 157}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 548, y: 157}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 545, y: 444}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 252, y: 441}, fuzzinessX: 15, fuzzinessY: 15}},
    qrTopLeft: {
        name: "qr-top-left.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 75, right: 325, top: 25, bottom: 275}, fuzziness: 5},
        topLeft: {position: {x: 75, y: 25}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 325, y: 25}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 325, y: 275}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 75, y: 275}, fuzzinessX: 15, fuzzinessY: 15}},
    qrTopRight: {
        name: "qr-top-right.jpg",
        format: "qr_code",
        payload: "Barcode Detection is Fun!",
        barcode: {boundingBox: {left: 475, right: 725, top: 25, bottom: 275}, fuzziness: 5},
        topLeft: {position: {x: 475, y: 25}, fuzzinessX: 15, fuzzinessY: 15},
        topRight: {position: {x: 725, y: 25}, fuzzinessX: 15, fuzzinessY: 15},
        bottomRight: {position: {x: 725, y: 275}, fuzzinessX: 15, fuzzinessY: 15},
        bottomLeft: {position:  {x: 475, y: 275}, fuzzinessX: 15, fuzzinessY: 15}}};

const videoTests = {
    "barcodes.mov": [
        {time: 0.5, test: imageTests.aztecCorrection},
        {time: 1.5, test: imageTests.aztecFull},
        {time: 2.5, test: imageTests.aztecLayers},
        {time: 3.5, test: imageTests.aztec},
        {time: 4.5, test: imageTests.code128Height},
        {time: 5.5, test: imageTests.code128},
        {time: 6.5, test: imageTests.pdf417Columns},
        {time: 7.5, test: imageTests.pdf417Compact},
        {time: 8.5, test: imageTests.pdf417Compaction},
        {time: 9.5, test: imageTests.pdf417Correction},
        {time: 10.5, test: imageTests.pdf417Rows},
        {time: 11.5, test: imageTests.pdf417Square},
        {time: 12.5, test: imageTests.pdf417Taller},
        {time: 13.5, test: imageTests.pdf417Wider},
        {time: 14.5, test: imageTests.pdf417},
        {time: 15.5, test: imageTests.qrBottomLeft},
        {time: 16.5, test: imageTests.qrBottomRight},
        {time: 17.5, test: imageTests.qrCenter},
        {time: 18.5, test: imageTests.qrH},
        {time: 19.5, test: imageTests.qrL},
        {time: 20.5, test: imageTests.qrM},
        {time: 21.5, test: imageTests.qrQ},
        {time: 22.5, test: imageTests.qrTopLeft},
        {time: 23.5, test: imageTests.qrTopRight}]};

// All the fields in FaceDetectorOptions are hints, so they can't be tested.
const barcodeDetector = new BarcodeDetector();

async function testImage(imageBitmapSource, test, key) {
    const supportedFormats = await BarcodeDetector.getSupportedFormats();
    if (!supportedFormats.includes(test.format))
        return;
    const detectedBarcodes = await barcodeDetector.detect(imageBitmapSource);
    assert_equals(detectedBarcodes.length, 1);
    const detectedBarcode = detectedBarcodes[0];
    checkBoundingBox(detectedBarcode.boundingBox, test.barcode.boundingBox, test.barcode.fuzziness);
    assert_equals(detectedBarcode.rawValue, test.payload);
    assert_equals(detectedBarcode.format, test.format);
    assert_equals(detectedBarcode.cornerPoints.length, 4);
    const [topLeft, topRight, bottomRight, bottomLeft] = detectedBarcode.cornerPoints;
    checkPointIsNear(topLeft, test.topLeft.position, test.topLeft.fuzzinessX, test.topLeft.fuzzinessY);
    checkPointIsNear(topRight, test.topRight.position, test.topRight.fuzzinessX, test.topRight.fuzzinessY);
    checkPointIsNear(bottomRight, test.bottomRight.position, test.bottomRight.fuzzinessX, test.bottomRight.fuzzinessY);
    checkPointIsNear(bottomLeft, test.bottomLeft.position, test.bottomLeft.fuzzinessX, test.bottomLeft.fuzzinessY);
}

promise_test(async t => {
    for (const [key, imageTest] of Object.entries(imageTests)) {
        const imageElement = document.createElement("img");
        imageElement.src = `resources/${imageTest.name}`;
        await imageLoadedPromise(imageElement);
        assert_true(imageElement.complete, "Image element should have loaded successfully");
        await testImage(imageElement, imageTest, key);
    }
}, "HTMLImageElement");

// Intentionally don't test SVGImageElement. The spec https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource says it's supposed to be
// a CanvasImageSource, but neither WebKit nor Blink actually seem to implement that.

promise_test(async t => {
    for (const [name, tests] of Object.entries(videoTests)) {
        const videoElement = document.createElement("video");
        document.body.appendChild(videoElement);
        videoElement.src = `resources/${name}`;
        const loadedPromise = videoLoadedPromise(videoElement);
        videoElement.load();
        await loadedPromise;
        for (const test of tests) {
            await seekTo(videoElement, test.time);
            await testImage(videoElement, test.test, name);
        }
        document.body.removeChild(videoElement);
    }
}, "HTMLVideoElement");

promise_test(async t => {
    for (const [key, imageTest] of Object.entries(imageTests)) {
        const imageElement = document.createElement("img");
        imageElement.src = `resources/${imageTest.name}`;
        await imageLoadedPromise(imageElement);
        assert_true(imageElement.complete, "Image element should have loaded successfully");
        const canvasElement = document.createElement("canvas");
        canvasElement.width = imageElement.width;
        canvasElement.height = imageElement.height;
        const context = canvasElement.getContext("2d");
        context.drawImage(imageElement, 0, 0);
        await testImage(canvasElement, imageTest, key);
    }
}, "HTMLCanvasElement");

promise_test(async t => {
    for (const [key, imageTest] of Object.entries(imageTests)) {
        const imageElement = document.createElement("img");
        imageElement.src = `resources/${imageTest.name}`;
        await imageLoadedPromise(imageElement);
        assert_true(imageElement.complete, "Image element should have loaded successfully");
        const imageBitmap = await createImageBitmap(imageElement);
        await testImage(imageBitmap, imageTest, key);
    }
}, "ImageBitmap");

promise_test(async t => {
    for (const [key, imageTest] of Object.entries(imageTests)) {
        const imageElement = document.createElement("img");
        imageElement.src = `resources/${imageTest.name}`;
        await imageLoadedPromise(imageElement);
        assert_true(imageElement.complete, "Image element should have loaded successfully");
        const offscreenCanvas = new OffscreenCanvas(imageElement.width, imageElement.height);
        const context = offscreenCanvas.getContext("2d");
        context.drawImage(imageElement, 0, 0);
        await testImage(offscreenCanvas, imageTest, key);
    }
}, "OffscreenCanvas");

promise_test(async t => {
    for (const [name, tests] of Object.entries(videoTests)) {
        const videoElement = document.createElement("video");
        document.body.appendChild(videoElement);
        videoElement.src = `resources/${name}`;
        const loadedPromise = videoLoadedPromise(videoElement);
        videoElement.load();
        await loadedPromise;
        for (const test of tests) {
            await seekTo(videoElement, test.time);
            const videoFrame = new VideoFrame(videoElement);
            await testImage(videoFrame, test.test, name);
            videoFrame.close();
        }
        document.body.removeChild(videoElement);
    }
}, "VideoFrame");

promise_test(async t => {
    for (const [key, imageTest] of Object.entries(imageTests)) {
        const imageElement = document.createElement("img");
        imageElement.src = `resources/${imageTest.name}`;
        await imageLoadedPromise(imageElement);
        assert_true(imageElement.complete, "Image element should have loaded successfully");
        const canvasElement = document.createElement("canvas");
        canvasElement.width = imageElement.width;
        canvasElement.height = imageElement.height;
        const context = canvasElement.getContext("2d");
        context.drawImage(imageElement, 0, 0);
        const blob = await new Promise(function(resolve, reject) {
            canvasElement.toBlob(function(blob) {
                return resolve(blob);
            });
        });
        await testImage(blob, imageTest, key);
    }
}, "Blob");

promise_test(async t => {
    for (const [key, imageTest] of Object.entries(imageTests)) {
        const imageElement = document.createElement("img");
        imageElement.src = `resources/${imageTest.name}`;
        await imageLoadedPromise(imageElement);
        assert_true(imageElement.complete, "Image element should have loaded successfully");
        const canvasElement = document.createElement("canvas");
        canvasElement.width = imageElement.width;
        canvasElement.height = imageElement.height;
        const context = canvasElement.getContext("2d");
        context.drawImage(imageElement, 0, 0);
        const imageData = context.getImageData(0, 0, canvasElement.width, canvasElement.height);
        await testImage(imageData, imageTest, key);
    }
}, "ImageData");

</script>