single-text-detection.https.html (9227B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="resources/single-detection-helpers.js"></script> 5 <body> 6 </body> 7 <script> 8 const imageTests = { 9 center: { 10 name: "text-center.jpg", 11 value: "Dictionary", 12 text: {boundingBox: {left: 195, right: 613, top: 258, bottom: 358}, fuzziness: 7}, 13 topLeft: {position: {x: 199, y: 258}, fuzzinessX: 10, fuzzinessY: 10}, 14 topRight: {position: {x: 613, y: 281}, fuzzinessX: 10, fuzzinessY: 17}, 15 bottomRight: {position: {x: 609, y: 358}, fuzzinessX: 10, fuzzinessY: 4}, 16 bottomLeft: {position: {x: 195, y: 334}, fuzzinessX: 10, fuzzinessY: 22}}, 17 bottomLeft: { 18 name: "text-bottom-left.jpg", 19 value: "Dictionary", 20 text: {boundingBox: {left: 53, right: 469, top: 461, bottom: 546}, fuzziness: 10}, 21 topLeft: {position: {x: 53, y: 461}, fuzzinessX: 10, fuzzinessY: 20}, 22 topRight: {position: {x: 469, y: 463}, fuzzinessX: 10, fuzzinessY: 20}, 23 bottomRight: {position: {x: 469, y: 546}, fuzzinessX: 10, fuzzinessY: 17}, 24 bottomLeft: {position: {x: 53, y: 544}, fuzzinessX: 10, fuzzinessY: 25}}, 25 bottomRight: { 26 name: "text-bottom-right.jpg", 27 value: "Dictionary", 28 text: {boundingBox: {left: 357, right: 772, top: 471, bottom: 564}, fuzziness: 10}, 29 topLeft: {position: {x: 358, y: 471}, fuzzinessX: 10, fuzzinessY: 20}, 30 topRight: {position: {x: 772, y: 476}, fuzzinessX: 10, fuzzinessY: 20}, 31 bottomRight: {position: {x: 771, y: 564}, fuzzinessX: 10, fuzzinessY: 17}, 32 bottomLeft: {position: {x: 357, y: 559}, fuzzinessX: 10, fuzzinessY: 25}}, 33 topLeft: { 34 name: "text-top-left.jpg", 35 value: "Dictionary", 36 text: {boundingBox: {left: 53, right: 474, top: 81, bottom: 182}, fuzziness: 10}, 37 topLeft: {position: {x: 58, y: 81}, fuzzinessX: 10, fuzzinessY: 20}, 38 topRight: {position: {x: 474, y: 105}, fuzzinessX: 10, fuzzinessY: 20}, 39 bottomRight: {position: {x: 470, y: 182}, fuzzinessX: 10, fuzzinessY: 17}, 40 bottomLeft: {position: {x: 53, y: 158}, fuzzinessX: 10, fuzzinessY: 25}}, 41 topRight: { 42 name: "text-top-right.jpg", 43 value: "Dictionary", 44 text: {boundingBox: {left: 343, right: 761, top: 66, bottom: 146}, fuzziness: 10}, 45 topLeft: {position: {x: 343, y: 66}, fuzzinessX: 10, fuzzinessY: 20}, 46 topRight: {position: {x: 761, y: 69}, fuzzinessX: 10, fuzzinessY: 20}, 47 bottomRight: {position: {x: 761, y: 146}, fuzzinessX: 10, fuzzinessY: 17}, 48 bottomLeft: {position: {x: 343, y: 143}, fuzzinessX: 10, fuzzinessY: 25}}}; 49 50 const videoTests = { 51 "text.mov": [ 52 {time: 0.5, test: imageTests.center}, 53 {time: 1.5, test: imageTests.bottomLeft}, 54 {time: 2.5, test: imageTests.bottomRight}, 55 {time: 3.5, test: imageTests.topLeft}, 56 {time: 4.5, test: imageTests.topRight}]}; 57 58 // The TextDetector contructor doesn't take any options. 59 const textDetector = new TextDetector(); 60 61 async function testImage(imageBitmapSource, test) { 62 var detectedText = await textDetector.detect(imageBitmapSource); 63 assert_equals(detectedText.length, 1); 64 detectedText = detectedText[0]; 65 assert_equals(detectedText.rawValue, test.value); 66 checkBoundingBox(detectedText.boundingBox, test.text.boundingBox, test.text.fuzziness); 67 assert_equals(detectedText.cornerPoints.length, 4); 68 const [topLeft, topRight, bottomRight, bottomLeft] = detectedText.cornerPoints; 69 checkPointIsNear(topLeft, test.topLeft.position, test.topLeft.fuzzinessX, test.topLeft.fuzzinessY); 70 checkPointIsNear(topRight, test.topRight.position, test.topRight.fuzzinessX, test.topRight.fuzzinessY); 71 checkPointIsNear(bottomRight, test.bottomRight.position, test.bottomRight.fuzzinessX, test.bottomRight.fuzzinessY); 72 checkPointIsNear(bottomLeft, test.bottomLeft.position, test.bottomLeft.fuzzinessX, test.bottomLeft.fuzzinessY); 73 } 74 75 promise_test(async t => { 76 for (const [key, imageTest] of Object.entries(imageTests)) { 77 const imageElement = document.createElement("img"); 78 imageElement.src = `resources/${imageTest.name}`; 79 await imageLoadedPromise(imageElement); 80 assert_equals(imageElement.complete, true); 81 await testImage(imageElement, imageTest); 82 } 83 }, "HTMLImageElement"); 84 85 // Intentionally don't test SVGImageElement. The spec https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource says it's supposed to be 86 // a CanvasImageSource, but neither WebKit nor Blink actually seem to implement that. 87 88 promise_test(async t => { 89 for (const [name, tests] of Object.entries(videoTests)) { 90 const videoElement = document.createElement("video"); 91 document.body.appendChild(videoElement); 92 videoElement.src = `resources/${name}`; 93 const loadedPromise = videoLoadedPromise(videoElement); 94 videoElement.load(); 95 await loadedPromise; 96 for (const test of tests) { 97 await seekTo(videoElement, test.time); 98 await testImage(videoElement, test.test); 99 } 100 document.body.removeChild(videoElement); 101 } 102 }, "HTMLVideoElement"); 103 104 promise_test(async t => { 105 for (const [key, imageTest] of Object.entries(imageTests)) { 106 const imageElement = document.createElement("img"); 107 imageElement.src = `resources/${imageTest.name}`; 108 await imageLoadedPromise(imageElement); 109 assert_equals(imageElement.complete, true); 110 const canvasElement = document.createElement("canvas"); 111 canvasElement.width = imageElement.width; 112 canvasElement.height = imageElement.height; 113 const context = canvasElement.getContext("2d"); 114 context.drawImage(imageElement, 0, 0); 115 await testImage(canvasElement, imageTest); 116 } 117 }, "HTMLCanvasElement"); 118 119 promise_test(async t => { 120 for (const [key, imageTest] of Object.entries(imageTests)) { 121 const imageElement = document.createElement("img"); 122 imageElement.src = `resources/${imageTest.name}`; 123 await imageLoadedPromise(imageElement); 124 assert_equals(imageElement.complete, true); 125 const imageBitmap = await createImageBitmap(imageElement); 126 await testImage(imageBitmap, imageTest); 127 } 128 }, "ImageBitmap"); 129 130 promise_test(async t => { 131 for (const [key, imageTest] of Object.entries(imageTests)) { 132 const imageElement = document.createElement("img"); 133 imageElement.src = `resources/${imageTest.name}`; 134 await imageLoadedPromise(imageElement); 135 assert_equals(imageElement.complete, true); 136 const offscreenCanvas = new OffscreenCanvas(imageElement.width, imageElement.height); 137 const context = offscreenCanvas.getContext("2d"); 138 context.drawImage(imageElement, 0, 0); 139 await testImage(offscreenCanvas, imageTest); 140 } 141 }, "OffscreenCanvas"); 142 143 promise_test(async t => { 144 for (const [name, tests] of Object.entries(videoTests)) { 145 const videoElement = document.createElement("video"); 146 document.body.appendChild(videoElement); 147 videoElement.src = `resources/${name}`; 148 const loadedPromise = videoLoadedPromise(videoElement); 149 videoElement.load(); 150 await loadedPromise; 151 for (const test of tests) { 152 await seekTo(videoElement, test.time); 153 const videoFrame = new VideoFrame(videoElement); 154 await testImage(videoFrame, test.test); 155 videoFrame.close(); 156 } 157 document.body.removeChild(videoElement); 158 } 159 }, "VideoFrame"); 160 161 promise_test(async t => { 162 for (const [key, imageTest] of Object.entries(imageTests)) { 163 const imageElement = document.createElement("img"); 164 imageElement.src = `resources/${imageTest.name}`; 165 await imageLoadedPromise(imageElement); 166 assert_equals(imageElement.complete, true); 167 const canvasElement = document.createElement("canvas"); 168 canvasElement.width = imageElement.width; 169 canvasElement.height = imageElement.height; 170 const context = canvasElement.getContext("2d"); 171 context.drawImage(imageElement, 0, 0); 172 const blob = await new Promise(function(resolve, reject) { 173 canvasElement.toBlob(function(blob) { 174 return resolve(blob); 175 }); 176 }); 177 await testImage(blob, imageTest); 178 } 179 }, "Blob"); 180 181 promise_test(async t => { 182 for (const [key, imageTest] of Object.entries(imageTests)) { 183 const imageElement = document.createElement("img"); 184 imageElement.src = `resources/${imageTest.name}`; 185 await imageLoadedPromise(imageElement); 186 assert_equals(imageElement.complete, true); 187 const canvasElement = document.createElement("canvas"); 188 canvasElement.width = imageElement.width; 189 canvasElement.height = imageElement.height; 190 const context = canvasElement.getContext("2d"); 191 context.drawImage(imageElement, 0, 0); 192 const imageData = context.getImageData(0, 0, canvasElement.width, canvasElement.height); 193 await testImage(imageData, imageTest); 194 } 195 }, "ImageData"); 196 197 </script>