detection-HTMLCanvasElement.https.html (5245B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="resources/shapedetection-helpers.js"></script> 5 <script> 6 7 // These tests verify that a Detector's detect() works on an HTMLCanvasElement 8 // and on an OffscreenCanvas. 9 const canvasElementTests = 10 [ 11 { 12 createDetector: () => { return new FaceDetector(); }, 13 createCanvas: () => { return document.createElement("canvas"); }, 14 pixelFormat: "uint8", 15 mockTestName: "FaceDetectionTest", 16 detectionResultTest: FaceDetectorDetectionResultTest, 17 name: "Face - detect(HTMLCanvasElement)" 18 }, 19 { 20 createDetector: () => { return new FaceDetector(); }, 21 createCanvas: () => { return document.createElement("canvas"); }, 22 pixelFormat: "float16", 23 mockTestName: "FaceDetectionTest", 24 detectionResultTest: FaceDetectorDetectionResultTest, 25 name: "Face - detect(HTMLCanvasElementF16Format)" 26 }, 27 { 28 createDetector: () => { return new FaceDetector(); }, 29 createCanvas: () => { return new OffscreenCanvas(300, 150); }, 30 pixelFormat: "uint8", 31 mockTestName: "FaceDetectionTest", 32 detectionResultTest: FaceDetectorDetectionResultTest, 33 name: "Face - detect(OffscreenCanvas)" 34 }, 35 { 36 createDetector: () => { return new BarcodeDetector(); }, 37 createCanvas: () => { return document.createElement("canvas"); }, 38 pixelFormat: "uint8", 39 mockTestName: "BarcodeDetectionTest", 40 detectionResultTest: BarcodeDetectorDetectionResultTest, 41 name: "Barcode - detect(HTMLCanvasElement)" 42 }, 43 { 44 createDetector: () => { return new BarcodeDetector(); }, 45 createCanvas: () => { return document.createElement("canvas"); }, 46 pixelFormat: "float16", 47 mockTestName: "BarcodeDetectionTest", 48 detectionResultTest: BarcodeDetectorDetectionResultTest, 49 name: "Barcode - detect(HTMLCanvasElementF16Format)" 50 }, 51 { 52 createDetector: () => { return new BarcodeDetector(); }, 53 createCanvas: () => { return new OffscreenCanvas(300, 150); }, 54 pixelFormat: "uint8", 55 mockTestName: "BarcodeDetectionTest", 56 detectionResultTest: BarcodeDetectorDetectionResultTest, 57 name: "Barcode - detect(OffscreenCanvas)" 58 }, 59 { 60 createDetector: () => { return new TextDetector(); }, 61 createCanvas: () => { return document.createElement("canvas"); }, 62 pixelFormat: "uint8", 63 mockTestName: "TextDetectionTest", 64 detectionResultTest: TextDetectorDetectionResultTest, 65 name: "Text - detect(HTMLCanvasElement)" 66 }, 67 { 68 createDetector: () => { return new TextDetector(); }, 69 createCanvas: () => { return document.createElement("canvas"); }, 70 pixelFormat: "float16", 71 mockTestName: "TextDetectionTest", 72 detectionResultTest: TextDetectorDetectionResultTest, 73 name: "Text - detect(HTMLCanvasElementF16Format)" 74 }, 75 { 76 createDetector: () => { return new TextDetector(); }, 77 createCanvas: () => { return new OffscreenCanvas(300, 150); }, 78 pixelFormat: "uint8", 79 mockTestName: "TextDetectionTest", 80 detectionResultTest: TextDetectorDetectionResultTest, 81 name: "Text - detect(OffscreenCanvas)" 82 } 83 ]; 84 85 for (let canvasElementTest of canvasElementTests) { 86 detection_test(canvasElementTest.mockTestName, async (t, detectionTest) => { 87 const img = new Image(); 88 const imgWatcher = new EventWatcher(t, img, ["load", "error"]); 89 img.src = "/images/green-16x16.png"; 90 await imgWatcher.wait_for("load"); 91 const canvas = canvasElementTest.createCanvas(); 92 canvas.getContext( 93 "2d", { pixelFormat: canvasElementTest.pixelFormat }).drawImage( 94 img, 0, 0); 95 96 const detector = canvasElementTest.createDetector(); 97 const detectionResult = await detector.detect(canvas); 98 canvasElementTest.detectionResultTest(detectionResult, detectionTest); 99 }, canvasElementTest.name); 100 } 101 102 function FaceDetectorDetectionResultTest(detectionResult, mockTest) { 103 const imageReceivedByMock = 104 mockTest.MockFaceDetectionProvider().getFrameData(); 105 assert_equals(imageReceivedByMock.byteLength, 180000, "Image length"); 106 const GREEN_PIXEL = 0xFF00FF00; 107 assert_equals(imageReceivedByMock[0], GREEN_PIXEL, "Pixel color"); 108 assert_equals(detectionResult.length, 3, "Number of faces"); 109 } 110 111 function BarcodeDetectorDetectionResultTest(detectionResult, mockTest) { 112 assert_equals(detectionResult.length, 2, "Number of barcodes"); 113 assert_equals(detectionResult[0].rawValue, "cats", "barcode 1"); 114 assert_equals(detectionResult[0].format, "qr_code", "barcode 1 format"); 115 assert_equals(detectionResult[1].rawValue, "dogs", "barcode 2"); 116 assert_equals(detectionResult[1].format, "code_128", "barcode 2 format"); 117 } 118 119 function TextDetectorDetectionResultTest(detectionResult, mockTest) { 120 assert_equals(detectionResult.length, 2, "Number of textBlocks"); 121 assert_equals(detectionResult[0].rawValue, "cats", "textBlock 1"); 122 assert_equals(detectionResult[1].rawValue, "dogs", "textBlock 2"); 123 } 124 125 </script>