CSS filters which reference SVG filters fail to respect the "color-interpolation...
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 8 May 2018 01:34:34 +0000 (01:34 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 8 May 2018 01:34:34 +0000 (01:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=185343

Reviewed by Dean Jackson.

Source/WebCore:

Test: css3/filters/color-interpolation-filters.html

When applying CSS reference filters, apply the value of "color-interpolation-filters" for the
referenced filter effect element, just as we do for SVG filters.

* rendering/FilterEffectRenderer.cpp:
(WebCore::FilterEffectRenderer::buildReferenceFilter):

LayoutTests:

* css3/filters/color-interpolation-filters-expected.html: Added.
* css3/filters/color-interpolation-filters.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@231473 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/filters/color-interpolation-filters-expected.html [new file with mode: 0644]
LayoutTests/css3/filters/color-interpolation-filters.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/FilterEffectRenderer.cpp

index 1750ccd..c48f46b 100644 (file)
@@ -1,3 +1,13 @@
+2018-05-07  Simon Fraser  <simon.fraser@apple.com>
+
+        CSS filters which reference SVG filters fail to respect the "color-interpolation-filters" of the filter
+        https://bugs.webkit.org/show_bug.cgi?id=185343
+
+        Reviewed by Dean Jackson.
+
+        * css3/filters/color-interpolation-filters-expected.html: Added.
+        * css3/filters/color-interpolation-filters.html: Added.
+
 2018-05-07  Ryan Haddad  <ryanhaddad@apple.com>
 
         Update TestExpectations for imported/w3c/web-platform-tests/html/dom/interfaces.worker.html.
 2018-05-07  Ryan Haddad  <ryanhaddad@apple.com>
 
         Update TestExpectations for imported/w3c/web-platform-tests/html/dom/interfaces.worker.html.
diff --git a/LayoutTests/css3/filters/color-interpolation-filters-expected.html b/LayoutTests/css3/filters/color-interpolation-filters-expected.html
new file mode 100644 (file)
index 0000000..824522e
--- /dev/null
@@ -0,0 +1,52 @@
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .box {
+            width: 200px;
+            height: 200px;
+            background-color: white;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <svg width="800" height="480">
+        <defs>
+            <filter id="test-linear" color-interpolation-filters="linearRGB">
+                <feComponentTransfer>
+                    <feFuncR type="table" tableValues="0.8 0.2"/>
+                    <feFuncG type="table" tableValues="0.8 0.2"/>
+                    <feFuncB type="table" tableValues="0.8 0.2"/>
+                </feComponentTransfer>
+                <feColorMatrix type="hueRotate" values="180"/>
+            </filter>
+
+            <filter id="test-srgb" color-interpolation-filters="sRGB">
+                <feComponentTransfer>
+                    <feFuncR type="table" tableValues="0.8 0.2"/>
+                    <feFuncG type="table" tableValues="0.8 0.2"/>
+                    <feFuncB type="table" tableValues="0.8 0.2"/>
+                </feComponentTransfer>
+                <feColorMatrix type="hueRotate" values="180"/>
+            </filter>
+
+            <filter id="test-default">
+                <feComponentTransfer>
+                    <feFuncR type="table" tableValues="0.8 0.2"/>
+                    <feFuncG type="table" tableValues="0.8 0.2"/>
+                    <feFuncB type="table" tableValues="0.8 0.2"/>
+                </feComponentTransfer>
+                <feColorMatrix type="hueRotate" values="180"/>
+            </filter>
+        </defs>
+        <rect filter="url(#test-linear)" x="10" y="10" width="200" height="200" fill="white"/>
+        <rect filter="url(#test-srgb)" x="230" y="10" width="200" height="200" fill="white"/>
+        <rect filter="url(#test-default)" x="450" y="10" width="200" height="200" fill="white"/>
+
+        <rect filter="url(#test-linear)" x="10" y="250" width="200" height="200" fill="white"/>
+        <rect filter="url(#test-srgb)" x="230" y="250" width="200" height="200" fill="white"/>
+        <rect filter="url(#test-default)" x="450" y="250" width="200" height="200" fill="white"/>
+    </svg>
+</body>
diff --git a/LayoutTests/css3/filters/color-interpolation-filters.html b/LayoutTests/css3/filters/color-interpolation-filters.html
new file mode 100644 (file)
index 0000000..98ef93d
--- /dev/null
@@ -0,0 +1,56 @@
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .box {
+            width: 200px;
+            height: 200px;
+            background-color: white;
+            float: left;
+        }
+        .container > div {
+            margin: 10px;
+        }
+    </style>
+</head>
+<body>
+    <svg width="800" height="240">
+        <defs>
+            <filter id="test-linear" color-interpolation-filters="linearRGB">
+                <feComponentTransfer>
+                    <feFuncR type="table" tableValues="0.8 0.2"/>
+                    <feFuncG type="table" tableValues="0.8 0.2"/>
+                    <feFuncB type="table" tableValues="0.8 0.2"/>
+                </feComponentTransfer>
+                <feColorMatrix type="hueRotate" values="180"/>
+            </filter>
+
+            <filter id="test-srgb" color-interpolation-filters="sRGB">
+                <feComponentTransfer>
+                    <feFuncR type="table" tableValues="0.8 0.2"/>
+                    <feFuncG type="table" tableValues="0.8 0.2"/>
+                    <feFuncB type="table" tableValues="0.8 0.2"/>
+                </feComponentTransfer>
+                <feColorMatrix type="hueRotate" values="180"/>
+            </filter>
+
+            <filter id="test-default">
+                <feComponentTransfer>
+                    <feFuncR type="table" tableValues="0.8 0.2"/>
+                    <feFuncG type="table" tableValues="0.8 0.2"/>
+                    <feFuncB type="table" tableValues="0.8 0.2"/>
+                </feComponentTransfer>
+                <feColorMatrix type="hueRotate" values="180"/>
+            </filter>
+        </defs>
+        <rect filter="url(#test-linear)" x="10" y="10" width="200" height="200" fill="white"/>
+        <rect filter="url(#test-srgb)" x="230" y="10" width="200" height="200" fill="white"/>
+        <rect filter="url(#test-default)" x="450" y="10" width="200" height="200" fill="white"/>
+    </svg>
+    <div class="container">
+        <div class="box" style="filter: url(#test-linear)"></div>
+        <div class="box" style="filter: url(#test-srgb)"></div>
+        <div class="box" style="filter: url(#test-default)"></div>
+    </div>
+</body>
index 54339d5..0605d3d 100644 (file)
@@ -1,3 +1,18 @@
+2018-05-07  Simon Fraser  <simon.fraser@apple.com>
+
+        CSS filters which reference SVG filters fail to respect the "color-interpolation-filters" of the filter
+        https://bugs.webkit.org/show_bug.cgi?id=185343
+
+        Reviewed by Dean Jackson.
+
+        Test: css3/filters/color-interpolation-filters.html
+        
+        When applying CSS reference filters, apply the value of "color-interpolation-filters" for the
+        referenced filter effect element, just as we do for SVG filters.
+
+        * rendering/FilterEffectRenderer.cpp:
+        (WebCore::FilterEffectRenderer::buildReferenceFilter):
+
 2018-05-07  Daniel Bates  <dabates@apple.com>
 
         CSP status-code incorrect for document blocked due to violation of its frame-ancestors directive
 2018-05-07  Daniel Bates  <dabates@apple.com>
 
         CSP status-code incorrect for document blocked due to violation of its frame-ancestors directive
index 48dde9c..a5d51ea 100644 (file)
@@ -117,6 +117,9 @@ RefPtr<FilterEffect> FilterEffectRenderer::buildReferenceFilter(RenderElement& r
             continue;
 
         effectElement.setStandardAttributes(effect.get());
             continue;
 
         effectElement.setStandardAttributes(effect.get());
+        if (effectElement.renderer())
+            effect->setOperatingColorSpace(effectElement.renderer()->style().svgStyle().colorInterpolationFilters() == CI_LINEARRGB ? ColorSpaceLinearRGB : ColorSpaceSRGB);
+
         builder->add(effectElement.result(), effect);
         m_effects.append(*effect);
     }
         builder->add(effectElement.result(), effect);
         m_effects.append(*effect);
     }