Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 9 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /shape-detection/detection-HTMLCanvasElement.https.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/shapedetection-helpers.js"></script>
<script>
// These tests verify that a Detector's detect() works on an HTMLCanvasElement
// and on an OffscreenCanvas.
const canvasElementTests =
[
{
createDetector: () => { return new FaceDetector(); },
createCanvas: () => { return document.createElement("canvas"); },
pixelFormat: "uint8",
mockTestName: "FaceDetectionTest",
detectionResultTest: FaceDetectorDetectionResultTest,
name: "Face - detect(HTMLCanvasElement)"
},
{
createDetector: () => { return new FaceDetector(); },
createCanvas: () => { return document.createElement("canvas"); },
pixelFormat: "float16",
mockTestName: "FaceDetectionTest",
detectionResultTest: FaceDetectorDetectionResultTest,
name: "Face - detect(HTMLCanvasElementF16Format)"
},
{
createDetector: () => { return new FaceDetector(); },
createCanvas: () => { return new OffscreenCanvas(300, 150); },
pixelFormat: "uint8",
mockTestName: "FaceDetectionTest",
detectionResultTest: FaceDetectorDetectionResultTest,
name: "Face - detect(OffscreenCanvas)"
},
{
createDetector: () => { return new BarcodeDetector(); },
createCanvas: () => { return document.createElement("canvas"); },
pixelFormat: "uint8",
mockTestName: "BarcodeDetectionTest",
detectionResultTest: BarcodeDetectorDetectionResultTest,
name: "Barcode - detect(HTMLCanvasElement)"
},
{
createDetector: () => { return new BarcodeDetector(); },
createCanvas: () => { return document.createElement("canvas"); },
pixelFormat: "float16",
mockTestName: "BarcodeDetectionTest",
detectionResultTest: BarcodeDetectorDetectionResultTest,
name: "Barcode - detect(HTMLCanvasElementF16Format)"
},
{
createDetector: () => { return new BarcodeDetector(); },
createCanvas: () => { return new OffscreenCanvas(300, 150); },
pixelFormat: "uint8",
mockTestName: "BarcodeDetectionTest",
detectionResultTest: BarcodeDetectorDetectionResultTest,
name: "Barcode - detect(OffscreenCanvas)"
},
{
createDetector: () => { return new TextDetector(); },
createCanvas: () => { return document.createElement("canvas"); },
pixelFormat: "uint8",
mockTestName: "TextDetectionTest",
detectionResultTest: TextDetectorDetectionResultTest,
name: "Text - detect(HTMLCanvasElement)"
},
{
createDetector: () => { return new TextDetector(); },
createCanvas: () => { return document.createElement("canvas"); },
pixelFormat: "float16",
mockTestName: "TextDetectionTest",
detectionResultTest: TextDetectorDetectionResultTest,
name: "Text - detect(HTMLCanvasElementF16Format)"
},
{
createDetector: () => { return new TextDetector(); },
createCanvas: () => { return new OffscreenCanvas(300, 150); },
pixelFormat: "uint8",
mockTestName: "TextDetectionTest",
detectionResultTest: TextDetectorDetectionResultTest,
name: "Text - detect(OffscreenCanvas)"
}
];
for (let canvasElementTest of canvasElementTests) {
detection_test(canvasElementTest.mockTestName, async (t, detectionTest) => {
const img = new Image();
const imgWatcher = new EventWatcher(t, img, ["load", "error"]);
img.src = "/images/green-16x16.png";
await imgWatcher.wait_for("load");
const canvas = canvasElementTest.createCanvas();
canvas.getContext(
"2d", { pixelFormat: canvasElementTest.pixelFormat }).drawImage(
img, 0, 0);
const detector = canvasElementTest.createDetector();
const detectionResult = await detector.detect(canvas);
canvasElementTest.detectionResultTest(detectionResult, detectionTest);
}, canvasElementTest.name);
}
function FaceDetectorDetectionResultTest(detectionResult, mockTest) {
const imageReceivedByMock =
mockTest.MockFaceDetectionProvider().getFrameData();
assert_equals(imageReceivedByMock.byteLength, 180000, "Image length");
const GREEN_PIXEL = 0xFF00FF00;
assert_equals(imageReceivedByMock[0], GREEN_PIXEL, "Pixel color");
assert_equals(detectionResult.length, 3, "Number of faces");
}
function BarcodeDetectorDetectionResultTest(detectionResult, mockTest) {
assert_equals(detectionResult.length, 2, "Number of barcodes");
assert_equals(detectionResult[0].rawValue, "cats", "barcode 1");
assert_equals(detectionResult[0].format, "qr_code", "barcode 1 format");
assert_equals(detectionResult[1].rawValue, "dogs", "barcode 2");
assert_equals(detectionResult[1].format, "code_128", "barcode 2 format");
}
function TextDetectorDetectionResultTest(detectionResult, mockTest) {
assert_equals(detectionResult.length, 2, "Number of textBlocks");
assert_equals(detectionResult[0].rawValue, "cats", "textBlock 1");
assert_equals(detectionResult[1].rawValue, "dogs", "textBlock 2");
}
</script>