[fxtf-drafts] [blending] mathematical rules for background-blend-mode (#479)

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

== [blending] mathematical rules for background-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  (102/255 , 179/255 , 99/255) = (0.4 , 0.7 , 0.388...)   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)   ....  I'm not sure at all
> 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 :
 (102/255 , 179/255 , 99/255) = (0.4 , 0.7 , 0.388...)  ?**

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


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

Received on Wednesday, 16 November 2022 18:23:50 UTC