Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-30 08:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Implement mix-blend-mode per COMPOSITING § 3.4.1.

Browse source 
`background-blend-mode` is not yet supported because we don't support
multiple backgrounds yet.
This commit is contained in:
Patrick Walton 2015-01-08 13:53:17 -08:00
parent 3897547bc2
commit 97d3443003
10 changed files with 181 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/ref/basic.list
View file

@ -228,3 +228,4 @@ fragment=top != ../html/acid2.html acid2_ref.html
== outline_offset_a.html outline_offset_ref.html
== filter_opacity_a.html filter_opacity_ref.html
== filter_sepia_a.html filter_sepia_ref.html
== mix_blend_mode_a.html mix_blend_mode_ref.html

53
tests/ref/mix_blend_mode_a.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: #ffffff;
}
section {
position: absolute;
left: 0;
}
#a {
top: 0;
mix-blend-mode: difference;
}
#b {
top: 100px;
mix-blend-mode: exclusion;
}
div {
position: absolute;
top: 0;
width: 100px;
height: 100px;
}
.red {
left: 0;
background-color: #ff0000;
}
.green {
left: 100px;
background: #00ff00;
}
.blue {
left: 200px;
background: #0000ff;
}
</style>
</head>
<body>
<section id=a>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
<section id=b>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
</body>
</html>

52
tests/ref/mix_blend_mode_ref.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: #ffffff;
}
section {
position: absolute;
left: 0;
}
#a {
top: 0;
}
#b {
top: 100px;
}
div {
position: absolute;
top: 0;
width: 100px;
height: 100px;
}
.red {
left: 0;
background-color: #00ffff;
}
.green {
left: 100px;
background: #ff00ff;
}
.blue {
left: 200px;
background: #ffff00;
}
</style>
</head>
<body>
<section id=a>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
<section id=b>
<div class=red></div>
<div class=green></div>
<div class=blue></div>
</section>
</body>
</html>