Add tests for CreateImageBitmap with "ImageOrientation: none"

Add tests for each orientation of EXIF with option {ImageOrientation: none} to make sure it goes back to the same image. Bug: 1342260 Change-Id: Ic9f090db0759a733f2be5480f00d1baa36cd8d95 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4225359 Commit-Queue: Yi Xu <[email protected]> Reviewed-by: Justin Novosad <[email protected]> Cr-Commit-Position: refs/heads/main@{#1109875}
web-platform-tests · Jul 16, 2023 · 1140602 · 1140602
1 parent eaf6f1a
commit 1140602
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 12 deletions.
diff --git a/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html b/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html
@@ -34,7 +34,7 @@
     document.body.append(canvas);
 
     const ctx = canvas.getContext("2d");
-    loadImage("resources/squares.jpg")
+    loadImage("resources/squares_6.jpg")
         .then((image) => createImageBitmap(image))
         .then(t.step_func_done(function(imageBitmap) {
             ctx.drawImage(imageBitmap, 0, 0);
@@ -59,7 +59,7 @@
     document.body.append(canvas);
 
     const ctx = canvas.getContext("2d");
-    loadImage("resources/squares.jpg")
+    loadImage("resources/squares_6.jpg")
         .then((image) => createImageBitmap(image, { imageOrientation: "flipY" }))
         .then(t.step_func_done(function(imageBitmap) {
             ctx.drawImage(imageBitmap, 0, 0);
@@ -84,7 +84,7 @@
     document.body.append(canvas);
 
     const ctx = canvas.getContext("2d");
-    loadImage("resources/squares.jpg")
+    loadImage("resources/squares_6.jpg")
         .then(image => createImageBitmap(image, 80, 0, 160, 160))
         .then(t.step_func_done(function(imageBitmap) {
             ctx.drawImage(imageBitmap, 0, 0);
@@ -105,7 +105,7 @@
     document.body.append(canvas);
 
     const ctx = canvas.getContext("2d");
-    loadImage("resources/squares.jpg")
+    loadImage("resources/squares_6.jpg")
         .then(image => createImageBitmap(image, 80, 0, 160, 160, { imageOrientation: "flipY" }))
         .then(t.step_func_done(function(imageBitmap) {
             ctx.drawImage(imageBitmap, 0, 0);

diff --git a/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation_none.html b/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation_none.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>Test that createImageBitmap honors EXIF orientation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>canvas { outline: 1px solid black; margin-right: 1em; }</style>
+<body>
+<script>
+function loadImage(src) {
+    return new Promise(function(resolve) {
+        const image = new Image();
+        image.addEventListener("load", () => resolve(image), { once: true });
+        image.src = src;
+    });
+}
+
+function checkColors(ctx, w, h, is_verticle, expectedColors) {
+    let data = ctx.getImageData(0, 0, w, h).data;
+    row_width = 80;
+    col_width = 80;
+
+    for (let [row, col, r, g, b, a] of expectedColors) {
+        let x = col * row_width + 10;
+        let y = row * col_width + 10;
+        let i = (x + y * w) * 4;
+
+        let expected = [r, g, b, a];
+        let actual = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+
+        assert_array_approx_equals(actual, expected, 1, `Pixel value at (${x},${y}) ${expected} =~ ${actual}.`);
+    }
+}
+
+for (let orientation of [1, 2, 3, 4, 5, 6, 7, 8]) {
+    async_test(function(t) {
+        const canvas = document.createElement("canvas");
+        canvas.width = 160;
+        canvas.height = 320;
+        document.body.append(canvas);
+
+        const ctx = canvas.getContext("2d");
+        loadImage(`resources/squares_${orientation}.jpg`)
+            .then((image) => createImageBitmap(image, { imageOrientation: "none" }))
+            .then(t.step_func_done(function(imageBitmap) {
+                ctx.drawImage(imageBitmap, 0, 0, 160, 320);
+
+                checkColors(ctx, canvas.width, canvas.height, false, [
+                    // row, col, r, g, b, a
+                    [0, 0, 0, 0, 0, 255],
+                    [0, 1, 128, 128, 128, 255],
+                    [1, 0, 0, 0, 255, 255],
+                    [1, 1, 128, 128, 255, 255],
+                    [2, 0, 0, 255, 0, 255],
+                    [2, 1, 128, 255, 128, 255],
+                    [3, 0, 255, 0, 0, 255],
+                    [3, 1, 255, 128, 128, 255],
+                ]);
+            }));
+    }, `createImageBitmap with Orientation ${orientation}`);
+}
+
+</script>
diff --git a/html/canvas/element/manual/imagebitmap/imagebitmap-replication-exif-orientation.html b/html/canvas/element/manual/imagebitmap/imagebitmap-replication-exif-orientation.html
@@ -52,7 +52,7 @@
 }
 
 promise_test(async t => {
-    const response = await fetch("resources/squares.jpg");
+    const response = await fetch("resources/squares_6.jpg");
     const blob = await response.blob();
     const image = await createImageBitmap(blob)
     const image_copy = structuredClone(image);
@@ -61,15 +61,15 @@
 
 promise_test(async t => {
     const image = new Image();
-    image.src = "resources/squares.jpg"
+    image.src = "resources/squares_6.jpg"
     await new Promise(resolve => image.onload = resolve);
     const image_copy = await createImageBitmap(image);
     checkImageBitmapRotated(image_copy);
 }, "ImageBitmap from file with EXIF rotation, loaded via <img>");
 
 promise_test(async t => {
     const image = new Image();
-    image.src = "resources/squares.jpg"
+    image.src = "resources/squares_6.jpg"
     // The following has no effect because the image's style is not
     // processed unless the element is connected to the DOM.
     image.style.imageOrientation = "none";
@@ -81,7 +81,7 @@
 promise_test(async t => {
     const image = new Image();
     document.body.appendChild(image);
-    image.src = "resources/squares.jpg"
+    image.src = "resources/squares_6.jpg"
     // The style is being processed in this case, but the imageOrientation
     // CSS property must still have no effect because createImageBitmap
     // accesses the element's underlying media directly, without being
@@ -94,7 +94,7 @@
 
 
 promise_test(async t => {
-    const response = await fetch("resources/squares.jpg");
+    const response = await fetch("resources/squares_6.jpg");
     const blob = await response.blob();
     const image = await createImageBitmap(blob);
     const image_copy = await createImageBitmap(image);
@@ -103,7 +103,7 @@
 
 promise_test(async t => {
     const worker = new Worker("serialize-worker.js");
-    const response = await fetch("resources/squares.jpg");
+    const response = await fetch("resources/squares_6.jpg");
     const blob = await response.blob()
     const image = await createImageBitmap(blob);
     worker.postMessage({bitmap: image});
@@ -113,7 +113,7 @@
 
 promise_test(async t => {
     const worker = new Worker("transfer-worker.js");
-    let response = await fetch("resources/squares.jpg");
+    let response = await fetch("resources/squares_6.jpg");
     let blob = await response.blob();
     let image = await createImageBitmap(blob);
     worker.postMessage({bitmap: image}, [image]);
@@ -130,7 +130,7 @@
     // duplication code path (if applicable) carries over the image
     // orientation metadata.
     const worker = new Worker("transfer-worker.js");
-    let response = await fetch("resources/squares.jpg");
+    let response = await fetch("resources/squares_6.jpg");
     let blob = await response.blob();
     let image = await createImageBitmap(blob);
     const canvas = document.createElement('canvas');

diff --git a/html/canvas/element/manual/imagebitmap/resources/squares_1.jpg b/html/canvas/element/manual/imagebitmap/resources/squares_1.jpg
diff --git a/html/canvas/element/manual/imagebitmap/resources/squares_2.jpg b/html/canvas/element/manual/imagebitmap/resources/squares_2.jpg
diff --git a/html/canvas/element/manual/imagebitmap/resources/squares_3.jpg b/html/canvas/element/manual/imagebitmap/resources/squares_3.jpg
diff --git a/html/canvas/element/manual/imagebitmap/resources/squares_4.jpg b/html/canvas/element/manual/imagebitmap/resources/squares_4.jpg
diff --git a/html/canvas/element/manual/imagebitmap/resources/squares_5.jpg b/html/canvas/element/manual/imagebitmap/resources/squares_5.jpg
diff --git a/.../manual/imagebitmap/resources/squares.jpg → ...anual/imagebitmap/resources/squares_6.jpg b/.../manual/imagebitmap/resources/squares.jpg → ...anual/imagebitmap/resources/squares_6.jpg
diff --git a/html/canvas/element/manual/imagebitmap/resources/squares_7.jpg b/html/canvas/element/manual/imagebitmap/resources/squares_7.jpg
diff --git a/html/canvas/element/manual/imagebitmap/resources/squares_8.jpg b/html/canvas/element/manual/imagebitmap/resources/squares_8.jpg