Update web-platform-tests to revision b7a8b84debb42268ea95a45bdad8f727d1facdf7

2025-08-15 18:35:33 +01:00 · 2019-03-21 21:40:20 -04:00 · 2019-03-21 21:40:20 -04:00 · 953dbda9a6
commit 953dbda9a6
parent ba929208e4
215 changed files with 6409 additions and 1644 deletions
--- a/tests/wpt/web-platform-tests/shape-detection/README.md
+++ b/tests/wpt/web-platform-tests/shape-detection/README.md
@ -0,0 +1,44 @@
+The `shapedetection-helpers.js` tests require implementations of
+the `FaceDetectionTest` and `BarcodeDetectionTest` interfaces, which
+should emulate platform shape detection backends.
+
+The `FaceDetectionTest` interface is defined as:
+
+```
+  class FaceDetectionTest {
+    async initialize();  // Sets up the testing environment.
+    async reset(); // Frees the resources.
+    MockFaceDetectionProvider(); //Returns `MockFaceDetectionProvider` interface.
+  };
+
+  class MockFaceDetectionProvider {
+    getFrameData(); //Gets frame data of detection result.
+    getMaxDetectedFaces(); //Gets value of `maxDetectedFaces` in `FaceDetector` constructor
+    getFastMode(); //Gets value of `fastMode` in `FaceDetector` constructor
+  };
+```
+
+The Chromium implementation of the `FaceDetectionTest` interface is located in
+[mock-facedetection.js](../resources/chromium/mock-facedetection.js).
+
+The `BarcodeDetectionTest` interface is defined as:
+
+```
+  class BarcodeDetectionTest {
+    async initialize();  // Sets up the testing environment.
+    async reset(); // Frees the resources.
+    MockBarcodeDetectionProvider(); //Returns `MockBarcodeDetectionProvider` interface.
+  };
+
+  class MockBarcodeDetectionProvider {
+    async enumerateSupportedFormats(); //Enumerates supported formats
+    getFrameData(); //Gets frame data of detection result.
+    getFormats(); //Gets value of `formats` in `BarcodeDetector` constructor
+  };
+```
+
+The Chromium implementation of the `BarcodeDetectionTest` interface is located in
+[mock-barcodedetection.js](../resources/chromium/mock-barcodedetection.js).
+
+Other browser vendors should provide their own implementations of
+the `FaceDetectionTest` and `BarcodeDetectionTest` interfaces.
--- a/tests/wpt/web-platform-tests/shape-detection/detected-boundingBox-read-only.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detected-boundingBox-read-only.html
@ -0,0 +1,51 @@
+<!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 detected{Face, Barcode}'s boundingBox
+// should be DOMRectReadOnly.
+const imageDataTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        mockTestName: "FaceDetectionTest",
+        name: "Face - detectedFace.boundingBox should be DOMRectReadOnly"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        mockTestName: "BarcodeDetectionTest",
+        name: "Barcode - detectedBarcode.boundingBox should be DOMRectReadOnly"
+      }
+    ];
+
+for (let imageDataTest of imageDataTests) {
+  detection_test(imageDataTest.mockTestName, async t => {
+    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 = document.createElement("canvas");
+    canvas.getContext("2d").drawImage(img, 0, 0);
+
+    const detector = imageDataTest.createDetector();
+    const detectionResult = await detector.detect(canvas.getContext("2d")
+        .getImageData(0, 0, canvas.width, canvas.height));
+    CheckDetectedReadOnlyBoundingBoxes(detectionResult);
+  }, imageDataTest.name);
+}
+
+function CheckDetectedReadOnlyBoundingBoxes(detectedObjects) {
+  const properties =
+      ['x', 'y', 'width', 'height', 'top', 'right', 'bottom', 'left'];
+
+  detectedObjects.forEach(detectedObject => {
+    properties.forEach(property => {
+      assert_readonly(detectedObject.boundingBox, property);
+    });
+  });
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-HTMLCanvasElement.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-HTMLCanvasElement.html
@ -0,0 +1,73 @@
+<!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"); },
+        mockTestName: "FaceDetectionTest",
+        detectionResultTest: FaceDetectorDetectionResultTest,
+        name: "Face - detect(HTMLCanvasElement)"
+      },
+      {
+        createDetector: () => { return new FaceDetector(); },
+        createCanvas: () => { return new OffscreenCanvas(300, 150); },
+        mockTestName: "FaceDetectionTest",
+        detectionResultTest: FaceDetectorDetectionResultTest,
+        name: "Face - detect(OffscreenCanvas)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        createCanvas: () => { return document.createElement("canvas"); },
+        mockTestName: "BarcodeDetectionTest",
+        detectionResultTest: BarcodeDetectorDetectionResultTest,
+        name: "Barcode - detect(HTMLCanvasElement)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        createCanvas: () => { return new OffscreenCanvas(300, 150); },
+        mockTestName: "BarcodeDetectionTest",
+        detectionResultTest: BarcodeDetectorDetectionResultTest,
+        name: "Barcode - 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").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");
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-HTMLImageElement.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-HTMLImageElement.html
@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/shapedetection-helpers.js"></script>
+<body>
+<img id="img" src="/images/green-16x16.png"/>
+</body>
+<script>
+
+// These tests verify that a Detector's detect() works on an HTMLImageElement.
+const imageElementTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        mockTestName: "FaceDetectionTest",
+        detectionResultTest: FaceDetectorDetectionResultTest,
+        name: "Face - detect(HTMLImageElement)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        mockTestName: "BarcodeDetectionTest",
+        detectionResultTest: BarcodeDetectorDetectionResultTest,
+        name: "Barcode - detect(HTMLImageElement)",
+      }
+    ];
+
+for (let imageElementTest of imageElementTests) {
+  detection_test(imageElementTest.mockTestName, async (t, detectionTest) => {
+    const img = document.getElementById("img");
+
+    const detector = imageElementTest.createDetector();
+    const detectionResult = await detector.detect(img);
+    imageElementTest.detectionResultTest(detectionResult, detectionTest);
+  }, imageElementTest.name);
+}
+
+function FaceDetectorDetectionResultTest(detectionResult, mockTest) {
+  const imageReceivedByMock =
+      mockTest.MockFaceDetectionProvider().getFrameData();
+  assert_equals(imageReceivedByMock.byteLength, 1024, "Image length");
+  const GREEN_PIXEL = 0xFF00FF00;
+  assert_equals(imageReceivedByMock[0], GREEN_PIXEL, "Pixel color");
+  assert_equals(detectionResult.length, 3, "Number of faces");
+  assert_equals(detectionResult[0].landmarks.length, 2, "Number of landmarks");
+  assert_object_equals(detectionResult[0].landmarks[0],
+                      {type : 'eye', locations : [{x : 4.0, y : 5.0}]},
+                      "landmark #1");
+  assert_equals(detectionResult[0].landmarks[1].locations.length, 8,
+                "Number of locations along eye");
+  assert_object_equals(detectionResult[1].landmarks[0],
+                      {type : 'nose', locations : [{x : 100.0, y : 50.0}]},
+                      "landmark #2");
+  assert_equals(detectionResult[1].landmarks[1].locations.length, 9,
+                "Number of locations along nose");
+}
+
+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");
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-HTMLVideoElement.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-HTMLVideoElement.html
@ -0,0 +1,55 @@
+<!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 HTMLVideoElement.
+const videoElementTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        mockTestName: "FaceDetectionTest",
+        detectionResultTest: FaceDetectorDetectionResultTest,
+        name: "Face - detect(HTMLVideoElement)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        mockTestName: "BarcodeDetectionTest",
+        detectionResultTest: BarcodeDetectorDetectionResultTest,
+        name: "Barcode - detect(HTMLVideoElement)",
+      }
+    ];
+
+for (let videoElementTest of videoElementTests) {
+  detection_test(videoElementTest.mockTestName, async (t, detectionTest) => {
+    const video = document.createElement("video");
+    video.src = "/media/white.webm";
+    video.loop = true;
+    video.autoplay = true;
+    const videoWatcher = new EventWatcher(t, video, ["play", "error"]);
+    video.load();
+    await videoWatcher.wait_for("play");
+
+    const detector = videoElementTest.createDetector();
+    const detectionResult = await detector.detect(video);
+    videoElementTest.detectionResultTest(detectionResult, detectionTest);
+  }, videoElementTest.name);
+}
+
+function FaceDetectorDetectionResultTest(detectionResult, mockTest) {
+  const imageReceivedByMock =
+      mockTest.MockFaceDetectionProvider().getFrameData();
+  assert_equals(imageReceivedByMock.byteLength, 307200, "Image length");
+  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");
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-ImageBitmap.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-ImageBitmap.html
@ -0,0 +1,54 @@
+<!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 ImageBitmap.
+const imageBitmapTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        mockTestName: "FaceDetectionTest",
+        detectionResultTest: FaceDetectorDetectionResultTest,
+        name: "Face - detect(ImageBitmap)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        mockTestName: "BarcodeDetectionTest",
+        detectionResultTest: BarcodeDetectorDetectionResultTest,
+        name: "Barcode - detect(ImageBitmap)",
+      }
+    ];
+
+for (let imageBitmapTest of imageBitmapTests) {
+  detection_test(imageBitmapTest.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 imageBitmap = await createImageBitmap(img);
+
+    const detector = imageBitmapTest.createDetector();
+    const detectionResult = await detector.detect(imageBitmap);
+    imageBitmapTest.detectionResultTest(detectionResult, detectionTest);
+  }, imageBitmapTest.name);
+}
+
+function FaceDetectorDetectionResultTest(detectionResult, mockTest) {
+  const imageReceivedByMock = mockTest.MockFaceDetectionProvider().getFrameData();
+  assert_equals(imageReceivedByMock.byteLength, 1024, "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");
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-ImageData.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-ImageData.html
@ -0,0 +1,56 @@
+<!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 ImageBitmap.
+const imageDataTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        mockTestName: "FaceDetectionTest",
+        detectionResultTest: FaceDetectorDetectionResultTest,
+        name: "Face - detect(ImageData)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        mockTestName: "BarcodeDetectionTest",
+        detectionResultTest: BarcodeDetectorDetectionResultTest,
+        name: "Barcode - detect(ImageData)"
+      }
+    ];
+
+for (let imageDataTest of imageDataTests) {
+  detection_test(imageDataTest.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 = document.createElement("canvas");
+    canvas.getContext("2d").drawImage(img, 0, 0);
+
+    const detector = imageDataTest.createDetector();
+    const detectionResult = await detector.detect(canvas.getContext("2d")
+        .getImageData(0, 0, canvas.width, canvas.height));
+    imageDataTest.detectionResultTest(detectionResult, detectionTest);
+  }, imageDataTest.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");
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-getSupportedFormats.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-getSupportedFormats.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://wicg.github.io/shape-detection-api/#dom-barcodedetector-getsupportedformats">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/shapedetection-helpers.js"></script>
+<script>
+
+detection_test('BarcodeDetectionTest', async t => {
+  const result = await BarcodeDetector.getSupportedFormats();
+  assert_equals(result.length, 3, 'Number of supported formats');
+  assert_equals(result[0], 'aztec', 'format 1');
+  assert_equals(result[1], 'data_matrix', 'format 2');
+  assert_equals(result[2], 'qr_code', 'format 3');
+}, 'get supported barcode formats');
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-on-worker.worker.js
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-on-worker.worker.js
@ -0,0 +1,47 @@
+importScripts("/resources/testharness.js");
+importScripts("resources/shapedetection-helpers.js");
+
+'use strict';
+
+// These tests verify that a Detector's detect() works on an
+// ImageBitmap on workers.
+const imageBitmapTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        mockTestName: "FaceDetectionTest",
+        resultSize: 3, // Number of faces
+        detectorType: "Face"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        mockTestName: "BarcodeDetectionTest",
+        resultSize: 2, // Number of barcodes
+        detectorType: "Barcode"
+      }
+    ];
+
+for (let imageBitmapTest of imageBitmapTests) {
+  // ImageBitmap is of transferable type and can be sent to and
+  // tested on worker.
+  detection_test(imageBitmapTest.mockTestName, async (t, detectionTest) => {
+    const img = createTestImage();
+    const theImageBitmap = await createImageBitmap(img);
+    const detector = imageBitmapTest.createDetector();
+    const detectionResult = await detector.detect(theImageBitmap);
+    assert_equals(detectionResult.length, imageBitmapTest.resultSize,
+      `Number of ${imageBitmapTest.detectorType}`);
+  }, `${imageBitmapTest.detectorType} Detector detect(ImageBitmap) on worker`);
+}
+
+function createTestImage() {
+  const image = new OffscreenCanvas(100, 50);
+  const imgctx = image.getContext('2d');
+  imgctx.fillStyle = "#F00";
+  imgctx.fillRect(0, 0, 2, 2);
+  imgctx.fillStyle = "#0F0";
+  imgctx.fillRect(0, 0, 1, 1);
+  return image;
+}
+
+done();
--- a/tests/wpt/web-platform-tests/shape-detection/detection-options.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-options.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/shapedetection-helpers.js"></script>
+<body>
+<img id="img" src="/images/green-16x16.png"/>
+</body>
+<script>
+
+detection_test("FaceDetectionTest", async (t, detectionTest) => {
+  const img = document.getElementById("img");
+  const mock = detectionTest.MockFaceDetectionProvider();
+
+  const detectorWithDefault = new FaceDetector();
+  let faceDetectionResult = await detectorWithDefault.detect(img);
+  assert_equals(mock.getMaxDetectedFaces(), 10, "default maxDetectedFaces");
+  assert_equals(mock.getFastMode(), false, "default maxDetectedFaces");
+
+  const detectorWithOptions =
+      new FaceDetector({maxDetectedFaces: 7, fastMode: true});
+  faceDetectionResult = await detectorWithOptions.detect(img);
+  assert_equals(mock.getMaxDetectedFaces(), 7, "maxDetectedFaces");
+  assert_equals(mock.getFastMode(), true, "maxDetectedFaces");
+}, "Test that FaceDetectionOptions are correctly propagated");
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detection-security-test.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detection-security-test.html
@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/shapedetection-helpers.js"></script>
+<script>
+
+// Detectors should reject undecodable images with an InvalidStateError.
+const badImageTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        name: "Face - detect(broken image)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        name: "Barcode - detect(broken image)",
+      }
+    ];
+
+for (let badImageTest of badImageTests) {
+  // This test verifies that a Detector will reject an undecodable image.
+  promise_test(async t => {
+    const img = new Image();
+    const error =
+        await detectOnElementAndExpectError(badImageTest.createDetector,
+                                            img, "/images/broken.png");
+    assert_equals(error.name, "InvalidStateError");
+  }, badImageTest.name);
+}
+
+// Detectors should reject undecodable videos with an InvalidStateError.
+const badVideoTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        name: "Face - detect(broken video)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        name: "Barcode - detect(broken video)"
+      }
+    ];
+
+for (let badVideoTest of badVideoTests) {
+  // This test verifies that a Detector will reject a broken video.
+  promise_test(async t => {
+    const video = document.createElement('video');
+    const error =
+        await detectOnElementAndExpectError(badVideoTest.createDetector,
+                                            video, "garbage.webm");
+    assert_equals(error.name, "InvalidStateError");
+  }, badVideoTest.name);
+}
+
+// Returns a Promise that is resolve()d if detect() is rejected. Needs an input
+// |element| (e.g. an HTMLImageElement or HTMLVideoElement) and a |url| to load.
+function detectOnElementAndExpectError(createDetector, element, url) {
+  return new Promise((resolve, reject) => {
+    const tryDetection = async () => {
+      const detector = createDetector();
+      try {
+        const detectionResult = await detector.detect(element);
+        reject("Promise should have been rejected.");
+      } catch (error) {
+        resolve(error);
+      }
+    };
+    element.onload = tryDetection;
+    element.onerror = tryDetection;
+    element.src = url;
+  });
+};
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/detector-same-object.html
+++ b/tests/wpt/web-platform-tests/shape-detection/detector-same-object.html
@ -0,0 +1,55 @@
+<!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 detect()ed Detected{Barcode,Face}'s individual
+// fields are [SameObject].
+const imageDataTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        mockTestName: "FaceDetectionTest",
+        detectionResultTest: CheckDetectedFaceSameObjects,
+        name: "Face - detect(ImageData), [SameObject]"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        mockTestName: "BarcodeDetectionTest",
+        detectionResultTest: CheckDetectedBarcodesSameObjects,
+        name: "Barcode - detect(ImageData), [SameObject]"
+      }
+    ];
+
+for (let imageDataTest of imageDataTests) {
+  detection_test(imageDataTest.mockTestName, async t => {
+    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 = document.createElement("canvas");
+    canvas.getContext("2d").drawImage(img, 0, 0);
+
+    const detector = imageDataTest.createDetector();
+    const detectionResult = await detector.detect(canvas.getContext("2d")
+        .getImageData(0, 0, canvas.width, canvas.height));
+    imageDataTest.detectionResultTest(detectionResult);
+  }, imageDataTest.name);
+}
+
+function CheckDetectedFaceSameObjects(detectedFaces) {
+  assert_greater_than(detectedFaces.length, 0, "Number of faces");
+  assert_equals(detectedFaces[0].boundingBox, detectedFaces[0].boundingBox);
+  assert_equals(detectedFaces[0].landmarks, detectedFaces[0].landmarks);
+}
+
+function CheckDetectedBarcodesSameObjects(detectedBarcodes) {
+  assert_greater_than(detectedBarcodes.length, 0, "Number of barcodes");
+  assert_equals(detectedBarcodes[0].rawValue, detectedBarcodes[0].rawValue);
+  assert_equals(detectedBarcodes[0].boundingBox, detectedBarcodes[0].boundingBox);
+  assert_equals(detectedBarcodes[0].format, detectedBarcodes[0].format);
+  assert_equals(detectedBarcodes[0].cornerPoints, detectedBarcodes[0].cornerPoints);
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/idlharness.any.js
+++ b/tests/wpt/web-platform-tests/shape-detection/idlharness.any.js
@ -1,12 +1,54 @@
 // META: script=/resources/WebIDLParser.js
 // META: script=/resources/idlharness.js
+// META: script=/shape-detection/resources/shapedetection-helpers.js

 // See: https://wicg.github.io/shape-detection-api/

-promise_test(async () => {
-  const idl = await fetch('/interfaces/shape-detection-api.idl').then(r => r.text());
+'use strict';

-  const idl_array = new IdlArray();
-  idl_array.add_idls(idl);
-  idl_array.test();
-}, 'Test shape-detection IDL interface');
+idl_test(
+  ['shape-detection-api'],
+  ['dom', 'geometry'],
+  async idl_array => {
+    let faceDetectionTest, barcodeDetectionTest;
+    try {
+      faceDetectionTest =
+          await initialize_detection_tests("FaceDetectionTest");
+      barcodeDetectionTest =
+          await initialize_detection_tests("BarcodeDetectionTest");
+      const img = createTestImage();
+      const theImageBitmap = await createImageBitmap(img);
+
+      self.faceDetector = new FaceDetector();
+      const faceDetectionResult = await faceDetector.detect(theImageBitmap);
+      self.detectedFace = faceDetectionResult[0];
+
+      self.barcodeDetector = new BarcodeDetector();
+      const barcodeDetectionResult =
+          await barcodeDetector.detect(theImageBitmap);
+      self.detectedBarcode = barcodeDetectionResult[0];
+    } catch (e) {
+      // Surfaced in idlharness.js's test_object below.
+    } finally {
+      faceDetectionTest.reset();
+      barcodeDetectionTest.reset();
+    }
+
+    idl_array.add_objects({
+      FaceDetector: ['faceDetector'],
+      DetectedFace: ['detectedFace'],
+      BarcodeDetector: ['barcodeDetector'],
+      DetectedBarcode: ['detectedBarcode']
+    });
+  }
+);
+
+function createTestImage() {
+  const image = new OffscreenCanvas(100, 50);
+  const imgctx = image.getContext('2d');
+  imgctx.fillStyle = "#F00";
+  imgctx.fillRect(0, 0, 2, 2);
+  imgctx.fillStyle = "#0F0";
+  imgctx.fillRect(0, 0, 1, 1);
+  return image;
+}
--- a/tests/wpt/web-platform-tests/shape-detection/resources/shapedetection-helpers.js
+++ b/tests/wpt/web-platform-tests/shape-detection/resources/shapedetection-helpers.js
@ -0,0 +1,91 @@
+'use strict';
+
+// These tests rely on the User Agent providing an implementation of
+// platform shape detection backends.
+//
+// In Chromium-based browsers this implementation is provided by a polyfill
+// in order to reduce the amount of test-only code shipped to users. To enable
+// these tests the browser must be run with these options:
+//
+//   --enable-blink-features=MojoJS,MojoJSTest
+
+let loadChromiumResources = Promise.resolve().then(() => {
+  if (!MojoInterfaceInterceptor) {
+    // Do nothing on non-Chromium-based browsers or when the Mojo bindings are
+    // not present in the global namespace.
+    return;
+  }
+
+  const prefix = '/gen/services/shape_detection/public/mojom';
+  let chain = Promise.resolve();
+  [
+    '/gen/layout_test_data/mojo/public/js/mojo_bindings.js',
+    '/gen/mojo/public/mojom/base/big_buffer.mojom.js',
+    '/gen/skia/public/interfaces/image_info.mojom.js',
+    '/gen/skia/public/interfaces/bitmap.mojom.js',
+    '/gen/ui/gfx/geometry/mojo/geometry.mojom.js',
+    `${prefix}/barcodedetection.mojom.js`,
+    `${prefix}/barcodedetection_provider.mojom.js`,
+    `${prefix}/facedetection.mojom.js`,
+    `${prefix}/facedetection_provider.mojom.js`,
+    '/resources/chromium/mock-barcodedetection.js',
+    '/resources/chromium/mock-facedetection.js',
+  ].forEach(path => {
+    // Use importScripts for workers.
+    if (typeof document === 'undefined') {
+      chain = chain.then(() => importScripts(path));
+      return;
+    }
+    let script = document.createElement('script');
+    script.src = path;
+    script.async = false;
+    chain = chain.then(() => new Promise(resolve => {
+      script.onload = () => resolve();
+    }));
+    document.head.appendChild(script);
+  });
+
+  return chain;
+});
+
+/**
+ * @param {String} detectionTestName
+ * name of mock shape detection test interface,
+ * must be the item of ["FaceDetectionTest", "BarcodeDetectionTest"]
+*/
+async function initialize_detection_tests(detectionTestName) {
+  let detectionTest;
+  // Use 'self' for workers.
+  if (typeof document === 'undefined') {
+    if (typeof self[detectionTestName] === 'undefined') {
+      await loadChromiumResources;
+    }
+    detectionTest = new self[detectionTestName]();
+  } else {
+    if (typeof window[detectionTestName] === 'undefined') {
+      await loadChromiumResources;
+    }
+    detectionTest = new window[detectionTestName]();
+  }
+  await detectionTest.initialize();
+  return detectionTest;
+}
+
+function detection_test(detectionTestName, func, name, properties) {
+  promise_test(async t => {
+    let detectionTest = await initialize_detection_tests(detectionTestName);
+    try {
+      await func(t, detectionTest);
+    } finally {
+      await detectionTest.reset();
+    };
+  }, name, properties);
+}
+
+function getArrayBufferFromBigBuffer(bigBuffer) {
+  if (bigBuffer.$tag == mojoBase.mojom.BigBuffer.Tags.bytes) {
+    return new Uint8Array(bigBuffer.bytes).buffer;
+  }
+  return bigBuffer.sharedMemory.bufferHandle.mapBuffer(0,
+      bigBuffer.sharedMemory.size).buffer;
+}
--- a/tests/wpt/web-platform-tests/shape-detection/shapedetection-cross-origin.sub.html
+++ b/tests/wpt/web-platform-tests/shape-detection/shapedetection-cross-origin.sub.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script>
+
+// cross-origin resources
+const IMAGE_URL =
+    "https://{{domains[www1]}}:{{ports[https][0]}}/images/green.png";
+const VIDEO_URL =
+    "https://{{domains[www1]}}:{{ports[https][0]}}/media/white.webm";
+
+const crossOriginTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        detectorType: "FaceDetector"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        detectorType: "BarcodeDetector"
+      }
+    ];
+
+for (let crossOriginTest of crossOriginTests) {
+
+  // Verifies that Detector rejects a cross-origin HTMLImageElement.
+  promise_test(async t => {
+    const img = new Image();
+    const imgWatcher = new EventWatcher(t, img, ["load", "error"]);
+    img.src = IMAGE_URL;
+    await imgWatcher.wait_for("load");
+    const detector = crossOriginTest.createDetector();
+    promise_rejects(t, "SecurityError", detector.detect(img));
+  }, crossOriginTest.detectorType
+  + " should reject cross-origin HTMLImageElements with a SecurityError.");
+
+  // Verifies that Detector rejects a cross-origin ImageBitmap.
+  promise_test(async t => {
+    const img = new Image();
+    const imgWatcher = new EventWatcher(t, img, ["load", "error"]);
+    img.src = IMAGE_URL;
+    await imgWatcher.wait_for("load");
+    const imgBitmap = await createImageBitmap(img);
+    const detector = crossOriginTest.createDetector();
+    promise_rejects(t, "SecurityError", detector.detect(imgBitmap));
+  }, crossOriginTest.detectorType
+  + " should reject cross-origin ImageBitmaps with a SecurityError.");
+
+  // Verifies that Detector rejects a cross-origin HTMLVideoElement.
+  promise_test(async t => {
+    const video = document.createElement('video');
+    const videoWatcher = new EventWatcher(t, video, ["loadeddata", "error"]);
+    video.src = VIDEO_URL;
+    await videoWatcher.wait_for("loadeddata");
+    const detector = crossOriginTest.createDetector();
+    promise_rejects(t, "SecurityError", detector.detect(video));
+  }, crossOriginTest.detectorType
+  + " should reject cross-origin HTMLVideoElements with a SecurityError.");
+
+}
+
+</script>
--- a/tests/wpt/web-platform-tests/shape-detection/shapedetection-empty-input.html
+++ b/tests/wpt/web-platform-tests/shape-detection/shapedetection-empty-input.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script>
+
+// This test verifies *Detector.detect() returns an empty list when fed with
+// an empty HTMLImageElement.
+const emptyInputTests =
+    [
+      {
+        createDetector: () => { return new FaceDetector(); },
+        name: "Face - detect(empty)"
+      },
+      {
+        createDetector: () => { return new BarcodeDetector(); },
+        name: "Barcode - detect(empty)"
+      }
+    ];
+
+for (let emptyInputTest of emptyInputTests) {
+  promise_test(async t =>{
+    const img = new Image();
+    const imgWatcher = new EventWatcher(t, img, ["load", "error"]);
+    img.src = "";
+    await imgWatcher.wait_for("error");
+
+    const detector = emptyInputTest.createDetector();
+    const detectionResult = await detector.detect(img);
+    assert_equals(detectionResult.length, 0);
+  }, emptyInputTest.name);
+}
+
+</script>