Implement rendering support for the color-filter CSS property
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 27 Apr 2018 00:10:48 +0000 (00:10 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 27 Apr 2018 00:10:48 +0000 (00:10 +0000)
commit4cd703629947e024e18e5bfff14496c21cacaa9d
treed20c879e2552a98c9a79e98badd8f0935c673856
parent410ebd4d53d3a6b5722fd1debc39bc1eb031bbba
Implement rendering support for the color-filter CSS property
https://bugs.webkit.org/show_bug.cgi?id=185047
rdar://problem/39664967

Reviewed by Tim Horton.

Source/WebCore:

The color-filter property transforms CSS colors just before painting. To support this,
add to RenderStyle colorByApplyingColorFilter() and visitedDependentColorWithColorFilter().
At most calls sites that transform colors for rendering, replace calls to
visitedDependentColor() with visitedDependentColorWithColorFilter(). The few locations
that don't use visitedDependentColor() (e.g. for shadows) call colorByApplyingColorFilter().

Color transformation is implemented via a new virtual function on FilterOperation;
BasicColorMatrixFilterOperation overrides this to use a new ColorMatrix class to
do color math, and BasicComponentTransferFilterOperation to do the equivalent of component
transfer operations. The math in both cases matches that for SVG filters, with the exception
that color components are stored as floats through multiple filters and then mapped to
normal 0-255 color components at the end.

Tests: css3/color-filters/color-filter-backgrounds-borders.html
       css3/color-filters/color-filter-box-shadow.html
       css3/color-filters/color-filter-brightness.html
       css3/color-filters/color-filter-color-property-list-item.html
       css3/color-filters/color-filter-color-property.html
       css3/color-filters/color-filter-color-text-decorations.html
       css3/color-filters/color-filter-column-rule.html
       css3/color-filters/color-filter-contrast.html
       css3/color-filters/color-filter-current-color.html
       css3/color-filters/color-filter-filter-list.html
       css3/color-filters/color-filter-grayscale.html
       css3/color-filters/color-filter-hue-rotate.html
       css3/color-filters/color-filter-inherits.html
       css3/color-filters/color-filter-invert.html
       css3/color-filters/color-filter-opacity.html
       css3/color-filters/color-filter-outline.html
       css3/color-filters/color-filter-saturate.html
       css3/color-filters/color-filter-sepia.html
       css3/color-filters/color-filter-text-emphasis.html

* html/HTMLTextFormControlElement.cpp:
(WebCore::HTMLTextFormControlElement::adjustInnerTextStyle const):
* page/FrameView.cpp:
(WebCore::FrameView::documentBackgroundColor const):
* platform/graphics/ColorUtilities.cpp:
(WebCore::ColorMatrix::ColorMatrix):
(WebCore::ColorMatrix::makeIdentity):
(WebCore::ColorMatrix::grayscaleMatrix):
(WebCore::ColorMatrix::saturationMatrix):
(WebCore::ColorMatrix::hueRotateMatrix):
(WebCore::ColorMatrix::sepiaMatrix):
(WebCore::ColorMatrix::transformColorComponents const):
* platform/graphics/ColorUtilities.h:
* platform/graphics/filters/FilterOperation.cpp:
(WebCore::BasicColorMatrixFilterOperation::transformColor const):
(WebCore::BasicComponentTransferFilterOperation::transformColor const):
* platform/graphics/filters/FilterOperation.h:
(WebCore::FilterOperation::transformColor const):
* platform/graphics/filters/FilterOperations.cpp:
(WebCore::FilterOperations::transformColor const):
* platform/graphics/filters/FilterOperations.h:
* rendering/BorderEdge.cpp:
(WebCore::BorderEdge::getBorderEdgeInfo):
* rendering/EllipsisBox.cpp:
(WebCore::EllipsisBox::paint):
(WebCore::EllipsisBox::paintSelection):
* rendering/InlineFlowBox.cpp:
(WebCore::InlineFlowBox::paintBoxDecorations):
* rendering/InlineTextBox.cpp:
(WebCore::InlineTextBox::paintMarkedTextForeground):
(WebCore::InlineTextBox::paintMarkedTextDecoration):
(WebCore::InlineTextBox::paintCompositionUnderline const):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::paintRootBoxFillLayers):
(WebCore::RenderBox::paintBackground):
(WebCore::RenderBox::getBackgroundPaintedExtent const):
(WebCore::RenderBox::backgroundIsKnownToBeOpaqueInRect const):
(WebCore::RenderBox::backgroundHasOpaqueTopLayer const):
* rendering/RenderBoxModelObject.cpp:
(WebCore::applyBoxShadowForBackground):
(WebCore::RenderBoxModelObject::paintFillLayerExtended):
(WebCore::RenderBoxModelObject::boxShadowShouldBeAppliedToBackground const):
(WebCore::RenderBoxModelObject::paintBoxShadow):
* rendering/RenderDetailsMarker.cpp:
(WebCore::RenderDetailsMarker::paint):
* rendering/RenderElement.cpp:
(WebCore::RenderElement::selectionColor const):
(WebCore::RenderElement::selectionBackgroundColor const):
(WebCore::RenderElement::paintFocusRing):
(WebCore::RenderElement::paintOutline):
* rendering/RenderFileUploadControl.cpp:
(WebCore::RenderFileUploadControl::paintObject):
* rendering/RenderFrameSet.cpp:
(WebCore::RenderFrameSet::paintColumnBorder):
(WebCore::RenderFrameSet::paintRowBorder):
* rendering/RenderImage.cpp:
(WebCore::RenderImage::paintReplaced):
(WebCore::RenderImage::paintAreaElementFocusRing):
* rendering/RenderInline.cpp:
(WebCore::RenderInline::paintOutline):
* rendering/RenderLayerBacking.cpp:
(WebCore::canDirectlyCompositeBackgroundBackgroundImage):
(WebCore::RenderLayerBacking::rendererBackgroundColor const):
* rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::rootOrBodyStyleChanged):
* rendering/RenderListBox.cpp:
(WebCore::RenderListBox::paintItemForeground):
(WebCore::RenderListBox::paintItemBackground):
* rendering/RenderListMarker.cpp:
(WebCore::RenderListMarker::paint):
* rendering/RenderMenuList.cpp:
(RenderMenuList::itemStyle const):
(RenderMenuList::getItemBackgroundColor const):
(RenderMenuList::menuStyle const):
* rendering/RenderMultiColumnSet.cpp:
(WebCore::RenderMultiColumnSet::paintColumnRules):
* rendering/RenderSearchField.cpp:
(WebCore::RenderSearchField::menuStyle const):
* rendering/RenderTable.h:
(WebCore::RenderTable::bgColor const):
* rendering/RenderTableCell.cpp:
(WebCore::RenderTableCell::computeCollapsedStartBorder const):
(WebCore::RenderTableCell::computeCollapsedEndBorder const):
(WebCore::RenderTableCell::computeCollapsedBeforeBorder const):
(WebCore::RenderTableCell::computeCollapsedAfterBorder const):
(WebCore::RenderTableCell::paintBackgroundsBehindCell):
* rendering/RenderTableSection.cpp:
(WebCore::RenderTableSection::paintRowGroupBorder):
* rendering/RenderTheme.cpp:
(WebCore::RenderTheme::paintSliderTicks):
* rendering/TextDecorationPainter.cpp:
(WebCore::decorationColor):
* rendering/TextPaintStyle.cpp:
(WebCore::computeTextPaintStyle):
* rendering/mathml/MathOperator.cpp:
(WebCore::MathOperator::paint):
* rendering/mathml/RenderMathMLFraction.cpp:
(WebCore::RenderMathMLFraction::paint):
* rendering/mathml/RenderMathMLMenclose.cpp:
(WebCore::RenderMathMLMenclose::paint):
* rendering/mathml/RenderMathMLRoot.cpp:
(WebCore::RenderMathMLRoot::paint):
* rendering/mathml/RenderMathMLToken.cpp:
(WebCore::RenderMathMLToken::paint):
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::visitedDependentColorWithColorFilter const):
(WebCore::RenderStyle::colorByApplyingColorFilter const):
* rendering/style/RenderStyle.h:

