Bug 216111 – background-image filter() function does not do retina scaling

• Component: CSS
• Status: NEW

Created attachment 407843 [details]
Left is applying filter on an img node, right is applying filter on a background-image

There is a test case, fast/filter-image/background-filter-image.html that is testing the result of rendering background-image with filters. However there is a problem where current WebKit doesn't render the background image on Retina screens properly. In this test, background-filter-image.html uses 
    background-image: filter(url(../replaced/resources/compass.jpg), sepia(1)); 
to apply a sepia filter on the background image of a div; 

we are comparing against the reference test, fast/filter-image/background-filter-image-expected.html, which is just applying a sepia filter on a img node. 
    img {
        width: 100px;
        height: 100px;
        filter: sepia(1);
    }
    <img src="../replaced/resources/compass.jpg">

I have included a screenshot of the comparison: on the left we can see a sharp image, which is from fast/filter-image/background-filter-image-expected.html; on the right is a lower quality image from fast/filter-image/background-filter-image.html. 
Seems that we didn't upscale the image on retina screens when rendering background-image

[Radar WebKit Bug Importer]

<rdar://problem/68244885>

[Said Abou-Hallawa]

The fast/filter-image/background-filter-image.html is currently passing at least on macOS. This is true because WKR and DRT work on 1x mode. To fix this bug we need to move this test to fast/hidpi and include this line at the beginning:

    <script src="resources/ensure-hidpi.js"></script>

[Kiet Ho]

Pull request: https://github.com/WebKit/WebKit/pull/15021