[filters2] Support for backdrop-filter
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Nov 2014 22:23:16 +0000 (22:23 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 6 Nov 2014 22:23:16 +0000 (22:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=138384
<rdar://problem/18874494>

Reviewed by Simon Fraser.

Take 2!! Previous patch was rolled out.

Source/WebCore:

Add prototype support for backdrop-filter
http://dev.w3.org/fxtf/filters-2/#BackdropFilterProperty

This adds support for parsing the new CSS property, adding
the value to RenderStyle, noticing that on the layer tree,
and the platform code in GraphicsLayer to render a backdrop
and apply an effect to the result.

Some things are missing:
- animation of the backdrop-filter is not yet supported
- backdrops will not work in cloned layers yet (e.g. reflections)

Tests: css3/filters/backdrop/backdropfilter-property-computed-style.html
       css3/filters/backdrop/backdropfilter-property-parsing-invalid.html
       css3/filters/backdrop/backdropfilter-property-parsing.html
       css3/filters/backdrop/backdropfilter-property.html
       css3/filters/backdrop/effect-hw.html

* WebCore.exp.in: Export the setBackdropFilters method so it can
be used from WebKit.

* css/CSSComputedStyleDeclaration.cpp: New property name.
(WebCore::isLayoutDependent):
(WebCore::ComputedStyleExtractor::propertyValue): Use the existing valueForFilter method.

* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue): Piggyback on the filter parser.

* css/CSSPropertyNames.in: Add -webkit-backdrop-filter.

* css/StyleResolver.cpp:
(WebCore::StyleResolver::adjustRenderStyle): Add test for backdrop.
(WebCore::StyleResolver::applyProperty): Support new property.

* platform/graphics/GraphicsLayer.h:
(WebCore::GraphicsLayer::needsBackdrop): New method to test for existence of values.
(WebCore::GraphicsLayer::backdropFilters): Keeps the list of filters.
(WebCore::GraphicsLayer::setBackdropFilters):
(WebCore::GraphicsLayer::clearBackdropFilters):

* platform/graphics/ca/GraphicsLayerCA.cpp: This adds a new m_backdropLayer CALayer
that will sit behind the contents layer and provide the element's backdrop.
(WebCore::GraphicsLayerCA::willBeDestroyed):
(WebCore::GraphicsLayerCA::moveOrCopyAnimations):
(WebCore::GraphicsLayerCA::setBackdropFilters): Set a custom appearance so
remote layer hosts will notice the special layer. Also set the actual
layer properties.
(WebCore::GraphicsLayerCA::addAnimation): Remove whitespace.
(WebCore::GraphicsLayerCA::commitLayerChangesBeforeSublayers): Update backdrop if necessary.
(WebCore::GraphicsLayerCA::updateLayerNames): Give the new layer a name.
(WebCore::GraphicsLayerCA::updateSublayerList):
(WebCore::GraphicsLayerCA::updateGeometry): Make the backdrop layer match the contents
layer geometry.
(WebCore::GraphicsLayerCA::updateBackdropFilters): Create the backdrop layer if necessary,
and copy the filter values to any clones.
(WebCore::GraphicsLayerCA::ensureStructuralLayer): We need a structural layer if we
have backdrop filters.
(WebCore::GraphicsLayerCA::structuralLayerPurpose):
(WebCore::GraphicsLayerCA::createAnimationFromKeyframes):
(WebCore::GraphicsLayerCA::swapFromOrToTiledLayer):
* platform/graphics/ca/GraphicsLayerCA.h: New StructuralLayerPurpose, new LayerChangeFlag.

* platform/graphics/ca/PlatformCALayer.h: New LayerType.

* platform/graphics/ca/mac/PlatformCALayerMac.mm: Define CABackdropLayer.
(PlatformCALayerMac::PlatformCALayerMac): Create the correct CALayer type.

* rendering/RenderElement.h:
(WebCore::RenderElement::createsGroup):
(WebCore::RenderElement::hasBackdropFilter): This method is always around, but
only can return true when FILTERS_LEVEL_2 is enabled.

* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::paintsWithFilters): Remove an unnecessary comment.
(WebCore::RenderLayer::calculateClipRects):

* rendering/RenderLayer.h: Add hasBackdropFilter.

* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::RenderLayerBacking):
(WebCore::RenderLayerBacking::createPrimaryGraphicsLayer): Update the backdrop filters.
(WebCore::RenderLayerBacking::updateBackdropFilters): Set the filters on the GraphicsLayer.
(WebCore::RenderLayerBacking::updateGeometry):
* rendering/RenderLayerBacking.h:

* rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::requiresOwnBackingStore): Needs backingstore if it has a backdrop filter.
(WebCore::RenderLayerCompositor::reasonsForCompositing):
(WebCore::RenderLayerCompositor::requiresCompositingForFilters): Return early if we have
a backdrop filter, because currently we absolutely require compositing.

* rendering/RenderLayerModelObject.cpp:
(WebCore::RenderLayerModelObject::styleWillChange): Add hasBackdropFilter().

* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::changeRequiresLayout): Check backdrops for change.

* rendering/style/RenderStyle.h: Add the backdropFilter style stuff.
* rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator==):
(WebCore::StyleRareNonInheritedData::hasBackdropFilters):
* rendering/style/StyleRareNonInheritedData.h:

Source/WebKit2:

* Shared/mac/RemoteLayerBackingStore.mm:
(WebKit::RemoteLayerBackingStore::drawInContext): Handle LayerTypeBackdropLayer in the switch.
* Shared/mac/RemoteLayerTreeTransaction.mm:
(WebKit::RemoteLayerTreeTransaction::description): Describe a backdrop layer.
* UIProcess/ios/RemoteLayerTreeHostIOS.mm:
(+[WKBackdropView layerClass]): Define CABackdropLayer and use it as the class.
(WebKit::RemoteLayerTreeHost::createLayer):
* UIProcess/mac/RemoteLayerTreeHost.mm: Ditto.
(WebKit::RemoteLayerTreeHost::createLayer):

LayoutTests:

Tests for backdrop-filter. These are skipped on non-Apple platforms.

* platform/win/TestExpections: Skip these tests.
* platform/efl/TestExpections:
* platform/gtk/TestExpections:
* platform/mac-mavericks/TestExpectations: Yosemite only.

* css3/filters/backdrop/backdropfilter-property-computed-style-expected.txt: Added.
* css3/filters/backdrop/backdropfilter-property-computed-style.html: Added.
* css3/filters/backdrop/backdropfilter-property-expected.txt: Added.
* css3/filters/backdrop/backdropfilter-property-parsing-expected.txt: Added.
* css3/filters/backdrop/backdropfilter-property-parsing-invalid-expected.txt: Added.
* css3/filters/backdrop/backdropfilter-property-parsing-invalid.html: Added.
* css3/filters/backdrop/backdropfilter-property-parsing.html: Added.
* css3/filters/backdrop/backdropfilter-property.html: Added.
* css3/filters/backdrop/effect-hw-expected.html: Added.
* css3/filters/backdrop/effect-hw.html: Added.
* css3/filters/backdrop/script-tests/backdropfilter-property-computed-style.js: Added.
(testComputedFilterRule):
* css3/filters/backdrop/script-tests/backdropfilter-property-parsing-invalid.js: Added.
(testInvalidFilterRule):
* css3/filters/backdrop/script-tests/backdropfilter-property-parsing.js: Added.
(jsWrapperClass):
(shouldBeType):
(testFilterRule):
* css3/filters/backdrop/script-tests/backdropfilter-property.js: Added.

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

