- Revision
- 266740
- Author
- [email protected]
- Date
- 2020-09-08 12:25:13 -0700 (Tue, 08 Sep 2020)
Log Message
CoreImage Implementation of CSS Filters invert(), opacity(), brightness(), contrast()
https://bugs.webkit.org/show_bug.cgi?id=215956
Patch by Frank Yang <[email protected]> on 2020-09-08
Reviewed by Darin Adler.
Source/WebCore:
Adding CoreImage support for 4 more CSS filters, invert, opacity, brightness, contrast,
which all uses FEComponentTransfer and the linear transfer function. Partially implemented
FEComponentTransfer to support linear function type so that the 4 CSS filters work properly
Tests: css3/filters/effect-brightness-square.html
css3/filters/effect-contrast-square.html
css3/filters/effect-invert-square.html
css3/filters/effect-opacity-square.html
* platform/graphics/coreimage/FilterEffectRendererCoreImage.h:
* platform/graphics/coreimage/FilterEffectRendererCoreImage.mm:
(WebCore::FilterEffectRendererCoreImage::isNullOrLinearComponentTransferFunction):
currently CoreImage can only render FEComponentTransfer filters if the transfer funtion
is only linear. A FEComponentTransfer filter using only linear function would have it's
red, green, blue, alpha functions types either be linear or null.
(WebCore::FilterEffectRendererCoreImage::supportsCoreImageRendering):
currently CoreImage can only render FEComponentTransfer filters if the transfer funtion
is only linear.
(WebCore::FilterEffectRendererCoreImage::connectCIFilters):
now returns image for FEComponentTransfer
(WebCore::FilterEffectRendererCoreImage::imageForFEComponentTransfer):
function that uses CIFilters to render FEComponentTransfer.
* platform/graphics/filters/FEComponentTransfer.h:
(isType): added SPECIALIZE_TYPE_TRAITS so that we can downcast to FEComponentTransfer
LayoutTests:
* css3/filters/effect-brightness-square-expected.html: Added.
* css3/filters/effect-brightness-square.html: Added.
* css3/filters/effect-contrast-square-expected.html: Added.
* css3/filters/effect-contrast-square.html: Added.
* css3/filters/effect-invert-square-expected.html: Added.
* css3/filters/effect-invert-square.html: Added.
* css3/filters/effect-opacity-square-expected.html: Added.
* css3/filters/effect-opacity-square.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (266739 => 266740)
--- trunk/LayoutTests/ChangeLog 2020-09-08 19:22:49 UTC (rev 266739)
+++ trunk/LayoutTests/ChangeLog 2020-09-08 19:25:13 UTC (rev 266740)
@@ -1,3 +1,19 @@
+2020-09-08 Frank Yang <[email protected]>
+
+ CoreImage Implementation of CSS Filters invert(), opacity(), brightness(), contrast()
+ https://bugs.webkit.org/show_bug.cgi?id=215956
+
+ Reviewed by Darin Adler.
+
+ * css3/filters/effect-brightness-square-expected.html: Added.
+ * css3/filters/effect-brightness-square.html: Added.
+ * css3/filters/effect-contrast-square-expected.html: Added.
+ * css3/filters/effect-contrast-square.html: Added.
+ * css3/filters/effect-invert-square-expected.html: Added.
+ * css3/filters/effect-invert-square.html: Added.
+ * css3/filters/effect-opacity-square-expected.html: Added.
+ * css3/filters/effect-opacity-square.html: Added.
+
2020-09-08 Aditya Keerthi <[email protected]>
[macOS] Date/time inputs should preserve focus on value change
Added: trunk/LayoutTests/css3/filters/effect-brightness-square-expected.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-brightness-square-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-brightness-square-expected.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: rgb(127, 0, 0 );
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see a dark red rectangle.</p>
+ <div></div>
+
+</body>
+</html>
Added: trunk/LayoutTests/css3/filters/effect-brightness-square.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-brightness-square.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-brightness-square.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: red;
+ filter: brightness(50%);
+ position: absolute;
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see a dark red rectangle.</p>
+ <div></div>
+
+</body>
+</html>
Added: trunk/LayoutTests/css3/filters/effect-contrast-square-expected.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-contrast-square-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-contrast-square-expected.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: rgb(255, 0, 0);
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see a gray rectangle.</p>
+ <div></div>
+
+</body>
+</html>
Added: trunk/LayoutTests/css3/filters/effect-contrast-square.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-contrast-square.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-contrast-square.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: rgb(255, 0, 0);
+ filter: contrast(100%);
+ position: absolute;
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see a gray rectangle.</p>
+ <div></div>
+
+</body>
+</html>
Added: trunk/LayoutTests/css3/filters/effect-invert-square-expected.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-invert-square-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-invert-square-expected.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: rgb(0, 255, 255);
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see a cyan rectangle.</p>
+ <div></div>
+
+</body>
+</html>
Added: trunk/LayoutTests/css3/filters/effect-invert-square.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-invert-square.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-invert-square.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: red;
+ filter: invert(100%);
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see a cyan rectangle.</p>
+ <div></div>
+
+</body>
+</html>
Added: trunk/LayoutTests/css3/filters/effect-opacity-square-expected.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-opacity-square-expected.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-opacity-square-expected.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: rgba(255, 0, 0, 0);
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see no square.</p>
+ <div></div>
+
+</body>
+</html>
Added: trunk/LayoutTests/css3/filters/effect-opacity-square.html (0 => 266740)
--- trunk/LayoutTests/css3/filters/effect-opacity-square.html (rev 0)
+++ trunk/LayoutTests/css3/filters/effect-opacity-square.html 2020-09-08 19:25:13 UTC (rev 266740)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filter Test: Test for Saturate short hand</title>
+ <style type="text/css">
+ div {
+ width: 500px;
+ height: 500px;
+ background: red;
+ filter: opacity(0);
+ position: absolute;
+ }
+
+ </style>
+</head>
+<body>
+ <p>You should see no square.</p>
+ <div></div>
+
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (266739 => 266740)
--- trunk/Source/WebCore/ChangeLog 2020-09-08 19:22:49 UTC (rev 266739)
+++ trunk/Source/WebCore/ChangeLog 2020-09-08 19:25:13 UTC (rev 266740)
@@ -1,3 +1,36 @@
+2020-09-08 Frank Yang <[email protected]>
+
+ CoreImage Implementation of CSS Filters invert(), opacity(), brightness(), contrast()
+ https://bugs.webkit.org/show_bug.cgi?id=215956
+
+ Reviewed by Darin Adler.
+
+ Adding CoreImage support for 4 more CSS filters, invert, opacity, brightness, contrast,
+ which all uses FEComponentTransfer and the linear transfer function. Partially implemented
+ FEComponentTransfer to support linear function type so that the 4 CSS filters work properly
+
+ Tests: css3/filters/effect-brightness-square.html
+ css3/filters/effect-contrast-square.html
+ css3/filters/effect-invert-square.html
+ css3/filters/effect-opacity-square.html
+
+ * platform/graphics/coreimage/FilterEffectRendererCoreImage.h:
+ * platform/graphics/coreimage/FilterEffectRendererCoreImage.mm:
+ (WebCore::FilterEffectRendererCoreImage::isNullOrLinearComponentTransferFunction):
+ currently CoreImage can only render FEComponentTransfer filters if the transfer funtion
+ is only linear. A FEComponentTransfer filter using only linear function would have it's
+ red, green, blue, alpha functions types either be linear or null.
+ (WebCore::FilterEffectRendererCoreImage::supportsCoreImageRendering):
+ currently CoreImage can only render FEComponentTransfer filters if the transfer funtion
+ is only linear.
+ (WebCore::FilterEffectRendererCoreImage::connectCIFilters):
+ now returns image for FEComponentTransfer
+ (WebCore::FilterEffectRendererCoreImage::imageForFEComponentTransfer):
+ function that uses CIFilters to render FEComponentTransfer.
+ * platform/graphics/filters/FEComponentTransfer.h:
+ (isType): added SPECIALIZE_TYPE_TRAITS so that we can downcast to FEComponentTransfer
+
+
2020-09-08 Aditya Keerthi <[email protected]>
[macOS] Date/time inputs should preserve focus on value change
Modified: trunk/Source/WebCore/platform/graphics/coreimage/FilterEffectRendererCoreImage.h (266739 => 266740)
--- trunk/Source/WebCore/platform/graphics/coreimage/FilterEffectRendererCoreImage.h 2020-09-08 19:22:49 UTC (rev 266739)
+++ trunk/Source/WebCore/platform/graphics/coreimage/FilterEffectRendererCoreImage.h 2020-09-08 19:25:13 UTC (rev 266740)
@@ -27,9 +27,7 @@
#if USE(CORE_IMAGE)
-#import "FEColorMatrix.h"
#import "FilterEffectRenderer.h"
-#import "SourceGraphic.h"
#import <wtf/HashMap.h>
#import <wtf/Vector.h>
@@ -39,6 +37,10 @@
namespace WebCore {
+class FEColorMatrix;
+class FEComponentTransfer;
+class SourceGraphic;
+
class FilterEffectRendererCoreImage : public FilterEffectRenderer {
WTF_MAKE_FAST_ALLOCATED;
@@ -60,6 +62,7 @@
RetainPtr<CIImage> imageForSourceGraphic(SourceGraphic&);
RetainPtr<CIImage> imageForFEColorMatrix(const FEColorMatrix&, const Vector<RetainPtr<CIImage>>&);
+ RetainPtr<CIImage> imageForFEComponentTransfer(const FEComponentTransfer&, Vector<RetainPtr<CIImage>>&);
std::unique_ptr<ImageBuffer> m_outputImageBuffer;
RetainPtr<CIImage> m_outputImage;
Modified: trunk/Source/WebCore/platform/graphics/coreimage/FilterEffectRendererCoreImage.mm (266739 => 266740)
--- trunk/Source/WebCore/platform/graphics/coreimage/FilterEffectRendererCoreImage.mm 2020-09-08 19:22:49 UTC (rev 266739)
+++ trunk/Source/WebCore/platform/graphics/coreimage/FilterEffectRendererCoreImage.mm 2020-09-08 19:25:13 UTC (rev 266740)
@@ -28,12 +28,16 @@
#if USE(CORE_IMAGE)
+#import "FEColorMatrix.h"
+#import "FEComponentTransfer.h"
#import "Filter.h"
#import "FilterEffect.h"
#import "FilterOperation.h"
+#import "FloatConversion.h"
#import "GraphicsContextCG.h"
#import "ImageBuffer.h"
#import "PlatformImageBuffer.h"
+#import "SourceGraphic.h"
#import <CoreImage/CIContext.h>
#import <CoreImage/CIFilter.h>
#import <CoreImage/CoreImage.h>
@@ -54,6 +58,16 @@
return ciContext;
}
+static bool isNullOrLinearComponentTransferFunction(const FEComponentTransfer& effect)
+{
+ auto isNullOrLinear = [] (const ComponentTransferFunction& function) {
+ return function.type == FECOMPONENTTRANSFER_TYPE_UNKNOWN
+ || function.type == FECOMPONENTTRANSFER_TYPE_LINEAR;
+ };
+ return isNullOrLinear(effect.redFunction()) && isNullOrLinear(effect.greenFunction())
+ && isNullOrLinear(effect.blueFunction()) && isNullOrLinear(effect.alphaFunction());
+}
+
bool FilterEffectRendererCoreImage::supportsCoreImageRendering(FilterEffect& effect)
{
// FIXME: change return value to true once they are implemented
@@ -73,8 +87,10 @@
}
}
+ case FilterEffect::Type::ComponentTransfer:
+ return isNullOrLinearComponentTransferFunction(downcast<FEComponentTransfer>(effect));
+
case FilterEffect::Type::Blend:
- case FilterEffect::Type::ComponentTransfer:
case FilterEffect::Type::Composite:
case FilterEffect::Type::ConvolveMatrix:
case FilterEffect::Type::DiffuseLighting:
@@ -125,10 +141,11 @@
return imageForSourceGraphic(downcast<SourceGraphic>(effect));
case FilterEffect::Type::ColorMatrix:
return imageForFEColorMatrix(downcast<FEColorMatrix>(effect), inputImages);
+ case FilterEffect::Type::ComponentTransfer:
+ return imageForFEComponentTransfer(downcast<FEComponentTransfer>(effect), inputImages);
// FIXME: Implement those filters using CIFilter so that the function returns a valid CIImage
case FilterEffect::Type::Blend:
- case FilterEffect::Type::ComponentTransfer:
case FilterEffect::Type::Composite:
case FilterEffect::Type::ConvolveMatrix:
case FilterEffect::Type::DiffuseLighting:
@@ -215,6 +232,28 @@
return colorMatrixFilter.outputImage;
}
+RetainPtr<CIImage> FilterEffectRendererCoreImage::imageForFEComponentTransfer(const FEComponentTransfer& effect, Vector<RetainPtr<CIImage>>& inputImages)
+{
+ // FIXME: Implement the rest of FEComponentTransfer functions
+ ASSERT(isNullOrLinearComponentTransferFunction(effect));
+
+ auto inputImage = inputImages.at(0);
+ auto filter = [CIFilter filterWithName:@"CIColorPolynomial"];
+
+ [filter setValue:inputImage.get() forKey:kCIInputImageKey];
+
+ auto setCoefficients = [&] (NSString *key, const ComponentTransferFunction& function) {
+ if (function.type == FECOMPONENTTRANSFER_TYPE_LINEAR)
+ [filter setValue:[CIVector vectorWithX:function.intercept Y:function.slope Z:0 W:0] forKey:key];
+ };
+ setCoefficients(@"inputRedCoefficients", effect.redFunction());
+ setCoefficients(@"inputGreenCoefficients", effect.greenFunction());
+ setCoefficients(@"inputBlueCoefficients", effect.blueFunction());
+ setCoefficients(@"inputAlphaCoefficients", effect.alphaFunction());
+
+ return filter.outputImage;
+}
+
bool FilterEffectRendererCoreImage::canRenderUsingCIFilters(FilterEffect& effect)
{
if (!supportsCoreImageRendering(effect))
Modified: trunk/Source/WebCore/platform/graphics/filters/FEComponentTransfer.h (266739 => 266740)
--- trunk/Source/WebCore/platform/graphics/filters/FEComponentTransfer.h 2020-09-08 19:22:49 UTC (rev 266739)
+++ trunk/Source/WebCore/platform/graphics/filters/FEComponentTransfer.h 2020-09-08 19:25:13 UTC (rev 266740)
@@ -89,3 +89,6 @@
} // namespace WebCore
+SPECIALIZE_TYPE_TRAITS_BEGIN(WebCore::FEComponentTransfer)
+ static bool isType(const WebCore::FilterEffect& effect) { return effect.filterEffectClassType() == WebCore::FilterEffect::Type::ComponentTransfer; }
+SPECIALIZE_TYPE_TRAITS_END()
