Bug 1685017 [wpt PR 27040] - createImageBitmap for out of bound clipp…

…ing, a=testonly

Automatic update from web-platform-tests
HTML: createImageBitmap() for out of bound clipping

For whatwg/html#6346.
--

wpt-commits: f480960da2cb3cc827f6fe4ac629b6dd229b0fea
wpt-pr: 27040

testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-bounds.html

@@ -4,41 +4,64 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/html/canvas/resources/canvas-tests.js"></script>
+<div id="results"></div>
 <script>
-promise_test(function(t) {
-    return new Promise(function(resolve, reject) {
-        const image = new Image();
-        image.onload = function() { resolve(image); };
-        image.onerror = function() { reject(); };
-        image.src = "/images/green-16x16.png";
-    }).then(function(image) {
-        return createImageBitmap(image, 8, 8, 16, 16);
-    }).then(function(imageBitmap) {
-        const color = 204;
+const color = 204;
+function testClip( name, sx, sy, sw, sh, expectedColors, expectedWidth, expectedHeight ) {
+    promise_test(function(t) {
+        return new Promise(function(resolve, reject) {
+            const image = new Image();
+            image.onload = function() { resolve(image); };
+            image.onerror = function() { reject(); };
+            image.src = "/images/green-16x16.png";
+        }).then(function(image) {
+            return createImageBitmap(image, sx, sy, sw, sh);
+        }).then(function(imageBitmap) {
 
-        const canvas = document.createElement("canvas");
-        canvas.width = 16;
-        canvas.height = 16;
+            assert_equals(imageBitmap.width, expectedWidth);
+            assert_equals(imageBitmap.height, expectedHeight);
 
-        // debug
-        document.body.appendChild(canvas);
-        canvas.setAttribute("style", "width: 100px; height: 100px;");
+            const canvas = document.createElement("canvas");
+            canvas.width = 16;
+            canvas.height = 16;
 
-        const ctx = canvas.getContext("2d");
-        ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
-        ctx.fillRect(0, 0, 20, 20);
-        ctx.drawImage(imageBitmap, 0, 0);
+            // debug
+            document.getElementById("results").append(canvas);
+            canvas.setAttribute("style", "width: 100px; height: 100px;");
 
-        const expected = [
-            [ 4,  4, 0,255,0,255],
-            [12,  4, color,color,color,255],
-            [ 4, 12, color,color,color,255],
-            [12, 12, color,color,color,255],
-        ];
-        for (let [x, y, r, g, b, a] of expected) {
-            _assertPixel(canvas, x,y, r,g,b,a, `${x},${y}`, `${r},${g},${b},${a}`);
-        }
+            const ctx = canvas.getContext("2d");
+            ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
+            ctx.fillRect(0, 0, 20, 20);
+            ctx.drawImage(imageBitmap, 0, 0);
 
-    });
-});
+            for (let [x, y, r, g, b, a] of expectedColors) {
+                _assertPixel(canvas, x,y, r,g,b,a, `${x},${y}`, `${r},${g},${b},${a}`);
+            }
+        });
+    }, name);
+}
+testClip( "simple clip inside",
+    8, 8, 8, 8, [
+        [ 4,  4, 0,255,0,255],           [12,  4, color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
+    ], 8, 8
+);
+testClip( "clip outside negative",
+    -8, -8, 16, 16, [
+        [ 4,  4, color,color,color,255], [12, 4,  color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, 0,255,0,255]
+    ], 16, 16
+);
+testClip( "clip outside positive",
+    8, 8, 16, 16, [
+        [ 4,  4, 0,255,0,255],           [12,  4, color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
+    ], 16, 16
+);
+testClip( "clip inside using negative width and height",
+    24, 24, -16, -16, [
+        [ 4,  4, 0,255,0,255],           [12,  4, color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
+    ], 16, 16
+);
 </script>