48 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style-expected.txt [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style.html [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdropfilter-property-expected.txt [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-expected.txt [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-invalid-expected.txt [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-invalid.html [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing.html [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/backdropfilter-property.html [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/effect-hw-expected.html [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/effect-hw.html [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-computed-style.js [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-parsing-invalid.js [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-parsing.js [new file with mode: 0644]
LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property.js [new file with mode: 0644]
LayoutTests/platform/efl/TestExpectations
LayoutTests/platform/gtk/TestExpectations
LayoutTests/platform/mac-mavericks/TestExpectations
LayoutTests/platform/win/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/WebCore.exp.in
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/page/animation/KeyframeAnimation.cpp
Source/WebCore/platform/graphics/GraphicsLayer.h
Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp
Source/WebCore/platform/graphics/ca/GraphicsLayerCA.h
Source/WebCore/platform/graphics/ca/PlatformCALayer.h
Source/WebCore/platform/graphics/ca/mac/PlatformCALayerMac.mm
Source/WebCore/rendering/RenderElement.h
Source/WebCore/rendering/RenderLayer.cpp
Source/WebCore/rendering/RenderLayer.h
Source/WebCore/rendering/RenderLayerBacking.cpp
Source/WebCore/rendering/RenderLayerBacking.h
Source/WebCore/rendering/RenderLayerCompositor.cpp
Source/WebCore/rendering/RenderLayerModelObject.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp
Source/WebCore/rendering/style/StyleRareNonInheritedData.h
Source/WebKit2/ChangeLog
Source/WebKit2/Shared/mac/RemoteLayerBackingStore.mm
Source/WebKit2/Shared/mac/RemoteLayerTreeTransaction.mm
Source/WebKit2/UIProcess/ios/RemoteLayerTreeHostIOS.mm
Source/WebKit2/UIProcess/mac/RemoteLayerTreeHost.mm
Source/WebKit2/WebProcess/WebCoreSupport/WebChromeClient.h

index 2b0ff77..a49e104 100644 (file)
@@ -1,3 +1,40 @@
+2014-11-06  Dean Jackson  <dino@apple.com>
+
+        [filters2] Support for backdrop-filter
+        https://bugs.webkit.org/show_bug.cgi?id=138384
+        <rdar://problem/18874494>
+
+        Reviewed by Simon Fraser.
+
+        Take 2!! Previous patch was rolled out.
+
+        Tests for backdrop-filter. These are skipped on non-Apple platforms.
+
+        * platform/win/TestExpections: Skip these tests.
+        * platform/efl/TestExpections:
+        * platform/gtk/TestExpections:
+        * platform/mac-mavericks/TestExpectations: Yosemite only.
+
+        * css3/filters/backdrop/backdropfilter-property-computed-style-expected.txt: Added.
+        * css3/filters/backdrop/backdropfilter-property-computed-style.html: Added.
+        * css3/filters/backdrop/backdropfilter-property-expected.txt: Added.
+        * css3/filters/backdrop/backdropfilter-property-parsing-expected.txt: Added.
+        * css3/filters/backdrop/backdropfilter-property-parsing-invalid-expected.txt: Added.
+        * css3/filters/backdrop/backdropfilter-property-parsing-invalid.html: Added.
+        * css3/filters/backdrop/backdropfilter-property-parsing.html: Added.
+        * css3/filters/backdrop/backdropfilter-property.html: Added.
+        * css3/filters/backdrop/effect-hw-expected.html: Added.
+        * css3/filters/backdrop/effect-hw.html: Added.
+        * css3/filters/backdrop/script-tests/backdropfilter-property-computed-style.js: Added.
+        (testComputedFilterRule):
+        * css3/filters/backdrop/script-tests/backdropfilter-property-parsing-invalid.js: Added.
+        (testInvalidFilterRule):
+        * css3/filters/backdrop/script-tests/backdropfilter-property-parsing.js: Added.
+        (jsWrapperClass):
+        (shouldBeType):
+        (testFilterRule):
+        * css3/filters/backdrop/script-tests/backdropfilter-property.js: Added.
+
 2014-11-06  Benjamin Poulain  <bpoulain@apple.com>
 
         Give pseudo elements the correct specificity
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style-expected.txt b/LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style-expected.txt
new file mode 100644 (file)
index 0000000..1e9c083
--- /dev/null
@@ -0,0 +1,390 @@
+Test the computed style of the -webkit-backdrop-filter property.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Basic reference : url('#a')
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+
+Bare unquoted reference converting to quoted form : url(#a)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+
+Multiple references : url('#a') url('#b')
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#b)'
+
+Reference as 2nd value : grayscale(1) url('#a')
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(1)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+
+Integer value : grayscale(1)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(1)'
+
+Float value converts to integer : grayscale(1.0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(1)'
+
+Zero value : grayscale(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0)'
+
+No values : grayscale()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(1)'
+
+Multiple values : grayscale(0.5) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : sepia(1)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(1)'
+
+Float value converts to integer : sepia(1.0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(1)'
+
+Zero value : sepia(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0)'
+
+No values : sepia()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(1)'
+
+Multiple values : sepia(0.5) sepia(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.25)'
+
+Rule combinations : sepia(0.5) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : saturate(1)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(1)'
+
+Float value converts to integer : saturate(1.0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(1)'
+
+Zero value : saturate(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0)'
+
+No values : saturate()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(1)'
+
+Multiple values : saturate(0.5) saturate(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.25)'
+
+Rule combinations : saturate(0.5) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Degrees value as integer : hue-rotate(10deg)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10deg)'
+
+Degrees float value converts to integer : hue-rotate(10.0deg)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10deg)'
+
+Radians value : hue-rotate(10rad)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(572.9577951308232deg)'
+
+Gradians value : hue-rotate(10grad)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(9deg)'
+
+Turns value : hue-rotate(0.5turn)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(180deg)'
+
+Zero value : hue-rotate(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(0deg)'
+
+No values : hue-rotate()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(0deg)'
+
+Rule combinations : hue-rotate(10deg) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10deg)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : invert(1)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(1)'
+
+Float value converts to integer : invert(1.0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(1)'
+
+Zero value : invert(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0)'
+
+No values : invert()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(1)'
+
+Multiple values : invert(0.5) invert(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.25)'
+
+Rule combinations : invert(0.5) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : opacity(1)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(1)'
+
+Float value converts to integer : opacity(1.0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(1)'
+
+Zero value : opacity(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0)'
+
+No values : opacity()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(1)'
+
+Multiple values : opacity(0.5) opacity(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.25)'
+
+Rule combinations : opacity(0.5) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : brightness(1)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(1)'
+
+Float value converts to integer : brightness(1.0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(1)'
+
+Zero value : brightness(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0)'
+
+No values : brightness()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0)'
+
+Multiple values : brightness(0.5) brightness(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.25)'
+
+Rule combinations : brightness(0.5) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : contrast(1)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(1)'
+
+Value greater than 1 : contrast(2)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(2)'
+
+Float value converts to integer : contrast(1.0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(1)'
+
+Zero value : contrast(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0)'
+
+No values : contrast()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(1)'
+
+Multiple values : contrast(0.5) contrast(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.25)'
+
+Rule combinations : contrast(0.5) grayscale(0.25)
+PASS filterStyle.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+One zero to px : blur(0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(0px)'
+
+One length : blur(2em)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(32px)'
+
+One length : blur(5px)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(5px)'
+
+No values : blur()
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(0px)'
+
+Color then three values : drop-shadow(red 1px 2px 3px)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(rgb(255, 0, 0) 1px 2px 3px)'
+
+Three values then color : drop-shadow(1px 2px 3px red)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(rgb(255, 0, 0) 1px 2px 3px)'
+
+Color then three values with zero length : drop-shadow(#abc 0 0 0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(rgb(170, 187, 204) 0px 0px 0px)'
+
+Three values with zero length : drop-shadow(0 0 0)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(rgba(0, 0, 0, 0) 0px 0px 0px)'
+
+Two values no color : drop-shadow(1px 2px)
+PASS filterStyle.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(rgba(0, 0, 0, 0) 1px 2px 0px)'
+
+Multiple operations : grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px)
+PASS filterStyle.length is 7
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.25)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.75)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(35deg)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.2)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.9)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(5px)'
+
+Percentage values : grayscale(50%) sepia(25%) saturate(75%) invert(20%) opacity(90%) brightness(60%) contrast(30%)
+PASS filterStyle.length is 7
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.25)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.75)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.2)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.9)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.6)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.3)'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style.html b/LayoutTests/css3/filters/backdrop/backdropfilter-property-computed-style.html
new file mode 100644 (file)
index 0000000..0f1c00e
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE>
+<html>
+<head>
+<script src="../../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script src="script-tests/backdropfilter-property-computed-style.js"></script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property-expected.txt b/LayoutTests/css3/filters/backdrop/backdropfilter-property-expected.txt
new file mode 100644 (file)
index 0000000..b3d4842
--- /dev/null
@@ -0,0 +1,12 @@
+Test the parsing of the -webkit-backdrop-filter property.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(120deg)'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-expected.txt b/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-expected.txt
new file mode 100644 (file)
index 0000000..f0ba831
--- /dev/null
@@ -0,0 +1,906 @@
+Test the parsing of the -webkit-backdrop-filter property.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Basic reference : url('#a')
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'url(#a)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+
+Bare unquoted reference converting to quoted form : url(#a)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'url(#a)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+
+Multiple references : url('#a') url('#b')
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'url(#a) url(#b)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#b)'
+
+Reference as 2nd value : grayscale(1) url('#a')
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(1) url(#a)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(1)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_REFERENCE
+PASS subRule.cssText is 'url(#a)'
+
+Integer value : grayscale(1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(1)'
+
+Percentage value : grayscale(50%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(50%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(50%)'
+
+Float value converts to integer : grayscale(1.0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(1)'
+
+Zero value : grayscale(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(0)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0)'
+
+No values : grayscale()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale()'
+
+Multiple values : grayscale(0.5) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(0.5) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : sepia(1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'sepia(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(1)'
+
+Percentage value : sepia(50%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'sepia(50%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(50%)'
+
+Float value converts to integer : sepia(1.0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'sepia(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(1)'
+
+Zero value : sepia(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'sepia(0)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0)'
+
+No values : sepia()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'sepia()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia()'
+
+Multiple values : sepia(0.5) sepia(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'sepia(0.5) sepia(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.25)'
+
+Rule combinations : sepia(0.5) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'sepia(0.5) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : saturate(1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(1)'
+
+Percentage value : saturate(50%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(50%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(50%)'
+
+Percentage value > 1 : saturate(250%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(250%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(250%)'
+
+Float value converts to integer : saturate(1.0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(1)'
+
+Input value > 1 : saturate(5.5)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(5.5)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(5.5)'
+
+Zero value : saturate(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(0)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0)'
+
+No values : saturate()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate()'
+
+Multiple values : saturate(0.5) saturate(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(0.5) saturate(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.25)'
+
+Rule combinations : saturate(0.5) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'saturate(0.5) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Degrees value as integer : hue-rotate(10deg)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(10deg)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10deg)'
+
+Degrees float value converts to integer : hue-rotate(10.0deg)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(10deg)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10deg)'
+
+Radians value : hue-rotate(10rad)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(10rad)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10rad)'
+
+Gradians value : hue-rotate(10grad)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(10grad)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10grad)'
+
+Turns value : hue-rotate(0.5turn)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(0.5turn)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(0.5turn)'
+
+Zero value : hue-rotate(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(0deg)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(0deg)'
+
+No values : hue-rotate()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate()'
+
+Rule combinations : hue-rotate(10deg) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'hue-rotate(10deg) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(10deg)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : invert(1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'invert(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(1)'
+
+Percentage value : invert(50%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'invert(50%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(50%)'
+
+Float value converts to integer : invert(1.0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'invert(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(1)'
+
+Zero value : invert(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'invert(0)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0)'
+
+No values : invert()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'invert()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert()'
+
+Multiple values : invert(0.5) invert(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'invert(0.5) invert(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.25)'
+
+Rule combinations : invert(0.5) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'invert(0.5) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : opacity(1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'opacity(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(1)'
+
+Percentage value : opacity(50%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'opacity(50%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(50%)'
+
+Float value converts to integer : opacity(1.0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'opacity(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(1)'
+
+Zero value : opacity(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'opacity(0)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0)'
+
+No values : opacity()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'opacity()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity()'
+
+Multiple values : opacity(0.5) opacity(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'opacity(0.5) opacity(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.25)'
+
+Rule combinations : opacity(0.5) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'opacity(0.5) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Integer value : brightness(1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(1)'
+
+Percentage value : brightness(50%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(50%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(50%)'
+
+Float value converts to integer : brightness(1.0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(1)'
+
+Zero value : brightness(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(0)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0)'
+
+No values : brightness()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness()'
+
+Multiple values : brightness(0.5) brightness(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(0.5) brightness(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.25)'
+
+Rule combinations : brightness(0.5) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(0.5) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Parameter less than -100% : brightness(-1.1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(-1.1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(-1.1)'
+
+Parameter more than 100% : brightness(101%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'brightness(101%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(101%)'
+
+Rule combinations : grayscale(0.25) brightness(0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(0.25) brightness(0.5)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS
+PASS subRule.cssText is 'brightness(0.5)'
+
+Integer value : contrast(1)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(1)'
+
+Percentage value : contrast(50%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(50%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(50%)'
+
+Percentage value > 1 : contrast(250%)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(250%)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(250%)'
+
+Float value converts to integer : contrast(1.0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(1)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(1)'
+
+Zero value : contrast(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(0)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0)'
+
+No values : contrast()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast()'
+
+Value greater than one : contrast(2)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(2)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(2)'
+
+Multiple values : contrast(0.5) contrast(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(0.5) contrast(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.25)'
+
+Rule combinations : contrast(0.5) grayscale(0.25)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'contrast(0.5) grayscale(0.25)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+
+Rule combinations : grayscale(0.25) contrast(0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(0.25) contrast(0.5)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 2
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.25)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_CONTRAST
+PASS subRule.cssText is 'contrast(0.5)'
+
+One zero to px : blur(0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'blur(0px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(0px)'
+
+One length : blur(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'blur(10px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(10px)'
+
+No values : blur()
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'blur()'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur()'
+
+Color then three values : drop-shadow(red 1px 2px 3px)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'drop-shadow(red 1px 2px 3px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(red 1px 2px 3px)'
+
+Three values then color : drop-shadow(1px 2px 3px red)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'drop-shadow(red 1px 2px 3px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(red 1px 2px 3px)'
+
+Color then three values with zero length : drop-shadow(#abc 0 0 0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'drop-shadow(rgb(170, 187, 204) 0px 0px 0px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(rgb(170, 187, 204) 0px 0px 0px)'
+
+Three values with zero length : drop-shadow(0 0 0)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'drop-shadow(0px 0px 0px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(0px 0px 0px)'
+
+Two values no color : drop-shadow(1px 2px)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'drop-shadow(1px 2px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 1
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(1px 2px)'
+
+Multiple operations : grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px) drop-shadow(green 1px 2px 3px)
+PASS cssRule.type is 1
+PASS declaration.length is 1
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is 'grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px) drop-shadow(green 1px 2px 3px)'
+PASS jsWrapperClass(filterRule) is 'CSSValueList'
+PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
+PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
+PASS filterRule.length is 8
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE
+PASS subRule.cssText is 'grayscale(0.5)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SEPIA
+PASS subRule.cssText is 'sepia(0.25)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_SATURATE
+PASS subRule.cssText is 'saturate(0.75)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE
+PASS subRule.cssText is 'hue-rotate(35deg)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_INVERT
+PASS subRule.cssText is 'invert(0.2)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_OPACITY
+PASS subRule.cssText is 'opacity(0.9)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_BLUR
+PASS subRule.cssText is 'blur(5px)'
+PASS subRule.operationType is WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW
+PASS subRule.cssText is 'drop-shadow(green 1px 2px 3px)'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-invalid-expected.txt b/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-invalid-expected.txt
new file mode 100644 (file)
index 0000000..63c69aa
--- /dev/null
@@ -0,0 +1,324 @@
+Test the parsing of the -webkit-backdrop-filter property.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Too many parameters : url(#a #b)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Length instead of number : grayscale(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : grayscale(0.5 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : grayscale(0.5, 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : grayscale(0.5,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative parameter : grayscale(-0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative percent : grayscale(-10%)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Parameter out of bounds : grayscale(1.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : sepia(0.5 0.5 3.0)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : sepia(0.1, 0.1)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : sepia(0.5,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative parameter : sepia(-0.01)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative percent : sepia(-10%)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Parameter out of bounds : sepia(10000)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Length instead of number : saturate(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : saturate(0.5 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : saturate(0.5, 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : saturate(0.5,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative parameter : saturate(-0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative percent : saturate(-10%)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Bare number : hue-rotate(10)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Length : hue-rotate(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : hue-rotate(10deg 4)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : hue-rotate(10deg, 5deg)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : hue-rotate(10deg,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Length instead of number : invert(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : invert(0.5 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : invert(0.5, 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : invert(0.5,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative parameter : invert(-0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Parameter out of bounds : invert(1.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Length instead of number : opacity(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : opacity(0.5 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : opacity(0.5, 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : opacity(0.5,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative parameter : opacity(-0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative percent : opacity(-10%)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Parameter out of bounds : opacity(1.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Length instead of number : brightness(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : brightness(0.5 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : brightness(0.5, 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : brightness(0.5,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Length instead of number : contrast(10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : contrast(0.5 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : contrast(0.5, 0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : contrast(0.5,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative parameter : contrast(-0.5)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative percent : contrast(-10%)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Bare number : blur(1)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative number : blur(-1px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Percentage : blur(10%)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : blur(1px 1px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters and commas : blur(1em, 1em)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Commas : blur(10px, 10px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Trailing comma : blur(1em,)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+No values : drop-shadow()
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Missing lengths : drop-shadow(red)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Not enough lengths : drop-shadow(red 1px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Missing units : drop-shadow(red 1 2 3)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Inset : drop-shadow(red 1px 2px 3px inset)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Too many parameters : drop-shadow(red 1px 2px 3px 4px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Commas : drop-shadow(red, 1px, 2px, 3px)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+
+Negative radius : drop-shadow(10px 10px -1px red)
+PASS cssRule.type is 1
+PASS declaration.length is 0
+PASS declaration.getPropertyValue('-webkit-backdrop-filter') is null
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-invalid.html b/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing-invalid.html
new file mode 100644 (file)
index 0000000..6c2957f
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE>
+<html>
+<head>
+<script src="../../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script src="script-tests/backdropfilter-property-parsing-invalid.js"></script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing.html b/LayoutTests/css3/filters/backdrop/backdropfilter-property-parsing.html
new file mode 100644 (file)
index 0000000..82497e6
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE>
+<html>
+<head>
+<script src="../../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script src="script-tests/backdropfilter-property-parsing.js"></script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/backdrop/backdropfilter-property.html b/LayoutTests/css3/filters/backdrop/backdropfilter-property.html
new file mode 100644 (file)
index 0000000..4ef384b
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE>
+<html>
+<head>
+<script src="../../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script src="script-tests/backdropfilter-property.js"></script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/backdrop/effect-hw-expected.html b/LayoutTests/css3/filters/backdrop/effect-hw-expected.html
new file mode 100644 (file)
index 0000000..f1af7e3
--- /dev/null
@@ -0,0 +1,50 @@
+<style>
+div {
+    display: inline-block;
+    position: relative;
+    margin: 10px;
+    width: 160px;
+    height: 80px;
+}
+
+img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
+
+p {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 80px;
+    height: 40px;
+    margin: 0;
+    padding: 0;
+    background: transparent url(../resources/reference.png) top left no-repeat;
+    -webkit-transform: translate3d(0, 0, 0); /* need to force compositing here */
+}
+
+</style>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-filter: invert()"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-filter: contrast(20%)"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-filter: grayscale()"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-filter: sepia()"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-filter: sepia() hue-rotate(90deg)"></p>
+</div>
diff --git a/LayoutTests/css3/filters/backdrop/effect-hw.html b/LayoutTests/css3/filters/backdrop/effect-hw.html
new file mode 100644 (file)
index 0000000..1dab4af
--- /dev/null
@@ -0,0 +1,48 @@
+<style>
+div {
+    display: inline-block;
+    position: relative;
+    margin: 10px;
+    width: 160px;
+    height: 80px;
+}
+
+img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+}
+
+p {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 80px;
+    height: 40px;
+    margin: 0;
+    padding: 0;
+}
+
+</style>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-backdrop-filter: invert()"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-backdrop-filter: contrast(20%)"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-backdrop-filter: grayscale()"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-backdrop-filter: sepia()"></p>
+</div>
+<div>
+    <img src="../resources/reference.png">
+    <p style="-webkit-backdrop-filter: sepia() hue-rotate(90deg)"></p>
+</div>
diff --git a/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-computed-style.js b/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-computed-style.js
new file mode 100644 (file)
index 0000000..73ffeac
--- /dev/null
@@ -0,0 +1,383 @@
+description("Test the computed style of the -webkit-backdrop-filter property.");
+
+// These have to be global for the test helpers to see them.
+var stylesheet, filterStyle, subRule;
+var styleElement = document.createElement("style");
+document.head.appendChild(styleElement);
+stylesheet = styleElement.sheet;
+
+function testComputedFilterRule(description, rule, expectedLength, expectedTypes, expectedTexts)
+{
+    debug("");
+    debug(description + " : " + rule);
+
+    stylesheet.insertRule("body { -webkit-backdrop-filter: " + rule + "; }", 0);
+
+    filterStyle = window.getComputedStyle(document.body).getPropertyCSSValue('-webkit-backdrop-filter');
+    shouldBe("filterStyle.length", "" + expectedLength);
+    for (var i = 0; i < expectedLength; i++) {
+        subRule = filterStyle[i];
+        shouldBe("subRule.operationType", expectedTypes[i]);
+        shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
+    }
+    stylesheet.deleteRule(0);
+}
+
+testComputedFilterRule("Basic reference",
+                       "url('#a')", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+                       ["url(#a)"]);
+
+testComputedFilterRule("Bare unquoted reference converting to quoted form",
+                       "url(#a)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+                       ["url(#a)"]);
+
+testComputedFilterRule("Multiple references",
+                       "url('#a') url('#b')", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE", "WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+                       ["url(#a)", "url(#b)"]);
+
+testComputedFilterRule("Reference as 2nd value",
+                       "grayscale(1) url('#a')", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+                       ["grayscale(1)", "url(#a)"]);
+
+testComputedFilterRule("Integer value",
+                       "grayscale(1)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["grayscale(1)"]);
+
+testComputedFilterRule("Float value converts to integer",
+                       "grayscale(1.0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["grayscale(1)"]);
+
+testComputedFilterRule("Zero value",
+                       "grayscale(0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["grayscale(0)"]);
+
+testComputedFilterRule("No values",
+                       "grayscale()", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["grayscale(1)"]);
+
+testComputedFilterRule("Multiple values",
+                       "grayscale(0.5) grayscale(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["grayscale(0.5)", "grayscale(0.25)"]);
+
+testComputedFilterRule("Integer value",
+                       "sepia(1)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+                       ["sepia(1)"]);
+
+testComputedFilterRule("Float value converts to integer",
+                       "sepia(1.0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+                       ["sepia(1)"]);
+
+testComputedFilterRule("Zero value",
+                       "sepia(0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+                       ["sepia(0)"]);
+
+testComputedFilterRule("No values",
+                       "sepia()", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+                       ["sepia(1)"]);
+
+testComputedFilterRule("Multiple values",
+                       "sepia(0.5) sepia(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SEPIA", "WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+                       ["sepia(0.5)", "sepia(0.25)"]);
+
+testComputedFilterRule("Rule combinations",
+                       "sepia(0.5) grayscale(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SEPIA", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["sepia(0.5)", "grayscale(0.25)"]);
+
+testComputedFilterRule("Integer value",
+                       "saturate(1)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+                       ["saturate(1)"]);
+
+testComputedFilterRule("Float value converts to integer",
+                       "saturate(1.0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+                       ["saturate(1)"]);
+
+testComputedFilterRule("Zero value",
+                       "saturate(0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+                       ["saturate(0)"]);
+
+testComputedFilterRule("No values",
+                       "saturate()", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+                       ["saturate(1)"]);
+
+testComputedFilterRule("Multiple values",
+                       "saturate(0.5) saturate(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SATURATE", "WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+                       ["saturate(0.5)", "saturate(0.25)"]);
+
+testComputedFilterRule("Rule combinations",
+                       "saturate(0.5) grayscale(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_SATURATE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["saturate(0.5)", "grayscale(0.25)"]);
+
+testComputedFilterRule("Degrees value as integer",
+                       "hue-rotate(10deg)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+                       ["hue-rotate(10deg)"]);
+
+testComputedFilterRule("Degrees float value converts to integer",
+                       "hue-rotate(10.0deg)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+                       ["hue-rotate(10deg)"]);
+
+testComputedFilterRule("Radians value",
+                       "hue-rotate(10rad)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+                       ["hue-rotate(572.9577951308232deg)"]);
+
+testComputedFilterRule("Gradians value",
+                       "hue-rotate(10grad)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+                       ["hue-rotate(9deg)"]);
+
+testComputedFilterRule("Turns value",
+                       "hue-rotate(0.5turn)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+                       ["hue-rotate(180deg)"]);
+
+testComputedFilterRule("Zero value",
+                       "hue-rotate(0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+                       ["hue-rotate(0deg)"]);
+
+testComputedFilterRule("No values",
+                       "hue-rotate()", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+                       ["hue-rotate(0deg)"]);
+
+testComputedFilterRule("Rule combinations",
+                       "hue-rotate(10deg) grayscale(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["hue-rotate(10deg)", "grayscale(0.25)"]);
+
+testComputedFilterRule("Integer value",
+                       "invert(1)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+                       ["invert(1)"]);
+
+testComputedFilterRule("Float value converts to integer",
+                       "invert(1.0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+                       ["invert(1)"]);
+
+testComputedFilterRule("Zero value",
+                       "invert(0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+                       ["invert(0)"]);
+
+testComputedFilterRule("No values",
+                       "invert()", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+                       ["invert(1)"]);
+
+testComputedFilterRule("Multiple values",
+                       "invert(0.5) invert(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_INVERT", "WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+                       ["invert(0.5)", "invert(0.25)"]);
+
+testComputedFilterRule("Rule combinations",
+                       "invert(0.5) grayscale(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_INVERT", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["invert(0.5)", "grayscale(0.25)"]);
+
+testComputedFilterRule("Integer value",
+                       "opacity(1)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+                       ["opacity(1)"]);
+
+testComputedFilterRule("Float value converts to integer",
+                       "opacity(1.0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+                       ["opacity(1)"]);
+
+testComputedFilterRule("Zero value",
+                       "opacity(0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+                       ["opacity(0)"]);
+
+testComputedFilterRule("No values",
+                       "opacity()", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+                       ["opacity(1)"]);
+
+testComputedFilterRule("Multiple values",
+                       "opacity(0.5) opacity(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_OPACITY", "WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+                       ["opacity(0.5)", "opacity(0.25)"]);
+
+testComputedFilterRule("Rule combinations",
+                       "opacity(0.5) grayscale(0.25)", 2,
+                       ["WebKitCSSFilterValue.CSS_FILTER_OPACITY", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                       ["opacity(0.5)", "grayscale(0.25)"]);
+
+testComputedFilterRule("Integer value",
+                      "brightness(1)", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+                      ["brightness(1)"]);
+
+testComputedFilterRule("Float value converts to integer",
+                      "brightness(1.0)", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+                      ["brightness(1)"]);
+
+testComputedFilterRule("Zero value",
+                      "brightness(0)", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+                      ["brightness(0)"]);
+
+testComputedFilterRule("No values",
+                      "brightness()", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+                      ["brightness(0)"]);
+
+testComputedFilterRule("Multiple values",
+                      "brightness(0.5) brightness(0.25)", 2,
+                      ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS", "WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+                      ["brightness(0.5)", "brightness(0.25)"]);
+
+testComputedFilterRule("Rule combinations",
+                      "brightness(0.5) grayscale(0.25)", 2,
+                      ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                      ["brightness(0.5)", "grayscale(0.25)"]);
+
+testComputedFilterRule("Integer value",
+                      "contrast(1)", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+                      ["contrast(1)"]);
+
+testComputedFilterRule("Value greater than 1",
+                      "contrast(2)", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+                      ["contrast(2)"]);
+
+testComputedFilterRule("Float value converts to integer",
+                      "contrast(1.0)", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+                      ["contrast(1)"]);
+
+testComputedFilterRule("Zero value",
+                      "contrast(0)", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+                      ["contrast(0)"]);
+
+testComputedFilterRule("No values",
+                      "contrast()", 1,
+                      ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+                      ["contrast(1)"]);
+
+testComputedFilterRule("Multiple values",
+                      "contrast(0.5) contrast(0.25)", 2,
+                      ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST", "WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+                      ["contrast(0.5)", "contrast(0.25)"]);
+
+testComputedFilterRule("Rule combinations",
+                      "contrast(0.5) grayscale(0.25)", 2,
+                      ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+                      ["contrast(0.5)", "grayscale(0.25)"]);
+
+testComputedFilterRule("One zero to px",
+                       "blur(0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
+                       ["blur(0px)"]);
+
+testComputedFilterRule("One length",
+                       "blur(2em)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
+                       ["blur(32px)"]);
+
+testComputedFilterRule("One length",
+                       "blur(5px)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
+                       ["blur(5px)"]);
+
+testComputedFilterRule("No values",
+                       "blur()", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
+                       ["blur(0px)"]);
+
+testComputedFilterRule("Color then three values",
+                       "drop-shadow(red 1px 2px 3px)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+                       ["drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"]);
+
+testComputedFilterRule("Three values then color",
+                       "drop-shadow(1px 2px 3px red)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+                       ["drop-shadow(rgb(255, 0, 0) 1px 2px 3px)"]);
+
+testComputedFilterRule("Color then three values with zero length",
+                       "drop-shadow(#abc 0 0 0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+                       ["drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"]);
+
+testComputedFilterRule("Three values with zero length",
+                       "drop-shadow(0 0 0)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+                       ["drop-shadow(rgba(0, 0, 0, 0) 0px 0px 0px)"]);
+
+testComputedFilterRule("Two values no color",
+                       "drop-shadow(1px 2px)", 1,
+                       ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+                       ["drop-shadow(rgba(0, 0, 0, 0) 1px 2px 0px)"]);
+
+testComputedFilterRule("Multiple operations",
+                       "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px)", 7,
+                       [
+                           "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE",
+                           "WebKitCSSFilterValue.CSS_FILTER_SEPIA",
+                           "WebKitCSSFilterValue.CSS_FILTER_SATURATE",
+                           "WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE",
+                           "WebKitCSSFilterValue.CSS_FILTER_INVERT",
+                           "WebKitCSSFilterValue.CSS_FILTER_OPACITY",
+                           "WebKitCSSFilterValue.CSS_FILTER_BLUR",
+               ],
+                       [
+                           "grayscale(0.5)",
+                           "sepia(0.25)",
+                           "saturate(0.75)",
+                           "hue-rotate(35deg)",
+                           "invert(0.2)",
+                           "opacity(0.9)",
+                           "blur(5px)"
+               ]);
+
+testComputedFilterRule("Percentage values",
+                      "grayscale(50%) sepia(25%) saturate(75%) invert(20%) opacity(90%) brightness(60%) contrast(30%)", 7,
+                      [
+                          "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE",
+                          "WebKitCSSFilterValue.CSS_FILTER_SEPIA",
+                          "WebKitCSSFilterValue.CSS_FILTER_SATURATE",
+                          "WebKitCSSFilterValue.CSS_FILTER_INVERT",
+                          "WebKitCSSFilterValue.CSS_FILTER_OPACITY",
+                          "WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS",
+                          "WebKitCSSFilterValue.CSS_FILTER_CONTRAST"
+              ],
+                      [
+                          "grayscale(0.5)",
+                          "sepia(0.25)",
+                          "saturate(0.75)",
+                          "invert(0.2)",
+                          "opacity(0.9)",
+                          "brightness(0.6)",
+                          "contrast(0.3)"
+              ]);
+
+successfullyParsed = true;
diff --git a/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-parsing-invalid.js b/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-parsing-invalid.js
new file mode 100644 (file)
index 0000000..cc32497
--- /dev/null
@@ -0,0 +1,98 @@
+description("Test the parsing of the -webkit-backdrop-filter property.");
+
+// These have to be global for the test helpers to see them.
+var stylesheet, cssRule, declaration;
+var styleElement = document.createElement("style");
+document.head.appendChild(styleElement);
+stylesheet = styleElement.sheet;
+
+function testInvalidFilterRule(description, rule)
+{
+    debug("");
+    debug(description + " : " + rule);
+
+    stylesheet.insertRule("body { -webkit-backdrop-filter: " + rule + "; }", 0);
+    cssRule = stylesheet.cssRules.item(0);
+  
+    shouldBe("cssRule.type", "1");
+
+    declaration = cssRule.style;
+    shouldBe("declaration.length", "0");
+    shouldBe("declaration.getPropertyValue('-webkit-backdrop-filter')", "null");
+}
+
+testInvalidFilterRule("Too many parameters", "url(#a #b)");
+
+testInvalidFilterRule("Length instead of number", "grayscale(10px)");
+testInvalidFilterRule("Too many parameters", "grayscale(0.5 0.5)");
+testInvalidFilterRule("Too many parameters and commas", "grayscale(0.5, 0.5)");
+testInvalidFilterRule("Trailing comma", "grayscale(0.5,)");
+testInvalidFilterRule("Negative parameter", "grayscale(-0.5)");
+testInvalidFilterRule("Negative percent", "grayscale(-10%)");
+testInvalidFilterRule("Parameter out of bounds", "grayscale(1.5)");
+
+testInvalidFilterRule("Too many parameters", "sepia(0.5 0.5 3.0)");
+testInvalidFilterRule("Too many parameters and commas", "sepia(0.1, 0.1)");
+testInvalidFilterRule("Trailing comma", "sepia(0.5,)");
+testInvalidFilterRule("Negative parameter", "sepia(-0.01)");
+testInvalidFilterRule("Negative percent", "sepia(-10%)");
+testInvalidFilterRule("Parameter out of bounds", "sepia(10000)");
+
+testInvalidFilterRule("Length instead of number", "saturate(10px)");
+testInvalidFilterRule("Too many parameters", "saturate(0.5 0.5)");
+testInvalidFilterRule("Too many parameters and commas", "saturate(0.5, 0.5)");
+testInvalidFilterRule("Trailing comma", "saturate(0.5,)");
+testInvalidFilterRule("Negative parameter", "saturate(-0.5)");
+testInvalidFilterRule("Negative percent", "saturate(-10%)");
+
+testInvalidFilterRule("Bare number", "hue-rotate(10)");
+testInvalidFilterRule("Length", "hue-rotate(10px)");
+testInvalidFilterRule("Too many parameters", "hue-rotate(10deg 4)");
+testInvalidFilterRule("Too many parameters and commas", "hue-rotate(10deg, 5deg)");
+testInvalidFilterRule("Trailing comma", "hue-rotate(10deg,)");
+
+testInvalidFilterRule("Length instead of number", "invert(10px)");
+testInvalidFilterRule("Too many parameters", "invert(0.5 0.5)");
+testInvalidFilterRule("Too many parameters and commas", "invert(0.5, 0.5)");
+testInvalidFilterRule("Trailing comma", "invert(0.5,)");
+testInvalidFilterRule("Negative parameter", "invert(-0.5)");
+testInvalidFilterRule("Parameter out of bounds", "invert(1.5)");
+
+testInvalidFilterRule("Length instead of number", "opacity(10px)");
+testInvalidFilterRule("Too many parameters", "opacity(0.5 0.5)");
+testInvalidFilterRule("Too many parameters and commas", "opacity(0.5, 0.5)");
+testInvalidFilterRule("Trailing comma", "opacity(0.5,)");
+testInvalidFilterRule("Negative parameter", "opacity(-0.5)");
+testInvalidFilterRule("Negative percent", "opacity(-10%)");
+testInvalidFilterRule("Parameter out of bounds", "opacity(1.5)");
+
+testInvalidFilterRule("Length instead of number", "brightness(10px)");
+testInvalidFilterRule("Too many parameters", "brightness(0.5 0.5)");
+testInvalidFilterRule("Too many parameters and commas", "brightness(0.5, 0.5)");
+testInvalidFilterRule("Trailing comma", "brightness(0.5,)");
+
+testInvalidFilterRule("Length instead of number", "contrast(10px)");
+testInvalidFilterRule("Too many parameters", "contrast(0.5 0.5)");
+testInvalidFilterRule("Too many parameters and commas", "contrast(0.5, 0.5)");
+testInvalidFilterRule("Trailing comma", "contrast(0.5,)");
+testInvalidFilterRule("Negative parameter", "contrast(-0.5)");
+testInvalidFilterRule("Negative percent", "contrast(-10%)");
+
+testInvalidFilterRule("Bare number", "blur(1)");
+testInvalidFilterRule("Negative number", "blur(-1px)");
+testInvalidFilterRule("Percentage", "blur(10%)");
+testInvalidFilterRule("Too many parameters", "blur(1px 1px)");
+testInvalidFilterRule("Too many parameters and commas", "blur(1em, 1em)");
+testInvalidFilterRule("Commas", "blur(10px, 10px)");
+testInvalidFilterRule("Trailing comma", "blur(1em,)");
+
+testInvalidFilterRule("No values", "drop-shadow()");
+testInvalidFilterRule("Missing lengths", "drop-shadow(red)");
+testInvalidFilterRule("Not enough lengths", "drop-shadow(red 1px)");
+testInvalidFilterRule("Missing units", "drop-shadow(red 1 2 3)");
+testInvalidFilterRule("Inset", "drop-shadow(red 1px 2px 3px inset)");
+testInvalidFilterRule("Too many parameters", "drop-shadow(red 1px 2px 3px 4px)");
+testInvalidFilterRule("Commas", "drop-shadow(red, 1px, 2px, 3px)");
+testInvalidFilterRule("Negative radius", "drop-shadow(10px 10px -1px red)");
+
+successfullyParsed = true;
diff --git a/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-parsing.js b/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property-parsing.js
new file mode 100644 (file)
index 0000000..e0c349d
--- /dev/null
@@ -0,0 +1,460 @@
+description("Test the parsing of the -webkit-backdrop-filter property.");
+
+function jsWrapperClass(node)
+{
+    if (!node)
+        return "[null]";
+    var string = Object.prototype.toString.apply(node);
+    return string.substr(8, string.length - 9);
+}
+
+function shouldBeType(expression, className, prototypeName, constructorName)
+{
+    if (!prototypeName)
+        prototypeName = className + "Prototype";
+    if (!constructorName)
+        constructorName = className + "Constructor";
+    shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
+    shouldBe("jsWrapperClass(" + expression + ".__proto__)", "'" + prototypeName + "'");
+    shouldBe("jsWrapperClass(" + expression + ".constructor)", "'" + constructorName + "'");
+}
+
+// These have to be global for the test helpers to see them.
+var stylesheet, cssRule, declaration, filterRule, subRule;
+var styleElement = document.createElement("style");
+document.head.appendChild(styleElement);
+stylesheet = styleElement.sheet;
+
+function testFilterRule(description, rule, expectedLength, expectedValue, expectedTypes, expectedTexts)
+{
+    debug("");
+    debug(description + " : " + rule);
+
+    stylesheet.insertRule("body { -webkit-backdrop-filter: " + rule + "; }", 0);
+    cssRule = stylesheet.cssRules.item(0);
+
+    shouldBe("cssRule.type", "1");
+
+    declaration = cssRule.style;
+    shouldBe("declaration.length", "1");
+    shouldBe("declaration.getPropertyValue('-webkit-backdrop-filter')", "'" + expectedValue + "'");
+
+    filterRule = declaration.getPropertyCSSValue('-webkit-backdrop-filter');
+    shouldBeType("filterRule", "CSSValueList");
+
+    shouldBe("filterRule.length", "" + expectedLength); // shouldBe expects string arguments
+
+    if (filterRule) {
+        for (var i = 0; i < expectedLength; i++) {
+            subRule = filterRule[i];
+            shouldBe("subRule.operationType", expectedTypes[i]);
+            shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
+        }
+    }
+}
+
+testFilterRule("Basic reference",
+               "url('#a')", 1, "url(#a)",
+               ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+               ["url(#a)"]);
+
+testFilterRule("Bare unquoted reference converting to quoted form",
+               "url(#a)", 1, "url(#a)",
+               ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+               ["url(#a)"]);
+
+testFilterRule("Multiple references",
+               "url('#a') url('#b')", 2, "url(#a) url(#b)",
+               ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE", "WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+               ["url(#a)", "url(#b)"]);
+
+testFilterRule("Reference as 2nd value",
+               "grayscale(1) url('#a')", 2, "grayscale(1) url(#a)",
+               ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
+               ["grayscale(1)", "url(#a)"]);
+
+testFilterRule("Integer value",
+               "grayscale(1)", 1, "grayscale(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["grayscale(1)"]);
+
+testFilterRule("Percentage value",
+               "grayscale(50%)", 1, "grayscale(50%)",
+               ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["grayscale(50%)"]);
+
+testFilterRule("Float value converts to integer",
+               "grayscale(1.0)", 1, "grayscale(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["grayscale(1)"]);
+
+testFilterRule("Zero value",
+               "grayscale(0)", 1, "grayscale(0)",
+               ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["grayscale(0)"]);
+
+testFilterRule("No values",
+               "grayscale()", 1, "grayscale()",
+               ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["grayscale()"]);
+
+testFilterRule("Multiple values",
+               "grayscale(0.5) grayscale(0.25)", 2, "grayscale(0.5) grayscale(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["grayscale(0.5)", "grayscale(0.25)"]);
+
+testFilterRule("Integer value",
+               "sepia(1)", 1, "sepia(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+               ["sepia(1)"]);
+
+testFilterRule("Percentage value",
+               "sepia(50%)", 1, "sepia(50%)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+               ["sepia(50%)"]);
+
+testFilterRule("Float value converts to integer",
+               "sepia(1.0)", 1, "sepia(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+               ["sepia(1)"]);
+
+testFilterRule("Zero value",
+               "sepia(0)", 1, "sepia(0)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+               ["sepia(0)"]);
+
+testFilterRule("No values",
+               "sepia()", 1, "sepia()",
+               ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+               ["sepia()"]);
+
+testFilterRule("Multiple values",
+               "sepia(0.5) sepia(0.25)", 2, "sepia(0.5) sepia(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SEPIA", "WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
+               ["sepia(0.5)", "sepia(0.25)"]);
+
+testFilterRule("Rule combinations",
+               "sepia(0.5) grayscale(0.25)", 2, "sepia(0.5) grayscale(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SEPIA", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["sepia(0.5)", "grayscale(0.25)"]);
+
+testFilterRule("Integer value",
+               "saturate(1)", 1, "saturate(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate(1)"]);
+
+testFilterRule("Percentage value",
+               "saturate(50%)", 1, "saturate(50%)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate(50%)"]);
+
+testFilterRule("Percentage value > 1",
+               "saturate(250%)", 1, "saturate(250%)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate(250%)"]);
+
+testFilterRule("Float value converts to integer",
+               "saturate(1.0)", 1, "saturate(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate(1)"]);
+
+testFilterRule("Input value > 1",
+               "saturate(5.5)", 1, "saturate(5.5)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate(5.5)"]);
+
+testFilterRule("Zero value",
+               "saturate(0)", 1, "saturate(0)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate(0)"]);
+
+testFilterRule("No values",
+               "saturate()", 1, "saturate()",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate()"]);
+
+testFilterRule("Multiple values",
+               "saturate(0.5) saturate(0.25)", 2, "saturate(0.5) saturate(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE", "WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
+               ["saturate(0.5)", "saturate(0.25)"]);
+
+testFilterRule("Rule combinations",
+               "saturate(0.5) grayscale(0.25)", 2, "saturate(0.5) grayscale(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_SATURATE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["saturate(0.5)", "grayscale(0.25)"]);
+
+testFilterRule("Degrees value as integer",
+               "hue-rotate(10deg)", 1, "hue-rotate(10deg)",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+               ["hue-rotate(10deg)"]);
+
+testFilterRule("Degrees float value converts to integer",
+               "hue-rotate(10.0deg)", 1, "hue-rotate(10deg)",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+               ["hue-rotate(10deg)"]);
+
+testFilterRule("Radians value",
+               "hue-rotate(10rad)", 1, "hue-rotate(10rad)",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+               ["hue-rotate(10rad)"]);
+
+testFilterRule("Gradians value",
+               "hue-rotate(10grad)", 1, "hue-rotate(10grad)",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+               ["hue-rotate(10grad)"]);
+
+testFilterRule("Turns value",
+               "hue-rotate(0.5turn)", 1, "hue-rotate(0.5turn)",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+               ["hue-rotate(0.5turn)"]);
+
+testFilterRule("Zero value",
+               "hue-rotate(0)", 1, "hue-rotate(0deg)",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+               ["hue-rotate(0deg)"]);
+
+testFilterRule("No values",
+               "hue-rotate()", 1, "hue-rotate()",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
+               ["hue-rotate()"]);
+
+testFilterRule("Rule combinations",
+               "hue-rotate(10deg) grayscale(0.25)", 2, "hue-rotate(10deg) grayscale(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["hue-rotate(10deg)", "grayscale(0.25)"]);
+
+testFilterRule("Integer value",
+               "invert(1)", 1, "invert(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+               ["invert(1)"]);
+
+testFilterRule("Percentage value",
+               "invert(50%)", 1, "invert(50%)",
+               ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+               ["invert(50%)"]);
+
+testFilterRule("Float value converts to integer",
+               "invert(1.0)", 1, "invert(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+               ["invert(1)"]);
+
+testFilterRule("Zero value",
+               "invert(0)", 1, "invert(0)",
+               ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+               ["invert(0)"]);
+
+testFilterRule("No values",
+               "invert()", 1, "invert()",
+               ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+               ["invert()"]);
+
+testFilterRule("Multiple values",
+               "invert(0.5) invert(0.25)", 2, "invert(0.5) invert(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_INVERT", "WebKitCSSFilterValue.CSS_FILTER_INVERT"],
+               ["invert(0.5)", "invert(0.25)"]);
+
+testFilterRule("Rule combinations",
+               "invert(0.5) grayscale(0.25)", 2, "invert(0.5) grayscale(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_INVERT", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["invert(0.5)", "grayscale(0.25)"]);
+
+testFilterRule("Integer value",
+               "opacity(1)", 1, "opacity(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+               ["opacity(1)"]);
+
+testFilterRule("Percentage value",
+               "opacity(50%)", 1, "opacity(50%)",
+               ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+               ["opacity(50%)"]);
+
+testFilterRule("Float value converts to integer",
+               "opacity(1.0)", 1, "opacity(1)",
+               ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+               ["opacity(1)"]);
+
+testFilterRule("Zero value",
+               "opacity(0)", 1, "opacity(0)",
+               ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+               ["opacity(0)"]);
+
+testFilterRule("No values",
+               "opacity()", 1, "opacity()",
+               ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+               ["opacity()"]);
+
+testFilterRule("Multiple values",
+               "opacity(0.5) opacity(0.25)", 2, "opacity(0.5) opacity(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_OPACITY", "WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
+               ["opacity(0.5)", "opacity(0.25)"]);
+
+testFilterRule("Rule combinations",
+               "opacity(0.5) grayscale(0.25)", 2, "opacity(0.5) grayscale(0.25)",
+               ["WebKitCSSFilterValue.CSS_FILTER_OPACITY", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+               ["opacity(0.5)", "grayscale(0.25)"]);
+
+testFilterRule("Integer value",
+              "brightness(1)", 1, "brightness(1)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness(1)"]);
+
+testFilterRule("Percentage value",
+              "brightness(50%)", 1, "brightness(50%)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness(50%)"]);
+
+testFilterRule("Float value converts to integer",
+              "brightness(1.0)", 1, "brightness(1)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness(1)"]);
+
+testFilterRule("Zero value",
+              "brightness(0)", 1, "brightness(0)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness(0)"]);
+
+testFilterRule("No values",
+              "brightness()", 1, "brightness()",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness()"]);
+
+testFilterRule("Multiple values",
+              "brightness(0.5) brightness(0.25)", 2, "brightness(0.5) brightness(0.25)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS", "WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness(0.5)", "brightness(0.25)"]);
+
+testFilterRule("Rule combinations",
+              "brightness(0.5) grayscale(0.25)", 2, "brightness(0.5) grayscale(0.25)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+              ["brightness(0.5)", "grayscale(0.25)"]);
+
+testFilterRule("Parameter less than -100%",
+              "brightness(-1.1)", 1, "brightness(-1.1)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness(-1.1)"]);
+
+testFilterRule("Parameter more than 100%",
+              "brightness(101%)", 1, "brightness(101%)",
+              ["WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["brightness(101%)"]);
+
+testFilterRule("Rule combinations",
+              "grayscale(0.25) brightness(0.5)", 2, "grayscale(0.25) brightness(0.5)",
+              [ "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_BRIGHTNESS"],
+              ["grayscale(0.25)", "brightness(0.5)"]);
+
+testFilterRule("Integer value",
+              "contrast(1)", 1, "contrast(1)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast(1)"]);
+
+testFilterRule("Percentage value",
+              "contrast(50%)", 1, "contrast(50%)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast(50%)"]);
+
+testFilterRule("Percentage value > 1",
+              "contrast(250%)", 1, "contrast(250%)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast(250%)"]);
+
+testFilterRule("Float value converts to integer",
+              "contrast(1.0)", 1, "contrast(1)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast(1)"]);
+
+testFilterRule("Zero value",
+              "contrast(0)", 1, "contrast(0)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast(0)"]);
+
+testFilterRule("No values",
+              "contrast()", 1, "contrast()",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast()"]);
+
+testFilterRule("Value greater than one",
+              "contrast(2)", 1, "contrast(2)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast(2)"]);
+
+testFilterRule("Multiple values",
+              "contrast(0.5) contrast(0.25)", 2, "contrast(0.5) contrast(0.25)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST", "WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["contrast(0.5)", "contrast(0.25)"]);
+
+testFilterRule("Rule combinations",
+              "contrast(0.5) grayscale(0.25)", 2, "contrast(0.5) grayscale(0.25)",
+              ["WebKitCSSFilterValue.CSS_FILTER_CONTRAST", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
+              ["contrast(0.5)", "grayscale(0.25)"]);
+
+testFilterRule("Rule combinations",
+              "grayscale(0.25) contrast(0.5)", 2, "grayscale(0.25) contrast(0.5)",
+              [ "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_CONTRAST"],
+              ["grayscale(0.25)", "contrast(0.5)"]);
+
+testFilterRule("One zero to px",
+               "blur(0)", 1, "blur(0px)",
+               ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
+               ["blur(0px)"]);
+
+testFilterRule("One length",
+               "blur(10px)", 1, "blur(10px)",
+               ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
+               ["blur(10px)"]);
+
+testFilterRule("No values",
+               "blur()", 1, "blur()",
+               ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
+               ["blur()"]);
+
+testFilterRule("Color then three values",
+              "drop-shadow(red 1px 2px 3px)", 1, "drop-shadow(red 1px 2px 3px)",
+              ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+              ["drop-shadow(red 1px 2px 3px)"]);
+
+testFilterRule("Three values then color",
+              "drop-shadow(1px 2px 3px red)", 1, "drop-shadow(red 1px 2px 3px)",
+              ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+              ["drop-shadow(red 1px 2px 3px)"]);
+
+testFilterRule("Color then three values with zero length",
+              "drop-shadow(#abc 0 0 0)", 1, "drop-shadow(rgb(170, 187, 204) 0px 0px 0px)",
+              ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+              ["drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"]);
+
+testFilterRule("Three values with zero length",
+              "drop-shadow(0 0 0)", 1, "drop-shadow(0px 0px 0px)",
+              ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+              ["drop-shadow(0px 0px 0px)"]);
+
+testFilterRule("Two values no color",
+              "drop-shadow(1px 2px)", 1, "drop-shadow(1px 2px)",
+              ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
+              ["drop-shadow(1px 2px)"]);
+
+testFilterRule("Multiple operations",
+               "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px) drop-shadow(green 1px 2px 3px)", 8,
+               "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) blur(5px) drop-shadow(green 1px 2px 3px)",
+               [
+                   "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE",
+                   "WebKitCSSFilterValue.CSS_FILTER_SEPIA",
+                   "WebKitCSSFilterValue.CSS_FILTER_SATURATE",
+                   "WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE",
+                   "WebKitCSSFilterValue.CSS_FILTER_INVERT",
+                   "WebKitCSSFilterValue.CSS_FILTER_OPACITY",
+                   "WebKitCSSFilterValue.CSS_FILTER_BLUR",
+                   "WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"
+               ],
+               [
+                   "grayscale(0.5)",
+                   "sepia(0.25)",
+                   "saturate(0.75)",
+                   "hue-rotate(35deg)",
+                   "invert(0.2)",
+                   "opacity(0.9)",
+                   "blur(5px)",
+                   "drop-shadow(green 1px 2px 3px)"
+               ]);
+
+successfullyParsed = true;
diff --git a/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property.js b/LayoutTests/css3/filters/backdrop/script-tests/backdropfilter-property.js
new file mode 100644 (file)
index 0000000..7b67a06
--- /dev/null
@@ -0,0 +1,18 @@
+description("Test the parsing of the -webkit-backdrop-filter property.");
+
+var styleElement = document.createElement("style");
+document.head.appendChild(styleElement);
+var stylesheet = styleElement.sheet;
+
+// add a -webkit-filter property to the start of the stylesheet
+stylesheet.addRule("body", "-webkit-backdrop-filter: hue-rotate(120deg)", 0);
+
+var cssRule = stylesheet.cssRules.item(0);
+
+shouldBe("cssRule.type", "1");
+
+var declaration = cssRule.style;
+shouldBe("declaration.length", "1");
+shouldBe("declaration.getPropertyValue('-webkit-backdrop-filter')", "'hue-rotate(120deg)'");
+
+successfullyParsed = true;
index ac74472..6897b88 100644 (file)
@@ -446,6 +446,9 @@ media/encrypted-media/encrypted-media-events.html [ WontFix ]
 media/encrypted-media/encrypted-media-not-loaded.html [ WontFix ]
 media/encrypted-media/encrypted-media-syntax.html [ WontFix ]
 
+# No support for Filters Level 2 on EFL yet
+Bug(EFL) css3/filters/backdrop [ Skip ]
+
 #////////////////////////////////////////////////////////////////////////////////////////
 # CRASHES
 #////////////////////////////////////////////////////////////////////////////////////////
index 0d22e93..d10168f 100644 (file)
@@ -443,6 +443,9 @@ webkit.org/b/131347 svg/text/hidpi-text-selection-rect-position.html [ ImageOnly
 
 webkit.org/b/133806 svg/masking/mask-transformed-text-missing.svg [ ImageOnlyFailure ]
 
+# No support for Filters Level 2 on GTK yet
+Bug(GTK) css3/filters/backdrop [ Skip ]
+
 #////////////////////////////////////////////////////////////////////////////////////////
 # End of Expected failures
 #////////////////////////////////////////////////////////////////////////////////////////
index ccb57e6..d4db9f2 100644 (file)
@@ -1,2 +1,5 @@
 # This test should only be run on Yosemite or later.
 platform/mac/editing/input/undo-grouping-on-text-insertion.html [ Skip ]
+
+# Backdrop filters are not supported on Mavericks
+css3/filters/backdrop [ Skip ]
index 6dbf8cb..3bdbcab 100644 (file)
@@ -44,6 +44,7 @@ css3/filters/effect-sepia-hw.html
 css3/filters/animation-from-initial-values-with-color-matrix.html
 css3/filters/filter-is-on-subpixel-position.html
 css3/masking/clip-path-filter.html
+css3/filters/backdrop
 
 # Remove from list after enabling CANVAS_PATH
 fast/canvas/canvas-path-constructors.html
index 790fd62..39d41c5 100644 (file)
@@ -1,3 +1,117 @@
+2014-11-06  Dean Jackson  <dino@apple.com>
+
+        [filters2] Support for backdrop-filter
+        https://bugs.webkit.org/show_bug.cgi?id=138384
+        <rdar://problem/18874494>
+
+        Reviewed by Simon Fraser.
+
+        Take 2!! Previous patch was rolled out.
+
+        Add prototype support for backdrop-filter
+        http://dev.w3.org/fxtf/filters-2/#BackdropFilterProperty
+
+        This adds support for parsing the new CSS property, adding
+        the value to RenderStyle, noticing that on the layer tree,
+        and the platform code in GraphicsLayer to render a backdrop
+        and apply an effect to the result.
+
+        Some things are missing:
+        - animation of the backdrop-filter is not yet supported
+        - backdrops will not work in cloned layers yet (e.g. reflections)
+
+        Tests: css3/filters/backdrop/backdropfilter-property-computed-style.html
+               css3/filters/backdrop/backdropfilter-property-parsing-invalid.html
+               css3/filters/backdrop/backdropfilter-property-parsing.html
+               css3/filters/backdrop/backdropfilter-property.html
+               css3/filters/backdrop/effect-hw.html
+
+        * WebCore.exp.in: Export the setBackdropFilters method so it can
+        be used from WebKit.
+
+        * css/CSSComputedStyleDeclaration.cpp: New property name.
+        (WebCore::isLayoutDependent):
+        (WebCore::ComputedStyleExtractor::propertyValue): Use the existing valueForFilter method.
+
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue): Piggyback on the filter parser.
+
+        * css/CSSPropertyNames.in: Add -webkit-backdrop-filter.
+
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::adjustRenderStyle): Add test for backdrop.
+        (WebCore::StyleResolver::applyProperty): Support new property.
+
+        * platform/graphics/GraphicsLayer.h:
+        (WebCore::GraphicsLayer::needsBackdrop): New method to test for existence of values.
+        (WebCore::GraphicsLayer::backdropFilters): Keeps the list of filters.
+        (WebCore::GraphicsLayer::setBackdropFilters):
+        (WebCore::GraphicsLayer::clearBackdropFilters):
+
+        * platform/graphics/ca/GraphicsLayerCA.cpp: This adds a new m_backdropLayer CALayer
+        that will sit behind the contents layer and provide the element's backdrop.
+        (WebCore::GraphicsLayerCA::willBeDestroyed):
+        (WebCore::GraphicsLayerCA::moveOrCopyAnimations):
+        (WebCore::GraphicsLayerCA::setBackdropFilters): Set a custom appearance so
+        remote layer hosts will notice the special layer. Also set the actual
+        layer properties.
+        (WebCore::GraphicsLayerCA::addAnimation): Remove whitespace.
+        (WebCore::GraphicsLayerCA::commitLayerChangesBeforeSublayers): Update backdrop if necessary.
+        (WebCore::GraphicsLayerCA::updateLayerNames): Give the new layer a name.
+        (WebCore::GraphicsLayerCA::updateSublayerList):
+        (WebCore::GraphicsLayerCA::updateGeometry): Make the backdrop layer match the contents
+        layer geometry.
+        (WebCore::GraphicsLayerCA::updateBackdropFilters): Create the backdrop layer if necessary,
+        and copy the filter values to any clones.
+        (WebCore::GraphicsLayerCA::ensureStructuralLayer): We need a structural layer if we
+        have backdrop filters.
+        (WebCore::GraphicsLayerCA::structuralLayerPurpose):
+        (WebCore::GraphicsLayerCA::createAnimationFromKeyframes):
+        (WebCore::GraphicsLayerCA::swapFromOrToTiledLayer):
+        * platform/graphics/ca/GraphicsLayerCA.h: New StructuralLayerPurpose, new LayerChangeFlag.
+
+        * platform/graphics/ca/PlatformCALayer.h: New LayerType.
+
+        * platform/graphics/ca/mac/PlatformCALayerMac.mm: Define CABackdropLayer.
+        (PlatformCALayerMac::PlatformCALayerMac): Create the correct CALayer type.
+
+        * rendering/RenderElement.h:
+        (WebCore::RenderElement::createsGroup):
+        (WebCore::RenderElement::hasBackdropFilter): This method is always around, but
+        only can return true when FILTERS_LEVEL_2 is enabled.
+
+        * rendering/RenderLayer.cpp:
+        (WebCore::RenderLayer::paintsWithFilters): Remove an unnecessary comment.
+        (WebCore::RenderLayer::calculateClipRects):
+
+        * rendering/RenderLayer.h: Add hasBackdropFilter.
+
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::RenderLayerBacking):
+        (WebCore::RenderLayerBacking::createPrimaryGraphicsLayer): Update the backdrop filters.
+        (WebCore::RenderLayerBacking::updateBackdropFilters): Set the filters on the GraphicsLayer.
+        (WebCore::RenderLayerBacking::updateGeometry):
+        * rendering/RenderLayerBacking.h:
+
+        * rendering/RenderLayerCompositor.cpp:
+        (WebCore::RenderLayerCompositor::requiresOwnBackingStore): Needs backingstore if it has a backdrop filter.
+        (WebCore::RenderLayerCompositor::reasonsForCompositing):
+        (WebCore::RenderLayerCompositor::requiresCompositingForFilters): Return early if we have
+        a backdrop filter, because currently we absolutely require compositing.
+
+        * rendering/RenderLayerModelObject.cpp:
+        (WebCore::RenderLayerModelObject::styleWillChange): Add hasBackdropFilter().
+
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::changeRequiresLayout): Check backdrops for change.
+
+        * rendering/style/RenderStyle.h: Add the backdropFilter style stuff.
+        * rendering/style/StyleRareNonInheritedData.cpp:
+        (WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
+        (WebCore::StyleRareNonInheritedData::operator==):
+        (WebCore::StyleRareNonInheritedData::hasBackdropFilters):
+        * rendering/style/StyleRareNonInheritedData.h:
+
 2014-11-06  Benjamin Poulain  <bpoulain@apple.com>
 
         Give pseudo elements the correct specificity
index 3585583..0518269 100644 (file)
@@ -549,6 +549,7 @@ __ZN7WebCore15GraphicsContext9translateEff
 __ZN7WebCore15GraphicsContextC1EP9CGContext
 __ZN7WebCore15GraphicsContextD1Ev
 __ZN7WebCore15GraphicsLayerCA10initializeEv
+__ZN7WebCore15GraphicsLayerCA18setBackdropFiltersERKNS_16FilterOperationsE
 __ZN7WebCore15GraphicsLayerCA10setFiltersERKNS_16FilterOperationsE
 __ZN7WebCore15GraphicsLayerCA10setOpacityEf
 __ZN7WebCore15GraphicsLayerCA11setChildrenERKN3WTF6VectorIPNS_13GraphicsLayerELm0ENS1_15CrashOnOverflowEEE
index 891f401..10039b7 100644 (file)
@@ -291,6 +291,9 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyJustifyContent,
     CSSPropertyWebkitJustifySelf,
     CSSPropertyWebkitFilter,
+#if ENABLE(FILTERS_LEVEL_2)
+    CSSPropertyWebkitBackdropFilter,
+#endif
     CSSPropertyWebkitFontKerning,
     CSSPropertyWebkitFontSmoothing,
     CSSPropertyWebkitFontVariantLigatures,
@@ -1599,6 +1602,9 @@ static bool isLayoutDependent(CSSPropertyID propertyID, RenderStyle* style, Rend
     case CSSPropertyWebkitTransformOrigin:
     case CSSPropertyWebkitTransform:
     case CSSPropertyWebkitFilter:
+#if ENABLE(FILTERS_LEVEL_2)
+    case CSSPropertyWebkitBackdropFilter:
+#endif
         return true;
     case CSSPropertyMargin: {
         if (!renderer || !renderer->isBox())
@@ -2891,6 +2897,10 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
 #endif
         case CSSPropertyWebkitFilter:
             return valueForFilter(style.get(), style->filter());
+#if ENABLE(FILTERS_LEVEL_2)
+        case CSSPropertyWebkitBackdropFilter:
+            return valueForFilter(style.get(), style->backdropFilter());
+#endif
 #if ENABLE(CSS_COMPOSITING)
         case CSSPropertyMixBlendMode:
             return cssValuePool().createValue(style->blendMode());
index c7c4f64..5df87ea 100644 (file)
@@ -2455,6 +2455,9 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
         validPrimitive = validUnit(value, FInteger | FNonNeg, CSSStrictMode) && value->fValue;
         break;
     case CSSPropertyWebkitFilter:
+#if ENABLE(FILTERS_LEVEL_2)
+    case CSSPropertyWebkitBackdropFilter:
+#endif
         if (id == CSSValueNone)
             validPrimitive = true;
         else {
index 320ce61..15e6d3e 100644 (file)
@@ -371,6 +371,9 @@ flex-wrap [NewStyleBuilder]
 -webkit-flex-wrap = flex-wrap
 justify-content [NewStyleBuilder]
 -webkit-justify-content = justify-content
+#if defined(ENABLE_FILTERS_LEVEL_2) && ENABLE_FILTERS_LEVEL_2
+-webkit-backdrop-filter
+#endif
 -webkit-justify-self
 -webkit-font-size-delta
 #if defined(ENABLE_CSS_GRID_LAYOUT) && ENABLE_CSS_GRID_LAYOUT
index 00d470e..2cd7ce5 100644 (file)
@@ -1259,6 +1259,9 @@ void StyleResolver::adjustRenderStyle(RenderStyle& style, const RenderStyle& par
         || style.clipPath()
         || style.boxReflect()
         || style.hasFilter()
+#if ENABLE(FILTERS_LEVEL_2)
+        || style.hasBackdropFilter()
+#endif
         || style.hasBlendMode()
         || style.hasIsolation()
         || style.position() == StickyPosition
@@ -1352,6 +1355,9 @@ void StyleResolver::adjustRenderStyle(RenderStyle& style, const RenderStyle& par
     if (style.preserves3D() && (style.overflowX() != OVISIBLE
         || style.overflowY() != OVISIBLE
         || style.hasFilter()
+#if ENABLE(FILTERS_LEVEL_2)
+        || style.hasBackdropFilter()
+#endif
         || style.hasBlendMode()))
         style.setTransformStyle3D(TransformStyle3DFlat);
 
@@ -2702,6 +2708,16 @@ void StyleResolver::applyProperty(CSSPropertyID id, CSSValue* value)
         return;
     }
 
+#if ENABLE(FILTERS_LEVEL_2)
+    case CSSPropertyWebkitBackdropFilter: {
+        HANDLE_INHERIT_AND_INITIAL(backdropFilter, BackdropFilter);
+        FilterOperations operations;
+        if (createFilterOperations(value, operations))
+            state.style()->setBackdropFilter(operations);
+        return;
+    }
+#endif
+
 #if ENABLE(CSS_GRID_LAYOUT)
     case CSSPropertyWebkitGridAutoColumns: {
         HANDLE_INHERIT_AND_INITIAL(gridAutoColumns, GridAutoColumns);
index 3639798..9779de9 100644 (file)
@@ -362,7 +362,11 @@ void KeyframeAnimation::checkForMatchingFilterFunctionLists()
 {
     m_filterFunctionListsMatch = false;
 
+#if ENABLE(FILTERS_LEVEL_2)
+    if (m_keyframes.size() < 2 || (!m_keyframes.containsProperty(CSSPropertyWebkitFilter) && !m_keyframes.containsProperty(CSSPropertyWebkitBackdropFilter)))
+#else
     if (m_keyframes.size() < 2 || !m_keyframes.containsProperty(CSSPropertyWebkitFilter))
+#endif
         return;
 
     // Empty filters match anything, so find the first non-empty entry as the reference
index 1e74cae..32ad37f 100644 (file)
@@ -325,6 +325,8 @@ public:
     bool acceleratesDrawing() const { return m_acceleratesDrawing; }
     virtual void setAcceleratesDrawing(bool b) { m_acceleratesDrawing = b; }
 
+    bool needsBackdrop() const { return !m_backdropFilters.isEmpty(); }
+
     // The color used to paint the layer background. Pass an invalid color to remove it.
     // Note that this covers the entire layer. Use setContentsToSolidColor() if the color should
     // only cover the contentsRect.
@@ -342,10 +344,12 @@ public:
     virtual void setOpacity(float opacity) { m_opacity = opacity; }
 
     const FilterOperations& filters() const { return m_filters; }
-    
-    // Returns true if filter can be rendered by the compositor
+    // Returns true if filter can be rendered by the compositor.
     virtual bool setFilters(const FilterOperations& filters) { m_filters = filters; return true; }
 
+    const FilterOperations& backdropFilters() const { return m_backdropFilters; }
+    virtual bool setBackdropFilters(const FilterOperations& filters) { m_backdropFilters = filters; return true; }
+
 #if ENABLE(CSS_COMPOSITING)
     BlendMode blendMode() const { return m_blendMode; }
     virtual void setBlendMode(BlendMode blendMode) { m_blendMode = blendMode; }
@@ -518,6 +522,7 @@ protected:
     // when compositing is not done in hardware. It is not virtual, so the caller
     // needs to notifiy the change to the platform layer as needed.
     void clearFilters() { m_filters.clear(); }
+    void clearBackdropFilters() { m_backdropFilters.clear(); }
 
     // Given a KeyframeValueList containing filterOperations, return true if the operations are valid.
     static int validateFilterOperations(const KeyframeValueList&);
@@ -564,6 +569,7 @@ protected:
     float m_zPosition;
     
     FilterOperations m_filters;
+    FilterOperations m_backdropFilters;
 
 #if ENABLE(CSS_COMPOSITING)
     BlendMode m_blendMode;
index c54fa9d..346a8a5 100644 (file)
@@ -302,7 +302,7 @@ bool GraphicsLayerCA::filtersCanBeComposited(const FilterOperations& filters)
     return PlatformCALayerWin::filtersCanBeComposited(filters);
 #endif
 }
-    
+
 PassRefPtr<PlatformCALayer> GraphicsLayerCA::createPlatformCALayer(PlatformCALayer::LayerType layerType, PlatformCALayerClient* owner)
 {
 #if PLATFORM(COCOA)
@@ -376,7 +376,10 @@ void GraphicsLayerCA::willBeDestroyed()
         
     if (m_structuralLayer)
         m_structuralLayer->setOwner(nullptr);
-    
+
+    if (m_backdropLayer)
+        m_backdropLayer->setOwner(nullptr);
+
     removeCloneLayers();
 
     GraphicsLayer::willBeDestroyed();
@@ -567,7 +570,7 @@ void GraphicsLayerCA::moveOrCopyAnimations(MoveOrCopy operation, PlatformCALayer
         size_t numAnimations = propertyAnimations.size();
         for (size_t i = 0; i < numAnimations; ++i) {
             const LayerPropertyAnimation& currAnimation = propertyAnimations[i];
-            
+
             if (currAnimation.m_property == AnimatedPropertyWebkitTransform || currAnimation.m_property == AnimatedPropertyOpacity
                     || currAnimation.m_property == AnimatedPropertyBackgroundColor
                     || currAnimation.m_property == AnimatedPropertyWebkitFilter
@@ -685,6 +688,26 @@ bool GraphicsLayerCA::setFilters(const FilterOperations& filterOperations)
     return canCompositeFilters;
 }
 
+bool GraphicsLayerCA::setBackdropFilters(const FilterOperations& filterOperations)
+{
+    bool canCompositeFilters = filtersCanBeComposited(filterOperations);
+
+    if (m_backdropFilters == filterOperations)
+        return canCompositeFilters;
+
+    // Filters cause flattening, so we should never have filters on a layer with preserves3D().
+    ASSERT(!filterOperations.size() || !preserves3D());
+
+    if (canCompositeFilters)
+        GraphicsLayer::setBackdropFilters(filterOperations);
+    else {
+        // FIXME: This would clear the backdrop filters if we had a software implementation.
+        clearBackdropFilters();
+    }
+    noteLayerPropertyChanged(BackdropFiltersChanged);
+    return canCompositeFilters;
+}
+
 #if ENABLE(CSS_COMPOSITING)
 void GraphicsLayerCA::setBlendMode(BlendMode blendMode)
 {
@@ -799,7 +822,7 @@ bool GraphicsLayerCA::addAnimation(const KeyframeValueList& valueList, const Flo
 
     if (createdAnimations)
         noteLayerPropertyChanged(AnimationChanged);
-        
+
     return createdAnimations;
 }
 
@@ -1265,7 +1288,7 @@ void GraphicsLayerCA::commitLayerChangesBeforeSublayers(CommitState& commitState
         swapFromOrToTiledLayer(needTiledLayer);
 
     // Need to handle Preserves3DChanged first, because it affects which layers subsequent properties are applied to
-    if (m_uncommittedChanges & (Preserves3DChanged | ReplicatedLayerChanged))
+    if (m_uncommittedChanges & (Preserves3DChanged | ReplicatedLayerChanged | BackdropFiltersChanged))
         updateStructuralLayer();
 
     if (m_uncommittedChanges & GeometryChanged)
@@ -1314,6 +1337,9 @@ void GraphicsLayerCA::commitLayerChangesBeforeSublayers(CommitState& commitState
     if (m_uncommittedChanges & FiltersChanged)
         updateFilters();
 
+    if (m_uncommittedChanges & BackdropFiltersChanged)
+        updateBackdropFilters();
+
 #if ENABLE(CSS_COMPOSITING)
     if (m_uncommittedChanges & BlendModeChanged)
         updateBlendMode();
@@ -1400,6 +1426,9 @@ void GraphicsLayerCA::updateLayerNames()
     case StructuralLayerForReplicaFlattening:
         m_structuralLayer->setName("Replica flattening layer " + name());
         break;
+    case StructuralLayerForBackdrop:
+        m_structuralLayer->setName("Backdrop hosting layer " + name());
+        break;
     case NoStructuralLayer:
         break;
     }
@@ -1424,6 +1453,9 @@ void GraphicsLayerCA::updateSublayerList(bool maxLayerDepthReached)
         primaryLayerChildren.appendVector(*customSublayers);
 
     if (m_structuralLayer) {
+        if (m_backdropLayer)
+            structuralLayerChildren.append(m_backdropLayer);
+
         if (m_replicaLayer)
             structuralLayerChildren.append(downcast<GraphicsLayerCA>(*m_replicaLayer).primaryLayer());
     
@@ -1510,6 +1542,12 @@ void GraphicsLayerCA::updateGeometry(float pageScaleFactor, const FloatPoint& po
     m_layer->setBounds(adjustedBounds);
     m_layer->setAnchorPoint(scaledAnchorPoint);
 
+    if (m_backdropLayer) {
+        m_backdropLayer->setPosition(adjustedPosition);
+        m_backdropLayer->setBounds(adjustedBounds);
+        m_backdropLayer->setAnchorPoint(scaledAnchorPoint);
+    }
+
     if (LayerMap* layerCloneMap = m_layerClones.get()) {
         LayerMap::const_iterator end = layerCloneMap->end();
         for (LayerMap::const_iterator it = layerCloneMap->begin(); it != end; ++it) {
@@ -1640,6 +1678,27 @@ void GraphicsLayerCA::updateFilters()
     }
 }
 
+void GraphicsLayerCA::updateBackdropFilters()
+{
+    if (m_backdropFilters.isEmpty()) {
+        if (m_backdropLayer) {
+            m_backdropLayer->removeFromSuperlayer();
+            m_backdropLayer->setOwner(nullptr);
+            m_backdropLayer = nullptr;
+        }
+        return;
+    }
+
+    if (!m_backdropLayer) {
+        m_backdropLayer = createPlatformCALayer(PlatformCALayer::LayerTypeBackdropLayer, this);
+        m_backdropLayer->setPosition(m_layer->position());
+        m_backdropLayer->setBounds(m_layer->bounds());
+        m_backdropLayer->setAnchorPoint(m_layer->anchorPoint());
+        m_backdropLayer->setMasksToBounds(true);
+    }
+    m_backdropLayer->setFilters(m_backdropFilters);
+}
+
 #if ENABLE(CSS_COMPOSITING)
 void GraphicsLayerCA::updateBlendMode()
 {
@@ -1670,6 +1729,7 @@ void GraphicsLayerCA::ensureStructuralLayer(StructuralLayerPurpose purpose)
         | ChildrenChanged
         | BackfaceVisibilityChanged
         | FiltersChanged
+        | BackdropFiltersChanged
         | OpacityChanged;
 
     if (purpose == NoStructuralLayer) {
@@ -1685,7 +1745,7 @@ void GraphicsLayerCA::ensureStructuralLayer(StructuralLayerPurpose purpose)
             moveOrCopyAnimations(Move, m_structuralLayer.get(), m_layer.get());
 
             // Release the structural layer.
-            m_structuralLayer = 0;
+            m_structuralLayer = nullptr;
 
             m_uncommittedChanges |= structuralLayerChangeFlags;
         }
@@ -1749,7 +1809,10 @@ GraphicsLayerCA::StructuralLayerPurpose GraphicsLayerCA::structuralLayerPurpose(
     
     if (isReplicated())
         return StructuralLayerForReplicaFlattening;
-    
+
+    if (needsBackdrop())
+        return StructuralLayerForBackdrop;
+
     return NoStructuralLayer;
 }
 
@@ -2262,7 +2325,7 @@ void GraphicsLayerCA::updateContentsNeedsDisplay()
 bool GraphicsLayerCA::createAnimationFromKeyframes(const KeyframeValueList& valueList, const Animation* animation, const String& animationName, double timeOffset)
 {
     ASSERT(valueList.property() != AnimatedPropertyWebkitTransform && (!supportsAcceleratedFilterAnimations() || valueList.property() != AnimatedPropertyWebkitFilter));
-    
+
     bool isKeyframe = valueList.size() > 2;
     bool valuesOK;
     
@@ -2999,6 +3062,7 @@ void GraphicsLayerCA::swapFromOrToTiledLayer(bool useTiledLayer)
         | ContentsScaleChanged
         | AcceleratesDrawingChanged
         | FiltersChanged
+        | BackdropFiltersChanged
         | MaskLayerChanged
         | OpacityChanged
         | DebugIndicatorsChanged;
index 750e9f9..ffb8d92 100644 (file)
@@ -105,6 +105,8 @@ public:
     WEBCORE_EXPORT virtual bool setFilters(const FilterOperations&) override;
     virtual bool filtersCanBeComposited(const FilterOperations&);
 
+    WEBCORE_EXPORT virtual bool setBackdropFilters(const FilterOperations&) override;
+
 #if ENABLE(CSS_COMPOSITING)
     WEBCORE_EXPORT virtual void setBlendMode(BlendMode) override;
 #endif
@@ -202,6 +204,7 @@ private:
     WEBCORE_EXPORT void layerDidDisplay(PlatformCALayer*);
     void updateOpacityOnLayer();
     void updateFilters();
+    void updateBackdropFilters();
 
 #if ENABLE(CSS_COMPOSITING)
     void updateBlendMode();
@@ -383,7 +386,8 @@ private:
     enum StructuralLayerPurpose {
         NoStructuralLayer = 0,
         StructuralLayerForPreserves3D,
-        StructuralLayerForReplicaFlattening
+        StructuralLayerForReplicaFlattening,
+        StructuralLayerForBackdrop
     };
     void ensureStructuralLayer(StructuralLayerPurpose);
     StructuralLayerPurpose structuralLayerPurpose() const;
@@ -427,12 +431,13 @@ private:
         ContentsVisibilityChanged = 1LLU << 24,
         VisibleRectChanged = 1LLU << 25,
         FiltersChanged = 1LLU << 26,
-        TilingAreaChanged = 1LLU << 27,
-        TilesAdded = 1LLU < 28,
-        DebugIndicatorsChanged = 1LLU << 29,
-        CustomAppearanceChanged = 1LLU << 30,
-        CustomBehaviorChanged = 1LLU << 31,
-        BlendModeChanged = 1LLU << 32
+        BackdropFiltersChanged = 1LLU << 27,
+        TilingAreaChanged = 1LLU << 28,
+        TilesAdded = 1LLU < 29,
+        DebugIndicatorsChanged = 1LLU << 30,
+        CustomAppearanceChanged = 1LLU << 31,
+        CustomBehaviorChanged = 1LLU << 32,
+        BlendModeChanged = 1LLU << 33
     };
     typedef uint64_t LayerChangeFlags;
     enum ScheduleFlushOrNot { ScheduleFlush, DontScheduleFlush };
@@ -446,6 +451,7 @@ private:
     RefPtr<PlatformCALayer> m_structuralLayer; // A layer used for structural reasons, like preserves-3d or replica-flattening. Is the parent of m_layer.
     RefPtr<PlatformCALayer> m_contentsClippingLayer; // A layer used to clip inner content
     RefPtr<PlatformCALayer> m_contentsLayer; // A layer used for inner content, like image and video
+    RefPtr<PlatformCALayer> m_backdropLayer; // The layer used for backdrop rendering, if necessary.
 
     // References to clones of our layers, for replicated layers.
     OwnPtr<LayerMap> m_layerClones;
index caa5a87..888d87c 100644 (file)
@@ -77,6 +77,7 @@ public:
         LayerTypeRootLayer,
         LayerTypeAVPlayerLayer,
         LayerTypeWebGLLayer,
+        LayerTypeBackdropLayer,
         LayerTypeCustom
     };
     enum FilterType { Linear, Nearest, Trilinear };
index 1c153f9..f69b620 100644 (file)
 #import "ThemeMac.h"
 #endif
 
+#if ENABLE(FILTERS_LEVEL_2)
+@interface CABackdropLayer : CALayer
+@end
+#endif
 
 SOFT_LINK_FRAMEWORK_OPTIONAL(AVFoundation)
 SOFT_LINK_CLASS(AVFoundation, AVPlayerLayer)
@@ -233,6 +237,14 @@ PlatformCALayerMac::PlatformCALayerMac(LayerType layerType, PlatformCALayerClien
     case LayerTypeTransformLayer:
         layerClass = [CATransformLayer class];
         break;
+    case LayerTypeBackdropLayer:
+#if ENABLE(FILTERS_LEVEL_2)
+        layerClass = [CABackdropLayer class];
+#else
+        ASSERT_NOT_REACHED();
+        layerClass = [CALayer class];
+#endif
+        break;
     case LayerTypeWebTiledLayer:
         ASSERT_NOT_REACHED();
         break;
index 277823f..52f228b 100644 (file)
@@ -122,7 +122,7 @@ public:
     bool borderImageIsLoadedAndCanBeRendered() const;
 
     // Returns true if this renderer requires a new stacking context.
-    bool createsGroup() const { return isTransparent() || hasMask() || hasFilter() || hasBlendMode(); }
+    bool createsGroup() const { return isTransparent() || hasMask() || hasFilter() || hasBackdropFilter() || hasBlendMode(); }
 
     bool isTransparent() const { return style().opacity() < 1.0f; }
     float opacity() const { return style().opacity(); }
@@ -137,6 +137,14 @@ public:
     bool hasHiddenBackface() const { return style().backfaceVisibility() == BackfaceVisibilityHidden; }
 
     bool hasFilter() const { return style().hasFilter(); }
+    bool hasBackdropFilter() const
+    {
+#if ENABLE(FILTERS_LEVEL_2)
+        return style().hasBackdropFilter();
+#else
+        return false;
+#endif
+    }
 
 #if ENABLE(CSS_COMPOSITING)
     bool hasBlendMode() const { return style().hasBlendMode(); }
index 8bc3afd..00a0097 100644 (file)
@@ -315,9 +315,6 @@ bool RenderLayer::canRender3DTransforms() const
 
 bool RenderLayer::paintsWithFilters() const
 {
-    // FIXME: Eventually there will be cases where we paint with filters even without accelerated compositing,
-    // and this whole function won't be inside the #if below.
-
     if (!renderer().hasFilter())
         return false;
         
@@ -6218,6 +6215,7 @@ bool RenderLayer::shouldBeNormalFlowOnly() const
         && !renderer().hasTransform()
         && !renderer().hasClipPath()
         && !renderer().hasFilter()
+        && !renderer().hasBackdropFilter()
 #if PLATFORM(IOS)
         && !hasAcceleratedTouchScrolling()
 #endif
index 4fe6d61..4109387 100644 (file)
@@ -791,6 +791,14 @@ public:
 
     void filterNeedsRepaint();
     bool hasFilter() const { return renderer().hasFilter(); }
+    bool hasBackdropFilter() const
+    {
+#if ENABLE(FILTERS_LEVEL_2)
+        return renderer().hasBackdropFilter();
+#else
+        return false;
+#endif
+    }
 
 #if ENABLE(CSS_COMPOSITING)
     bool hasBlendMode() const { return renderer().hasBlendMode(); }
index b42bf51..845b852 100644 (file)
@@ -112,6 +112,9 @@ RenderLayerBacking::RenderLayerBacking(RenderLayer& layer)
     , m_usingTiledCacheLayer(false)
     , m_requiresOwnBackingStore(true)
     , m_canCompositeFilters(false)
+#if ENABLE(FILTERS_LEVEL_2)
+    , m_canCompositeBackdropFilters(false)
+#endif
     , m_backgroundLayerPaintsFixedRootBackground(false)
 {
     Page* page = renderer().frame().page();
@@ -311,6 +314,9 @@ void RenderLayerBacking::createPrimaryGraphicsLayer()
     updateOpacity(renderer().style());
     updateTransform(renderer().style());
     updateFilters(renderer().style());
+#if ENABLE(FILTERS_LEVEL_2)
+    updateBackdropFilters(renderer().style());
+#endif
 #if ENABLE(CSS_COMPOSITING)
     updateBlendMode(renderer().style());
 #endif
@@ -375,6 +381,13 @@ void RenderLayerBacking::updateFilters(const RenderStyle& style)
     m_canCompositeFilters = m_graphicsLayer->setFilters(style.filter());
 }
 
+#if ENABLE(FILTERS_LEVEL_2)
+void RenderLayerBacking::updateBackdropFilters(const RenderStyle& style)
+{
+    m_canCompositeBackdropFilters = m_graphicsLayer->setBackdropFilters(style.backdropFilter());
+}
+#endif
+
 #if ENABLE(CSS_COMPOSITING)
 void RenderLayerBacking::updateBlendMode(const RenderStyle& style)
 {
@@ -652,7 +665,9 @@ void RenderLayerBacking::updateGeometry()
         updateOpacity(style);
 
     updateFilters(style);
-
+#if ENABLE(FILTERS_LEVEL_2)
+    updateBackdropFilters(style);
+#endif
 #if ENABLE(CSS_COMPOSITING)
     updateBlendMode(style);
 #endif
index fe8eb83..27ff131 100644 (file)
@@ -232,6 +232,9 @@ public:
     GraphicsLayer* layerForScrollCorner() const { return m_layerForScrollCorner.get(); }
 
     bool canCompositeFilters() const { return m_canCompositeFilters; }
+#if ENABLE(FILTERS_LEVEL_2)
+    bool canCompositeBackdropFilters() const { return m_canCompositeBackdropFilters; }
+#endif
 
     // Return an estimate of the backing store area (in pixels) allocated by this object's GraphicsLayers.
     double backingStoreMemoryEstimate() const;
@@ -279,6 +282,9 @@ private:
     void updateOpacity(const RenderStyle&);
     void updateTransform(const RenderStyle&);
     void updateFilters(const RenderStyle&);
+#if ENABLE(FILTERS_LEVEL_2)
+    void updateBackdropFilters(const RenderStyle&);
+#endif
 #if ENABLE(CSS_COMPOSITING)
     void updateBlendMode(const RenderStyle&);
 #endif
@@ -348,6 +354,9 @@ private:
     bool m_usingTiledCacheLayer;
     bool m_requiresOwnBackingStore;
     bool m_canCompositeFilters;
+#if ENABLE(FILTERS_LEVEL_2)
+    bool m_canCompositeBackdropFilters;
+#endif
     bool m_backgroundLayerPaintsFixedRootBackground;
 
     static bool m_creatingPrimaryGraphicsLayer;
index 248ad08..189acdf 100644 (file)
@@ -2180,13 +2180,13 @@ bool RenderLayerCompositor::requiresOwnBackingStore(const RenderLayer& layer, co
         || renderer.hasMask()
         || renderer.hasReflection()
         || renderer.hasFilter()
+        || renderer.hasBackdropFilter()
 #if PLATFORM(IOS)
         || requiresCompositingForScrolling(layer)
 #endif
         )
         return true;
-        
-    
+
     if (layer.mustCompositeForIndirectReasons()) {
         RenderLayer::IndirectCompositingReason reason = layer.indirectCompositingReason();
         return reason == RenderLayer::IndirectCompositingReason::Overlap
@@ -2273,7 +2273,7 @@ CompositingReasons RenderLayerCompositor::reasonsForCompositing(const RenderLaye
         if (renderer->hasReflection())
             reasons |= CompositingReasonReflectionWithCompositedDescendants;
 
-        if (renderer->hasFilter())
+        if (renderer->hasFilter() || renderer->hasBackdropFilter())
             reasons |= CompositingReasonFilterWithCompositedDescendants;
 
 #if ENABLE(CSS_COMPOSITING)
@@ -2594,6 +2594,11 @@ bool RenderLayerCompositor::requiresCompositingForIndirectReason(RenderLayerMode
 
 bool RenderLayerCompositor::requiresCompositingForFilters(RenderLayerModelObject& renderer) const
 {
+#if ENABLE(FILTERS_LEVEL_2)
+    if (renderer.hasBackdropFilter())
+        return true;
+#endif
+
     if (!(m_compositingTriggers & ChromeClient::FilterTrigger))
         return false;
 
index 195c515..0a00e85 100644 (file)
@@ -114,7 +114,7 @@ void RenderLayerModelObject::styleWillChange(StyleDifference diff, const RenderS
                     || oldStyle->filter() != newStyle.filter()
                     )
                 layer()->repaintIncludingDescendants();
-            } else if (newStyle.hasTransform() || newStyle.opacity() < 1 || newStyle.hasFilter()) {
+            } else if (newStyle.hasTransform() || newStyle.opacity() < 1 || newStyle.hasFilter() || newStyle.hasBackdropFilter()) {
                 // If we don't have a layer yet, but we are going to get one because of transform or opacity,
                 //  then we need to repaint the old position of the object.
                 repaint();
index 7778a8d..bd52967 100644 (file)
@@ -638,6 +638,11 @@ bool RenderStyle::changeRequiresLayout(const RenderStyle& other, unsigned& chang
     if (rareNonInheritedData->hasFilters() != other.rareNonInheritedData->hasFilters())
         return true;
 
+#if ENABLE(FILTERS_LEVEL_2)
+    if (rareNonInheritedData->hasBackdropFilters() != other.rareNonInheritedData->hasBackdropFilters())
+        return true;
+#endif
+
     const QuotesData* quotesDataA = rareInheritedData->quotes.get();
     const QuotesData* quotesDataB = other.rareInheritedData->quotes.get();
     if (!(quotesDataA == quotesDataB || (quotesDataA && quotesDataB && *quotesDataA == *quotesDataB)))
index 626cc1e..6cca5b7 100644 (file)
@@ -1117,6 +1117,14 @@ public:
     const FilterOperations& filter() const { return rareNonInheritedData->m_filter->m_operations; }
     bool hasFilter() const { return !rareNonInheritedData->m_filter->m_operations.operations().isEmpty(); }
 
+#if ENABLE(FILTERS_LEVEL_2)
+    FilterOperations& mutableBackdropFilter() { return rareNonInheritedData.access()->m_backdropFilter.access()->m_operations; }
+    const FilterOperations& backdropFilter() const { return rareNonInheritedData->m_backdropFilter->m_operations; }
+    bool hasBackdropFilter() const { return !rareNonInheritedData->m_backdropFilter->m_operations.operations().isEmpty(); }
+#else
+    bool hasBackdropFilter() const { return false; }
+#endif
+
 #if ENABLE(CSS_COMPOSITING)
     BlendMode blendMode() const { return static_cast<BlendMode>(rareNonInheritedData->m_effectiveBlendMode); }
     void setBlendMode(BlendMode blendMode) { SET_VAR(rareNonInheritedData, m_effectiveBlendMode, blendMode); }
@@ -1547,6 +1555,9 @@ public:
     void setRubyPosition(RubyPosition position) { SET_VAR(rareInheritedData, m_rubyPosition, position); }
 
     void setFilter(const FilterOperations& ops) { SET_VAR(rareNonInheritedData.access()->m_filter, m_operations, ops); }
+#if ENABLE(FILTERS_LEVEL_2)
+    void setBackdropFilter(const FilterOperations& ops) { SET_VAR(rareNonInheritedData.access()->m_backdropFilter, m_operations, ops); }
+#endif
 
     void setTabSize(unsigned size) { SET_VAR(rareInheritedData, m_tabSize, size); }
 
@@ -1995,6 +2006,9 @@ public:
     static const Vector<StyleDashboardRegion>& noneDashboardRegions();
 #endif
     static const FilterOperations& initialFilter() { DEPRECATED_DEFINE_STATIC_LOCAL(FilterOperations, ops, ()); return ops; }
+#if ENABLE(FILTERS_LEVEL_2)
+    static const FilterOperations& initialBackdropFilter() { DEPRECATED_DEFINE_STATIC_LOCAL(FilterOperations, ops, ()); return ops; }
+#endif
 #if ENABLE(CSS_COMPOSITING)
     static BlendMode initialBlendMode() { return BlendModeNormal; }
     static Isolation initialIsolation() { return IsolationAuto; }
index 7288252..c524a0a 100644 (file)
@@ -49,6 +49,9 @@ StyleRareNonInheritedData::StyleRareNonInheritedData()
     , m_multiCol(StyleMultiColData::create())
     , m_transform(StyleTransformData::create())
     , m_filter(StyleFilterData::create())
+#if ENABLE(FILTERS_LEVEL_2)
+    , m_backdropFilter(StyleFilterData::create())
+#endif
 #if ENABLE(CSS_GRID_LAYOUT)
     , m_grid(StyleGridData::create())
     , m_gridItem(StyleGridItemData::create())
@@ -119,6 +122,9 @@ inline StyleRareNonInheritedData::StyleRareNonInheritedData(const StyleRareNonIn
     , m_multiCol(o.m_multiCol)
     , m_transform(o.m_transform)
     , m_filter(o.m_filter)
+#if ENABLE(FILTERS_LEVEL_2)
+    , m_backdropFilter(o.m_backdropFilter)
+#endif
 #if ENABLE(CSS_GRID_LAYOUT)
     , m_grid(o.m_grid)
     , m_gridItem(o.m_gridItem)
@@ -214,6 +220,9 @@ bool StyleRareNonInheritedData::operator==(const StyleRareNonInheritedData& o) c
         && m_multiCol == o.m_multiCol
         && m_transform == o.m_transform
         && m_filter == o.m_filter
+#if ENABLE(FILTERS_LEVEL_2)
+        && m_backdropFilter == o.m_backdropFilter
+#endif
 #if ENABLE(CSS_GRID_LAYOUT)
         && m_grid == o.m_grid
         && m_gridItem == o.m_gridItem
@@ -346,4 +355,11 @@ bool StyleRareNonInheritedData::hasFilters() const
     return m_filter.get() && !m_filter->m_operations.isEmpty();
 }
 
+#if ENABLE(FILTERS_LEVEL_2)
+bool StyleRareNonInheritedData::hasBackdropFilters() const
+{
+    return m_backdropFilter.get() && !m_backdropFilter->m_operations.isEmpty();
+}
+#endif
+
 } // namespace WebCore
index 295da0e..df0beb6 100644 (file)
@@ -94,6 +94,9 @@ public:
     bool animationDataEquivalent(const StyleRareNonInheritedData&) const;
     bool transitionDataEquivalent(const StyleRareNonInheritedData&) const;
     bool hasFilters() const;
+#if ENABLE(FILTERS_LEVEL_2)
+    bool hasBackdropFilters() const;
+#endif
     bool hasOpacity() const { return opacity < 1; }
 
     float opacity;
@@ -119,6 +122,9 @@ public:
     DataRef<StyleMultiColData> m_multiCol; //  CSS3 multicol properties
     DataRef<StyleTransformData> m_transform; // Transform properties (rotate, scale, skew, etc.)
     DataRef<StyleFilterData> m_filter; // Filter operations (url, sepia, blur, etc.)
+#if ENABLE(FILTERS_LEVEL_2)
+    DataRef<StyleFilterData> m_backdropFilter; // Filter operations (url, sepia, blur, etc.)
+#endif
 
 #if ENABLE(CSS_GRID_LAYOUT)
     DataRef<StyleGridData> m_grid;
index 7ba7b4f..fef50fc 100644 (file)
@@ -1,3 +1,23 @@
+2014-11-06  Dean Jackson  <dino@apple.com>
+
+        [filters2] Support for backdrop-filter
+        https://bugs.webkit.org/show_bug.cgi?id=138384
+        <rdar://problem/18874494>
+
+        Reviewed by Simon Fraser.
+
+        Take 2!! Previous patch was rolled out.
+
+        * Shared/mac/RemoteLayerBackingStore.mm:
+        (WebKit::RemoteLayerBackingStore::drawInContext): Handle LayerTypeBackdropLayer in the switch.
+        * Shared/mac/RemoteLayerTreeTransaction.mm:
+        (WebKit::RemoteLayerTreeTransaction::description): Describe a backdrop layer.
+        * UIProcess/ios/RemoteLayerTreeHostIOS.mm:
+        (+[WKBackdropView layerClass]): Define CABackdropLayer and use it as the class.
+        (WebKit::RemoteLayerTreeHost::createLayer):
+        * UIProcess/mac/RemoteLayerTreeHost.mm: Ditto.
+        (WebKit::RemoteLayerTreeHost::createLayer):
+
 2014-11-06  Tim Horton  <timothy_horton@apple.com>
 
         Data detectors popover points at the first line of the detected item
index 7509049..bf9800e 100644 (file)
@@ -348,6 +348,7 @@ void RemoteLayerBackingStore::drawInContext(GraphicsContext& context, CGImageRef
     case PlatformCALayer::LayerTypeRootLayer:
     case PlatformCALayer::LayerTypeAVPlayerLayer:
     case PlatformCALayer::LayerTypeWebGLLayer:
+    case PlatformCALayer::LayerTypeBackdropLayer:
     case PlatformCALayer::LayerTypeCustom:
         ASSERT_NOT_REACHED();
         break;
index 7a7130b..00b8356 100644 (file)
@@ -1180,6 +1180,9 @@ CString RemoteLayerTreeTransaction::description() const
             case PlatformCALayer::LayerTypeRootLayer:
                 ts << "root-layer";
                 break;
+            case PlatformCALayer::LayerTypeBackdropLayer:
+                ts << "backdrop-layer";
+                break;
             case PlatformCALayer::LayerTypeAVPlayerLayer:
                 ts << "av-player-layer (context-id " << createdLayer.hostingContextID << ")";
                 break;
index 2241add..8f7dba9 100644 (file)
@@ -38,6 +38,9 @@ using namespace WebCore;
 - (void)setContextId:(uint32_t)contextID;
 @end
 
+@interface CABackdropLayer : CALayer
+@end
+
 @interface UIView (WKHitTesting)
 - (UIView *)_findDescendantViewAtPoint:(CGPoint)point withEvent:(UIEvent *)event;
 @end
@@ -104,6 +107,17 @@ using namespace WebCore;
 
 @end
 
+@interface WKBackdropView : WKCompositingView
+@end
+
+@implementation WKBackdropView
++ (Class)layerClass
+{
+    return [CABackdropLayer self];
+}
+
+@end
+
 @interface WKRemoteView : WKCompositingView
 @end
 
@@ -151,6 +165,9 @@ LayerOrView *RemoteLayerTreeHost::createLayer(const RemoteLayerTreeTransaction::
         } else
             view = adoptNS([[WKCompositingView alloc] init]);
         break;
+    case PlatformCALayer::LayerTypeBackdropLayer:
+        view = adoptNS([[WKBackdropView alloc] init]);
+        break;
     case PlatformCALayer::LayerTypeTransformLayer:
         view = adoptNS([[WKTransformView alloc] init]);
         break;
index c44f45f..fe50679 100644 (file)
 #import <UIKit/UIView.h>
 #endif
 
+#if ENABLE(FILTERS_LEVEL_2)
+@interface CABackdropLayer : CALayer
+@end
+#endif
+
 using namespace WebCore;
 
 namespace WebKit {
@@ -222,6 +227,14 @@ LayerOrView *RemoteLayerTreeHost::createLayer(const RemoteLayerTreeTransaction::
     case PlatformCALayer::LayerTypeTransformLayer:
         layer = adoptNS([[CATransformLayer alloc] init]);
         break;
+    case PlatformCALayer::LayerTypeBackdropLayer:
+#if ENABLE(FILTERS_LEVEL_2)
+        layer = adoptNS([[CABackdropLayer alloc] init]);
+#else
+        ASSERT_NOT_REACHED();
+        layer = adoptNS([[CALayer alloc] init]);
+#endif
+        break;
     case PlatformCALayer::LayerTypeCustom:
     case PlatformCALayer::LayerTypeAVPlayerLayer:
     case PlatformCALayer::LayerTypeWebGLLayer:
index 1f268be..a66c4ef 100644 (file)
@@ -229,7 +229,7 @@ private:
         return static_cast<CompositingTriggerFlags>(
             ThreeDTransformTrigger |
             VideoTrigger |
-            PluginTrigger| 
+            PluginTrigger|
             CanvasTrigger |
 #if PLATFORM(IOS)
             AnimatedOpacityTrigger | // Allow opacity animations to trigger compositing mode for iPhone: <rdar://problem/7830677>