Title: [126084] trunk
- Revision
- 126084
- Author
- k...@webkit.org
- Date
- 2012-08-20 16:07:21 -0700 (Mon, 20 Aug 2012)
Log Message
CSS Masking and CSS Filters applied in wrong order
https://bugs.webkit.org/show_bug.cgi?id=94354
Reviewed by Dean Jackson.
Source/WebCore:
According to the Filter Effects spec, the order should be first filters, then masking and clipping.
Changed the order on applying the different effects in RenderLayer.
Test: css3/filters/filter-mask-clip-order.html
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::paintLayerContents): First filter, then mask and clip the content.
LayoutTests:
The test checks the correct order on applying CSS Masking, Filter Effects and CSS Clipping.
According to the Filter Effects spec, the order should be first filters, then masking and clipping.
* css3/filters/filter-mask-clip-order-expected.html: Added.
* css3/filters/filter-mask-clip-order.html: Added.
* css3/filters/resources/mask.png: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (126083 => 126084)
--- trunk/LayoutTests/ChangeLog 2012-08-20 22:42:35 UTC (rev 126083)
+++ trunk/LayoutTests/ChangeLog 2012-08-20 23:07:21 UTC (rev 126084)
@@ -1,3 +1,17 @@
+2012-08-20 Dirk Schulze <k...@webkit.org>
+
+ CSS Masking and CSS Filters applied in wrong order
+ https://bugs.webkit.org/show_bug.cgi?id=94354
+
+ Reviewed by Dean Jackson.
+
+ The test checks the correct order on applying CSS Masking, Filter Effects and CSS Clipping.
+ According to the Filter Effects spec, the order should be first filters, then masking and clipping.
+
+ * css3/filters/filter-mask-clip-order-expected.html: Added.
+ * css3/filters/filter-mask-clip-order.html: Added.
+ * css3/filters/resources/mask.png: Added.
+
2012-08-20 Adam Klein <ad...@chromium.org>
Remove redundant TOUCH_LISTENER event type
Added: trunk/LayoutTests/css3/filters/filter-mask-clip-order-expected.html (0 => 126084)
--- trunk/LayoutTests/css3/filters/filter-mask-clip-order-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/filter-mask-clip-order-expected.html 2012-08-20 23:07:21 UTC (rev 126084)
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title></title>
+</head>
+<body>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/filters/filter-mask-clip-order.html (0 => 126084)
--- trunk/LayoutTests/css3/filters/filter-mask-clip-order.html (rev 0)
+++ trunk/LayoutTests/css3/filters/filter-mask-clip-order.html 2012-08-20 23:07:21 UTC (rev 126084)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title></title>
+ <script>
+
+ </script>
+ <style>
+ /* 'mask-image-slice' without 'fill' clips inner content area away.
+ 'clip' clips evyerthing outside of rect() away.
+ If filter wouldn't be applyed first in the chain, you either see
+ blured background in the 'fill' area, or outsite the 'clip' area. */
+ div {
+ width: 350px;
+ height: 350px;
+ background-color: red;
+ position: absolute;
+ -webkit-mask-box-image-slice: 75;
+ -webkit-mask-box-image-repeat: stretch;
+ -webkit-mask-box-image-source: url(resources/mask.png);
+ clip: rect(76px, 274px, 274px, 76px);
+ -webkit-filter: blur(20px);
+ }
+ </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/filters/resources/mask.png (0 => 126084)
--- trunk/LayoutTests/css3/filters/resources/mask.png (rev 0)
+++ trunk/LayoutTests/css3/filters/resources/mask.png 2012-08-20 23:07:21 UTC (rev 126084)
@@ -0,0 +1,80 @@
+\x89PNG
+
+
+IHDR \xA5 \xA3 \xEBr\xDE\xC7 KiCCPICC Profile x\x9C\x95Wy4\xD5\xDD\xD7\xDF\xDF{\xAF{\x8D\xD7<O\xD7%\x99\xC7W2\xCF"\xE1\xBA\xE6\xB9{\xCD!\xF1\xA4\xCCC4Ȑ\xA9\x90")\x89
+IR\xC64H\xA2\x92T\xC8\x99\xC2}\xFF\xA0\x9Ew\xBD\xCF\xFA\xAD\xDFz\xF7g}\xCE\xE7\xEC}\xF6\xE7\xECs\xD6:k\xB0\x91BCQ F\xB19\xA0O8\xE4\xE4L\xC0\xBD40'\x80\x89D\xA6\x86\xEAYY\x99\xC1\xB4\xA5\x97\x80 <\x97'\x85\x86\x9Bt \xC0\xE5,\xB9p̟6\xF8\xCFq \x80\xA7rr@\xE4 \x80\xCBg\xEF .\x8F-l \\x91a\xA1a \x88/ p\x91}I\x9E H, \xC8Q\xECl \x90* \xC0\xFBl\xE1; \x80\xF7\xD8\xC2\xDD \x80\x8F \xFB\x84 \xAF\xB0\xC1\x9E~\xC1 \xB8 \xAC\x8E\xA7\x95\x80\x97 OO*9 \x9F
+\x80\xD2
+
+\xF1` \x80\x9D\xE4PJ \xDB
+ Hrr&lIv\x8FPg\xA0k\xFD\x87\xA1 Ի\xA5\xFC\xC3IM\xF0\xD4ԏ\xFF\xC3-\xD8 O?\xD5{\x9F"