Closed Bug 1452979 Opened 3 years ago Closed 2 years ago

Support ImageRendering on canvas (NativeTexture external images)


(Core :: Graphics: WebRender, enhancement, P1)




Tracking Status
firefox64 --- fixed


(Reporter: kats, Assigned: h.winnemoeller)


(Blocks 2 open bugs)


(Whiteboard: [gfx-noted])


(4 files, 2 obsolete files)

There's some reftests that use -moz-crisp-edges. These are all failing on windows-qr due to lack of crispness, so presumably this isn't hooked up properly.
For the record, these are the reftests that I believe to be failing due to lack of -moz-crisp-edges support:

  == image-rendering-test.html image-rendering-ref.html
  == object-fit-fill-png-001c.html object-fit-fill-png-001-ref.html
  == object-fit-fill-png-002c.html object-fit-fill-png-002-ref.html
  == object-fit-contain-png-001c.html object-fit-contain-png-001-ref.html
  == object-fit-contain-png-002c.html object-fit-contain-png-002-ref.html
  == object-fit-cover-png-001c.html object-fit-cover-png-001-ref.html
  == object-fit-cover-png-002c.html object-fit-cover-png-002-ref.html
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Build ID: 20180709100247

Performing these tests using
gfx.webrender.all true
gfx.webrender.force-angle false
and thereby using OpenGL on Windows show crisp edges on all tests in Comment 1.

I guess the issue might be in ANGLE or some place between ANGLE and WR.
Assignee: nobody → mstange
0. (only macOS) Set to true. 
1. Be on a new profile and set gfx.webrender.all to true.
2. Create a Canvas element with some content that has sharp edges, e.g. a QR code.
3. Set the Canvas' style to image-rendering: -moz-crisp-edges
4. Draw the Canvas.
5. Zoom the Page.

Expected Results:
Content is scaled using a nearest neighbour/pixelated filter algorithm. Edges appear sharp.

Actual Results:
Content is scaled using a linear filter algorithm. Edges appear blurry.

When using moz-crisp-edges on a background image of the whole body or a div, WR produces correct sharp results (see But these reftests mentioned in comment all use canvas to draw their images. I added the moz-crisp-edges property to a small h264 video, which also shows incorrect results (see

To exclude any issues with DirectX, I used Renderdoc to verify that the correct filter is set. When looking at the expected sharp result, the filter is set to D3D11_FILTER_MIN_MAG_MIP_POINT. The actual result's filter is D3D11_FILTER_MIN_MAG_LINEAR_MIP_POINT. Thus, DirectX performs correctly.

ANGLE is also not responsible: when the Texture is created for the first time at, changing the SamplerState of the Texture to GL_NEAREST actually changes the result to the expected sharp result. So it looks like WR never updates the filter on the texture after it has been created.

Furthermore, this bug is also reproducible on macOS when setting to true (deprecated since Bug 1468801).

Therefore, WR does not update the image-rendering CSS property on NativeTexture external images on Windows and MacOS(SkiaGL). has been filed about this. Thanks for the investigation, Henrik!
Assignee: mstange → skisailer
OS: Unspecified → All
Hardware: Unspecified → All
Summary: Support -moz-crisp-edges on windows → Support -moz-crisp-edges on canvas + video (NativeTexture external images)
Version: Other Branch → Trunk
Attachment #9006116 - Flags: review?(nical.bugzilla)
Comment on attachment 9006115 [details] [diff] [review]

Review of attachment 9006115 [details] [diff] [review]:

::: gfx/webrender_bindings/RenderD3D11TextureHostOGL.cpp
@@ +81,5 @@
> +                                     mTextureHandle[1],
> +                                     aRendering);
> +      }
> +    }
> +    

nit: trailing space

::: gfx/webrender_bindings/RenderTextureHost.h
@@ +51,3 @@
>  protected:
>    virtual ~RenderTextureHost();
> +  

nit: trailing space
Attachment #9006115 - Flags: review?(nical.bugzilla) → review+
Comment on attachment 9006116 [details] [diff] [review]

Review of attachment 9006116 [details] [diff] [review]:

Attachment #9006116 - Flags: review?(nical.bugzilla) → review+
Depends on: 1487885
Blocks: 1488555
These changes introduce the ability to WR to apply ImageRendering on NativeTexture external images that work for the canvas examples. For video support for ImageRendering, further changes are needed on Gecko. Bug 1488555 has been filed for this.
Summary: Support -moz-crisp-edges on canvas + video (NativeTexture external images) → Support ImageRendering on canvas (NativeTexture external images)
Depends on: 1488887
No longer depends on: 1488887
Depends on: 1488887
No longer depends on: 1487885
Pushed by
Use ImageRendering property to provide proper filtering on NativeTexture external images. r=nical
Update reftest expectations. r=nical
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla64
You need to log in before you can comment on or make changes to this bug.