Source/WebKitLegacy/mac:

The body background should reflect the filtered color.

* WebView/WebFrame.mm:
(-[WebFrame _bodyBackgroundColor]):
* WebView/WebView.mm:
(-[WebView updateTextTouchBar]): No logic change, just cleanup.

LayoutTests:

Tests for color-filter rendering.

* css3/color-filters/color-filter-backgrounds-borders-expected.html: Added.
* css3/color-filters/color-filter-backgrounds-borders.html: Added.
* css3/color-filters/color-filter-box-shadow-expected.html: Added.
* css3/color-filters/color-filter-box-shadow.html: Added.
* css3/color-filters/color-filter-brightness-expected.html: Added.
* css3/color-filters/color-filter-brightness.html: Added.
* css3/color-filters/color-filter-color-property-expected.html: Added.
* css3/color-filters/color-filter-color-property-list-item-expected.html: Added.
* css3/color-filters/color-filter-color-property-list-item.html: Added.
* css3/color-filters/color-filter-color-property.html: Added.
* css3/color-filters/color-filter-color-text-decorations-expected.html: Added.
* css3/color-filters/color-filter-color-text-decorations.html: Added.
* css3/color-filters/color-filter-column-rule-expected.html: Added.
* css3/color-filters/color-filter-column-rule.html: Added.
* css3/color-filters/color-filter-contrast-expected.html: Added.
* css3/color-filters/color-filter-contrast.html: Added.
* css3/color-filters/color-filter-current-color-expected.html: Added.
* css3/color-filters/color-filter-current-color.html: Added.
* css3/color-filters/color-filter-filter-list-expected.html: Added.
* css3/color-filters/color-filter-filter-list.html: Added.
* css3/color-filters/color-filter-grayscale-expected.html: Added.
* css3/color-filters/color-filter-grayscale.html: Added.
* css3/color-filters/color-filter-hue-rotate-expected.html: Added.
* css3/color-filters/color-filter-hue-rotate.html: Added.
* css3/color-filters/color-filter-inherits-expected.html: Added.
* css3/color-filters/color-filter-inherits.html: Added.
* css3/color-filters/color-filter-invert-expected.html: Added.
* css3/color-filters/color-filter-invert.html: Added.
* css3/color-filters/color-filter-opacity-expected.html: Added.
* css3/color-filters/color-filter-opacity.html: Added.
* css3/color-filters/color-filter-outline-expected.html: Added.
* css3/color-filters/color-filter-outline.html: Added.
* css3/color-filters/color-filter-saturate-expected.html: Added.
* css3/color-filters/color-filter-saturate.html: Added.
* css3/color-filters/color-filter-sepia-expected.html: Added.
* css3/color-filters/color-filter-sepia.html: Added.
* css3/color-filters/color-filter-text-emphasis-expected.html: Added.
* css3/color-filters/color-filter-text-emphasis.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@231082 268f45cc-cd09-0410-ab3c-d52691b4dbfc
87 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/color-filters/color-filter-backgrounds-borders-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-backgrounds-borders.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-box-shadow-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-box-shadow.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-brightness-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-brightness.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-color-property-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-color-property-list-item-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-color-property-list-item.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-color-property.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-color-text-decorations-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-color-text-decorations.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-column-rule-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-column-rule.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-contrast-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-contrast.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-current-color-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-current-color.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-filter-list-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-filter-list.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-grayscale-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-grayscale.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-hue-rotate-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-hue-rotate.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-inherits-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-inherits.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-invert-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-invert.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-opacity-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-opacity.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-outline-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-outline.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-saturate-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-saturate.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-sepia-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-sepia.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-text-emphasis-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-text-emphasis.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/html/HTMLTextFormControlElement.cpp
Source/WebCore/page/FrameView.cpp
Source/WebCore/platform/graphics/ColorUtilities.cpp
Source/WebCore/platform/graphics/ColorUtilities.h
Source/WebCore/platform/graphics/filters/FilterOperation.cpp
Source/WebCore/platform/graphics/filters/FilterOperation.h
Source/WebCore/platform/graphics/filters/FilterOperations.cpp
Source/WebCore/platform/graphics/filters/FilterOperations.h
Source/WebCore/rendering/BorderEdge.cpp
Source/WebCore/rendering/EllipsisBox.cpp
Source/WebCore/rendering/InlineFlowBox.cpp
Source/WebCore/rendering/InlineTextBox.cpp
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderBoxModelObject.cpp
Source/WebCore/rendering/RenderDetailsMarker.cpp
Source/WebCore/rendering/RenderElement.cpp
Source/WebCore/rendering/RenderFileUploadControl.cpp
Source/WebCore/rendering/RenderFrameSet.cpp
Source/WebCore/rendering/RenderImage.cpp
Source/WebCore/rendering/RenderInline.cpp
Source/WebCore/rendering/RenderLayerBacking.cpp
Source/WebCore/rendering/RenderLayerCompositor.cpp
Source/WebCore/rendering/RenderListBox.cpp
Source/WebCore/rendering/RenderListMarker.cpp
Source/WebCore/rendering/RenderMenuList.cpp
Source/WebCore/rendering/RenderMultiColumnSet.cpp
Source/WebCore/rendering/RenderSearchField.cpp
Source/WebCore/rendering/RenderTable.h
Source/WebCore/rendering/RenderTableCell.cpp
Source/WebCore/rendering/RenderTableSection.cpp
Source/WebCore/rendering/RenderTheme.cpp
Source/WebCore/rendering/TextDecorationPainter.cpp
Source/WebCore/rendering/TextPaintStyle.cpp
Source/WebCore/rendering/mathml/MathOperator.cpp
Source/WebCore/rendering/mathml/RenderMathMLFraction.cpp
Source/WebCore/rendering/mathml/RenderMathMLMenclose.cpp
Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp
Source/WebCore/rendering/mathml/RenderMathMLToken.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebKitLegacy/mac/ChangeLog
Source/WebKitLegacy/mac/WebView/WebFrame.mm
Source/WebKitLegacy/mac/WebView/WebPreferenceKeysPrivate.h
Source/WebKitLegacy/mac/WebView/WebPreferences.mm
Source/WebKitLegacy/mac/WebView/WebPreferencesPrivate.h
Source/WebKitLegacy/mac/WebView/WebView.mm
Tools/DumpRenderTree/mac/DumpRenderTree.mm