w3c / fxtf-drafts

Mirror of https://hg.fxtf.org/drafts
https://drafts.fxtf.org/
Other
68 stars 49 forks source link

[compositing] mix blend mode does not work in the following configuration, I would like to understand why #518

Open letochagone opened 1 year ago

letochagone commented 1 year ago

in the following example I apply the mix-blend-mode but it gives no effect The color of the second div on the first is the same as if we remove the mix-blend-mode property from the div between the two.

========= Cs ( source color)
========= mix-blend-mode
========= Cb( destination color 

WITH MIX BLEND MODE

#Cb  {
  width: 100px;
  height: 100px;
  background-color: rgba(0,250,0,1);
}
#blending {
  width:100px;
  height:100px;
  mix-blend-mode:screen;
  margin-top:-54px;
  margin-left:24px;
}
#Cs {
  width: 100px;
  height: 100px; 
  margin-top:-74px;
  margin-left:54px;
  background-color: rgba(0,0,155,0.7);
}
<div id="Cb"></div>

<div id="blending"></div>

<div id="Cs"></div>

image

WITHOUT MIX BLEND MODE

#Cb  {
  width: 100px;
  height: 100px;
  background-color: rgba(0,250,0,1);
}
#blending {
  width:100px;
  height:100px;
  ___mix-blend-mode:screen;
  margin-top:-54px;
  margin-left:24px;
}
#Cs {
  width: 100px;
  height: 100px; 
  margin-top:-74px;
  margin-left:54px;
  background-color: rgba(0,0,155,0.7);
}
<div id="Cb"></div>

<div id="blending"></div>

<div id="Cs"></div>

image

The result is the same. It's certainly obvious that I misinterpret this property but I can't find where my mistake is