[csswg-drafts] [blending] mathematical rules for mix-blend-mode (#7946)

letochagone has just created a new issue for https://github.com/w3c/csswg-drafts:

== [blending] mathematical rules for mix-blend-mode ==
In order to implement some CSS functions in WebGL, I am trying to understand precisely their implementations.
Currently my problem concerns the mix-blend-mode.

take this example where I apply the following style for an element :
`
    background-blend-mode: difference;
    background-image:
      linear-gradient(
        rgba(0,255,153,0.7),
        rgba(0,255,153,0.7)),
      linear-gradient(
        rgba(255,0,51,0.4),
        rgba(255,0,51,0.4));
      background-color: rgba(0,0,0,1);

`

![image](https://user-images.githubusercontent.com/7129968/197461457-e26a9c5f-a65c-4a89-abad-76dc0d33f0a2.png)

now I read the color obtained with a color picker :

![image](https://user-images.githubusercontent.com/7129968/197462218-586a0d40-75ea-4b97-8899-02c7690bc922.png)


my goal is to find this result by applying the formulas :
https://drafts.fxtf.org/compositing/#blending

> Cb = (1,0,0.2)  and ab = 0.4   
> Cs = (0,1,0.6)  and as = 0.7  
> 
> Cm = | Cb - Cs | = (1,1,0.4) 
> we replace Cs by Cm :
> Cs = (1,1,0.4)
> 
> co = Cs x as + (0,0,0) x ab x (1-as)
> co = (1,1,0.4) x 0.7
> co = (0.7 , 0.7 , 0.28)
> 
> ao = as + ab x (1-as)
> ao = 0.7 + 0.4 x (1-0.7)
> ao = 0.82

**Am I applying the theory correctly up to this point? How to continue to find the screenshot result?**

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7946 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 24 October 2022 06:41:14 UTC