2d.pattern.image.broken test prints FAIL because /images/broken.png is not Broken per HTML Standard

[guest271314]

This test https://wpt.fyi/results/2dcontext/fill-and-stroke-styles/2d.pattern.image.broken.html?label=master&label=experimental&aligned&q=2d.pattern.image.broken.html fails for all browsers because the /images/broken.png is not "Broken" per HTML Standard https://html.spec.whatwg.org/multipage/images.html#img-error (see #21683 (comment).)

Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

The code at the test expects an exception to be thrown

assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(img, 'repeat'); });

which references https://heycam.github.io/webidl/#dom-domexception-invalid_state_err by way of MDN.

width and height is decoded for the image in the repository at Firefox 72, Nightly 74, Chromium 81.

Why is an INVALID_STATE_ERR expected to be thrown for that test?

[guest271314]

Interestingly Firefox 72 and Nightly 74 do not throw a DOM exception for the same code that Chromium 81 throws an exception for. Instead, null is printed when createPattern() is executed. The image source width and height are 0 and src is data:,

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var img = document.createElement("img");
var imageSource = document.createElement("canvas");
imageSource.width = 0;
imageSource.height = 0;
var src = imageSource.toDataURL();
console.log(src);
img.onload = img.onerror = function handleImageLoadAndError(event) {
   console.log(img.naturalWidth, img.naturalHeight);
    try { 
     console.log(ctx.createPattern(img, 'repeat')); } 
    catch(e) {
      console.error(e);
      console.assert(e.name !== "InvalidStateError", e.name);
    };
  };
  img.src = src;

That is precisely the case where the exception should be thrown, not null returned. Unless missing some part of the specification where there is an obvious contradiction to the above quoted language in HTML Standard?

[guest271314]

Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1614225

[tnikkel]

Safari returns a CanvasPattern for the posted example, differing from both Firefox and Chrome.

[guest271314]

Ok.

Objectively, currently only Chromium outputs the expected result per the current iteration of the specification.

Is there any reason or use case for not throwing an exception (Firefox, Safari behaviour) per the specification?

[tnikkel]

Are we 100% sure that we want to treat that image as broken? It comes from calling toDataURL() on a valid canvas, that would seem to indicate that it is valid. All of Chrome, Firefox, and Safari determine that correct dimensions for the image.

[guest271314]

The result of toDataURL() is data:,. What image data is retrievable from such an image? What are the use cases for an image having width and height set to 0?

Have not reviewed the blame as to why the current specification states "no data" and refers to dimensions as being relevant to an image being "broken". "0 width" and "0 height" are two criteria mentioned, although the image in WPT repository used for the test appears to be designed to be "broken" due to Fatal error reading PNG image file: IDAT: CRC error which Ristretto Image View program at *nix outputs when loading the image, not 0 width and 0 height. 0 width and 0 height are not the only criteria listed at the specification for "Broken", merely the simplest to reproduce using data:, result of toDataURL() on a canvas with 0 width and height. There are probably more than one way to "corrupt" an image enough for some image or graphics programs to output an error, though perhaps not to the degree that all modern browsers' image decoding capabilities will throw an exception. In this case Chromium actually is compliant with the specification.