layout: Implement filter per CSS-FILTERS § 5.

`blur` and `drop-shadow` are not yet supported, because the
`text-shadow` PR makes some fundamental changes to blur rendering that
are needed first.
This commit is contained in:
Patrick Walton 2015-01-05 19:22:02 -08:00
parent 6b3c05cdd2
commit 15d60d7ea4
20 changed files with 499 additions and 62 deletions

View file

@ -226,3 +226,5 @@ fragment=top != ../html/acid2.html acid2_ref.html
== stacking_context_overflow_relative_outline_a.html stacking_context_overflow_relative_outline_ref.html
== word_break_a.html word_break_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

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<style>
img {
filter: opacity(0.5);
display: block;
}
</style>
</head>
<body>
<img src=test.jpeg>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
display: block;
}
</style>
</head>
<body>
<img src=test.jpeg>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style>
section {
filter: sepia(100%);
display: block;
width: 100px;
height: 100px;
background: #ff00ff;
}
</style>
</head>
<body>
<section></section>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: block;
width: 100px;
height: 100px;
background: #938567;
}
</style>
</head>
<body>
<section></section>
</body>
</html>