Align tintColor transparent color behaviour with native

[karlsander]

I noticed that when we apply tintColor to images using a color with transparency, they seem to blend the color against black before applying it.

I am not deep enough in SVG to /really/ understand what's going on, but I noticed that changing the feComposite operator from atop to in fixes the behaviour. The operator description for "in" on the MDN page doesn't really sound wrong to me either. It works the same, except atop also has this:

The parts of the destination graphic that do not overlap with the source graphic stay untouched.

Isn't the source graphic in this case the flood fill? So there's no way not to overlap. I would expect identical behaviour, and yet, in operator has correct transparency behaviour in the browsers I tested.

I made some test screenshots with the following code

        <View style={{ backgroundColor: 'blue', padding: 12, flexDirection: 'row' }}>
          <Image tintColor={'rgba(255, 0, 0, 0)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 0.1)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 0.5)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 0.9)'} source={InactiveStar} />
          <Image tintColor={'rgba(255, 0, 0, 1)'} source={InactiveStar} />
        </View>

Here are screenshots with atop and in. From left to right: iOS native, iOS Safari, macOS Chrome, macOS Firefox

with atop:

with in

If you have any ideas what kinds of other scenarios should be tested, or what kind of test info should be attached to the PR, let me know.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit aad40b1ceaf649088625b4a0ad57c513dffb35c6:

Sandbox	Source
react-native-web-examples	Configuration