[compositing] blending calculations

[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:

here is an example, the color obtained almost corresponds to the theory except for the G value. As my calculated G value exceeds 1 maybe the problem comes from there.

<div 
  style="
  width: 150px;
  height: 150px;
  background-color: rgba(255, 0, 0, 0.4);">
  <div
    style="
    width: 100px;
    height: 100px;
    mix-blend-mode: difference;
    background-color:rgba(0,255,0,0.7);" >
  </div>
</div>

I apply the theory explained here: https://drafts.fxtf.org/compositing/#blending

Cb = ( 1 , 0 , 0 ) ab = 0.4 Cs = (0 , 1 , 0 ) as =0.7 Cm = | Cb - Cs | = ( 1 , 1 , 0 )

Cr = ( 1 - ab ) Cs + ab B(Cb,Cs) Cr = ( 1 - ab ) Cs + ab Cm Cr = ( 1 - ab ) Cs + ab ( 1 , 1 , 0 ) Cr = ( 1 - 0.4 ) ( 0 , 1 , 0 ) + 0.4 ( 1 , 1 , 0 ) Cr = ( 0.4 , 1 , 0) ao = as + ab ( 1- as) ao = 0.7 + 0.4 ( 1 - 0.7) = 0.82

here is the color obtained after applying the mix-blend-mode rgb = (0.4 , 1 , 0) alpha= 0.82

now I compose this color with the color of the html page (white color)

(0.4 , 1 , 0) + ( 1 , 1 , 1 ) * ( 1 - 0.82 ) = ( 0.58 , 1.18 , 0.180) = ( 0.58 , 1 , 0.18 )

however, the color obtained differs :

148/255 = 0.58 225/255 = 0.88 48/255 = 0.188

Why ? thank you for your explanations