misc: add usesPixelArtScaling flag to images #10481
Conversation
This new flag will be used by the ImageSizeResponsive audit (GoogleChrome#10245), as those images are intendedly displayed in a pixelated form, so the audit should not flag them. Note that `image-rendering: -mo-crisp-edges;` is also an accepted value in Firefox, however in such case, the computed style will return `crips-edges`.
sk-
changed the title
There was a problem hiding this comment.
thanks @sk-! we could probably combine the two properties into the one PR since these are so small.
| * @return {boolean} | ||
| */ | ||
| function usesPixelArtScaling(style) { | ||
| return ['pixelated', 'crisp-edges'].includes( |
There was a problem hiding this comment.
we might just want to do this inline, these get executed in browser which means we have to jump through some hoops like /* istanbul ignore next */, stringifying the function into global scope, etc
There was a problem hiding this comment.
Thanks for the tip. I had to inline it as otherwise the code would not run.
The only problem now is that there's duplicated code.
Apparently the code is executed in another process, which means, that functions mus be inlined, otherwise the code needs to go through some extra hoops.
|
@patrickhulce Thanks for the review, I added the other flag. |
|
@sk- not sure if your plan was to add this to the existing open PR or file another one once it is merged but some smoke tests for these would be great :) |
|
@patrickhulce Thanks for merging. Regarding smoke tests, I could do it in the open PR. Will update it accordingly. |
Two new flags are added to
ImageElements.The first,
usesPixelArtScalingwill be used by theImageSizeResponsiveaudit (#10460), as those images are intendedly displayed in a pixelated form, so the audit should not flag them.Note that
image-rendering: -moz-crisp-edges;is also an accepted value in Firefox, however in such case, the computed style will returncrips-edges.See https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look for more information.
The second is
usesSrcSetDensityDescriptor. That flag will also be used by theImageSizeResponsiveand is required, as by the spec, the natural size of the image, is the actual size of the image divided by its density descriptor. Note that we cannot access the actual value of the density descriptor, so in the audit the best option will be to just skip those images.An alternative would be to recompute the size of those images, but that may break some other assumptions about
naturalWidth,naturalHeight.