[blending] mathematical rules for background-blend-mode

[letochagone]

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);

now I read the color obtained with a color picker :

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...) ?

[letochagone]

after several hours of intensive calculations ^_^, I realize that I made a mistake

B(Cb,Cs) = (1,1,0.4) Cs is now : Cs = (1-ab) Cs + ab B(Cb,Cs) Cs = (0.4 , 1 , 0.52)

simple alpha compositing : ao Co =as Cs + ab Cb (1-as) ao Co = 0.7 (0.4 , 1 , 0.52) + 0.4 ( 1 , 0 , 0.2) 0.3 ao * Co = (0.4 , 0.7 , 0.388)

Is there anyone to tell me if my calculations are correct or completely wrong? ....