Fix canvas createpattern for null and broken images.

According to the WHATWG spec, we should be returning null (and not throwing an error) when calling createPattern on images with bad usability.

https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-createpattern

This allows these tests to pass.

Also, "broken.png" was not actually a broken image and these tests should be throwing errors:

If image's current request's state is broken, then throw an "InvalidStateError" DOMException. There was some confusion in the tests, being undecodable and broken are two different states:
https://html.spec.whatwg.org/multipage/canvas.html#check-the-usability-of-the-image-argument

See https://github.com/whatwg/html/issues/8149 for discussion on this topic.

Bug: 1230183, 1055111
Change-Id: I44d7bc52992f12bbe8e045b5866b4f24058da6e2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3708127
Reviewed-by: Juanmi Huertas <juanmihd@chromium.org>
Commit-Queue: Aaron Krajeski <aaronhk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1034214}
diff --git a/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html b/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html
index 017048c..4b22ffc 100644
--- a/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html
+++ b/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html
@@ -22,8 +22,7 @@
 ctx.fillStyle = '#0f0';
 ctx.fillRect(0, 0, 100, 50);
 var img = document.getElementById('broken.png');
-ctx.drawImage(img, 0, 0);
-_assertPixelApprox(canvas, 50,25, 0,255,0,255, "50,25", "0,255,0,255", 2);
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.drawImage(img, 0, 0); });
 
 
 });
diff --git a/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html b/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html
index 8eafcad..9f1bb2d 100644
--- a/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html
+++ b/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html
@@ -20,7 +20,7 @@
 _addTest(function(canvas, ctx) {
 
 var img = document.getElementById('broken.png');
-_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(img, 'repeat'); });
 
 
 });
diff --git a/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html b/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html
index 74ca9a8..3cae352 100644
--- a/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html
+++ b/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html
@@ -209,7 +209,7 @@
 }, "createImageBitmap with a broken image source.");
 
 promise_test( t => {
-  return makeAvailableButBrokenImage("/images/broken.png").then(image => {
+  return makeAvailableButBrokenImage("/images/undecodable.png").then(image => {
     return promise_rejects_dom(t, "InvalidStateError",
         createImageBitmap(image));
   });
diff --git a/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml b/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml
index 8569ed0..8c6de99 100644
--- a/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml
+++ b/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml
@@ -464,8 +464,7 @@
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
     var img = document.getElementById('broken.png');
-    ctx.drawImage(img, 0, 0);
-    @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo
+    @assert throws INVALID_STATE_ERR ctx.drawImage(img, 0, 0);
   expected: green
 
 - name: 2d.drawImage.nonexistent
diff --git a/html/canvas/tools/yaml/element/fill-and-stroke-styles.yaml b/html/canvas/tools/yaml/element/fill-and-stroke-styles.yaml
index 88a3611..1650ec4 100644
--- a/html/canvas/tools/yaml/element/fill-and-stroke-styles.yaml
+++ b/html/canvas/tools/yaml/element/fill-and-stroke-styles.yaml
@@ -1487,7 +1487,7 @@
   - broken.png
   code: |
     var img = document.getElementById('broken.png');
-    @assert ctx.createPattern(img, 'repeat') === null;
+    @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
 
 - name: 2d.pattern.image.nonexistent
   testing:
diff --git a/html/semantics/embedded-content/the-img-element/environment-changes/viewport-change.html b/html/semantics/embedded-content/the-img-element/environment-changes/viewport-change.html
index f6ae657..bf65172 100644
--- a/html/semantics/embedded-content/the-img-element/environment-changes/viewport-change.html
+++ b/html/semantics/embedded-content/the-img-element/environment-changes/viewport-change.html
@@ -39,7 +39,7 @@
       var expected = {wide:resolve(img.dataset.wide), narrow:resolve(img.dataset.narrow)};
       var current = iframe.className;
       var next = current === 'wide' ? 'narrow' : 'wide';
-      var expect_change = expected[next].indexOf('broken.png') === -1 && !('noChange' in img.dataset);
+      var expect_change = expected[next].indexOf('undecodable.png') === -1 && !('noChange' in img.dataset);
 
       test(function() {
         assert_equals(img.currentSrc, expected[current]);
diff --git a/images/broken.png b/images/broken.png
index f258101..2ff648a 100644
--- a/images/broken.png
+++ b/images/broken.png
Binary files differ
diff --git a/images/undecodable.png b/images/undecodable.png
new file mode 100644
index 0000000..f258101
--- /dev/null
+++ b/images/undecodable.png
Binary files differ