Support CSS filters without webkit prefix
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 20:22:50 +0000 (20:22 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 20:22:50 +0000 (20:22 +0000)
https://bugs.webkit.org/show_bug.cgi?id=148138
<rdar://problem/22331434>

Reviewed by Sam Weinig.

Source/WebCore:

Add support for the un-prefixed form of the CSS filter property.
This was straightforward for the general case on HTML content.
It was a bit more tricky on SVG content, where there already
was an existing "filter" property/attribute. The parsing
code is now shared between SVG and HTML, as is the
computed style output.

Covered by updating the existing tests, and
adding one new test: css3/filters/unprefixed.html

* css/CSSComputedStyleDeclaration.cpp: Rename CSSPropertyWebkitFilter to CSSPropertyFilter.
(WebCore::isLayoutDependent):
(WebCore::ComputedStyleExtractor::propertyValue):

* css/CSSFilterImageValue.cpp:
(WebCore::CSSFilterImageValue::customCSSText): Use "filter(" as the prefix.

* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue): Rename CSSPropertyWebkitFilter to CSSPropertyFilter.
(WebCore::CSSParser::isGeneratedImageValue): Add support for "filter()".
(WebCore::CSSParser::parseGeneratedImage): Ditto.
(WebCore::CSSParser::parseBuiltinFilterArguments):

* css/CSSPropertyNames.in: Add filter. Make -webkit-filter an alias.

* css/SVGCSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::svgPropertyValue): Deleted.

* page/animation/CSSPropertyAnimation.cpp: Rename CSSPropertyWebkitFilter to CSSPropertyFilter.
(WebCore::PropertyWrapperAcceleratedFilter::PropertyWrapperAcceleratedFilter):
* page/animation/KeyframeAnimation.cpp: Ditto.
(WebCore::KeyframeAnimation::checkForMatchingFilterFunctionLists):

* platform/graphics/GraphicsLayer.cpp: Rename AnimatedPropertyWebkitFilter to AnimatedPropertyFilter.
(WebCore::GraphicsLayer::validateFilterOperations):
* platform/graphics/GraphicsLayerClient.h: Ditto.
* platform/graphics/ca/GraphicsLayerCA.cpp: Ditto.
(WebCore::GraphicsLayerCA::moveOrCopyAnimations):
(WebCore::GraphicsLayerCA::addAnimation):
(WebCore::GraphicsLayerCA::createAnimationFromKeyframes):
(WebCore::GraphicsLayerCA::createFilterAnimationsFromKeyframes):

* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::updateOrRemoveFilterClients): SVG manages its own filter resources,
so we shouldn't add a layer that has an SVG root to the filter clients.

* rendering/RenderLayerBacking.cpp: Renaming.
(WebCore::RenderLayerBacking::startAnimation):
(WebCore::RenderLayerBacking::startTransition):
(WebCore::RenderLayerBacking::graphicsLayerToCSSProperty):
(WebCore::RenderLayerBacking::cssToGraphicsLayerProperty):
* rendering/RenderLayerCompositor.cpp: Ditto.
(WebCore::RenderLayerCompositor::requiresCompositingForAnimation):

* rendering/style/SVGRenderStyle.h: Remove the SVG filter style.
(WebCore::SVGRenderStyle::isolatesBlending): No need to check for hasFilter().
(WebCore::SVGRenderStyle::initialFilterResource): Deleted.
(WebCore::SVGRenderStyle::setFilterResource): Deleted.
(WebCore::SVGRenderStyle::filterResource): Deleted.
(WebCore::SVGRenderStyle::hasFilter): Deleted.

* rendering/style/SVGRenderStyleDefs.cpp: Remove the filter resource.
(WebCore::StyleResourceData::StyleResourceData): Deleted.
(WebCore::StyleResourceData::operator==): Deleted.
* rendering/style/SVGRenderStyleDefs.h:

* rendering/style/WillChangeData.cpp: Renaming.
(WebCore::propertyCreatesStackingContext):
(WebCore::propertyTriggersCompositing):

* rendering/svg/SVGRenderSupport.cpp:
(WebCore::SVGRenderSupport::isolatesBlending): Since SVGRenderStyle no longer checks
hasFilter() in its isolatesBlending(), we need to do it here.

* rendering/svg/SVGRenderingContext.cpp:
(WebCore::SVGRenderingContext::prepareToRenderSVGContent):

* rendering/svg/SVGRenderTreeAsText.cpp:
(WebCore::writeResources): Dump from the CSS style value.
* rendering/svg/SVGResources.cpp: Ditto.
(WebCore::SVGResources::buildCachedResources):
* rendering/svg/SVGResources.h:
* rendering/svg/SVGResourcesCache.cpp:
(WebCore::SVGResourcesCache::addResourcesFromRenderer):

* platform/graphics/texmap/TextureMapperLayer.cpp: Renaming.
* platform/graphics/texmap/TextureMapperAnimation.cpp:
* platform/graphics/texmap/coordinated/CoordinatedGraphicsLayer.cpp:

Source/WebKit2:

Rename WebkitFilter to Filter.

* Shared/CoordinatedGraphics/CoordinatedGraphicsArgumentCoders.cpp:
(IPC::ArgumentCoder<TextureMapperAnimation>::encode):
(IPC::ArgumentCoder<TextureMapperAnimation>::decode):

LayoutTests:

Globally change -webkit-filter to filter in as many places as
possible. Then add a new test that makes sure the prefixed
and unprefixed value resolve to the same computed style.

* animations/resources/animation-test-helpers.js:
(parseCSSImage):
* css3/filters/backdrop/effect-hw-expected.html:
* css3/filters/effect-blur-hw.html:
* css3/filters/effect-blur.html:
* css3/filters/effect-brightness-clamping-hw.html:
* css3/filters/effect-brightness-clamping.html:
* css3/filters/effect-brightness-hw.html:
* css3/filters/effect-brightness.html:
* css3/filters/effect-combined-hw.html:
* css3/filters/effect-combined.html:
* css3/filters/effect-contrast-hw.html:
* css3/filters/effect-contrast.html:
* css3/filters/effect-drop-shadow-hw.html:
* css3/filters/effect-drop-shadow.html:
* css3/filters/effect-grayscale-hw.html:
* css3/filters/effect-grayscale.html:
* css3/filters/effect-hue-rotate-hw.html:
* css3/filters/effect-hue-rotate.html:
* css3/filters/effect-invert-hw.html:
* css3/filters/effect-invert.html:
* css3/filters/effect-opacity-hw.html:
* css3/filters/effect-opacity.html:
* css3/filters/effect-reference-composite-hw.html:
* css3/filters/effect-reference-composite.html:
* css3/filters/effect-reference-hw.html:
* css3/filters/effect-reference-ordering-hw.html:
* css3/filters/effect-reference-ordering.html:
* css3/filters/effect-reference.html:
* css3/filters/effect-saturate-hw.html:
* css3/filters/effect-saturate.html:
* css3/filters/effect-sepia-hw.html:
* css3/filters/effect-sepia.html:
* css3/filters/filter-property-computed-style-expected.txt:
* css3/filters/filter-property-parsing-expected.txt:
* css3/filters/script-tests/filter-property-computed-style.js:
(testComputedFilterRule):
* css3/filters/script-tests/filter-property-parsing.js:
(testFilterRule):
* css3/filters/script-tests/unprefixed.js: Copied from LayoutTests/css3/filters/script-tests/filter-property-computed-style.js.
(testComputedFilterRule):
* css3/filters/unprefixed-expected.txt: Copied from LayoutTests/css3/filters/filter-property-computed-style-expected.txt.
* css3/filters/unprefixed.html: Added.
* fast/css/getComputedStyle/computed-style-expected.txt:
* fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* fast/filter-image/clipped-filter-expected.html:
* fast/filter-image/clipped-filter.html:
* fast/filter-image/filter-image-animation-expected.txt:
* fast/filter-image/filter-image-animation.html:
* fast/filter-image/filter-image-blur.html:
* fast/filter-image/filter-image-expected.html:
* fast/filter-image/filter-image-svg.html:
* fast/filter-image/filter-image.html:
* fast/filter-image/parse-filter-image-expected.txt:
* fast/filter-image/parse-filter-image.html:
* svg/css/getComputedStyle-basic-expected.txt:

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

82 files changed:
LayoutTests/ChangeLog
LayoutTests/animations/resources/animation-test-helpers.js
LayoutTests/css3/filters/backdrop/effect-hw-expected.html
LayoutTests/css3/filters/effect-blur-hw.html
LayoutTests/css3/filters/effect-blur.html
LayoutTests/css3/filters/effect-brightness-clamping-hw.html
LayoutTests/css3/filters/effect-brightness-clamping.html
LayoutTests/css3/filters/effect-brightness-hw.html
LayoutTests/css3/filters/effect-brightness.html
LayoutTests/css3/filters/effect-combined-hw.html
LayoutTests/css3/filters/effect-combined.html
LayoutTests/css3/filters/effect-contrast-hw.html
LayoutTests/css3/filters/effect-contrast.html
LayoutTests/css3/filters/effect-drop-shadow-hw.html
LayoutTests/css3/filters/effect-drop-shadow.html
LayoutTests/css3/filters/effect-grayscale-hw.html
LayoutTests/css3/filters/effect-grayscale.html
LayoutTests/css3/filters/effect-hue-rotate-hw.html
LayoutTests/css3/filters/effect-hue-rotate.html
LayoutTests/css3/filters/effect-invert-hw.html
LayoutTests/css3/filters/effect-invert.html
LayoutTests/css3/filters/effect-opacity-hw.html
LayoutTests/css3/filters/effect-opacity.html
LayoutTests/css3/filters/effect-reference-composite-hw.html
LayoutTests/css3/filters/effect-reference-composite.html
LayoutTests/css3/filters/effect-reference-hw.html
LayoutTests/css3/filters/effect-reference-ordering-hw.html
LayoutTests/css3/filters/effect-reference-ordering.html
LayoutTests/css3/filters/effect-reference.html
LayoutTests/css3/filters/effect-saturate-hw.html
LayoutTests/css3/filters/effect-saturate.html
LayoutTests/css3/filters/effect-sepia-hw.html
LayoutTests/css3/filters/effect-sepia.html
LayoutTests/css3/filters/filter-property-computed-style-expected.txt
LayoutTests/css3/filters/filter-property-parsing-expected.txt
LayoutTests/css3/filters/script-tests/filter-property-computed-style.js
LayoutTests/css3/filters/script-tests/filter-property-parsing.js
LayoutTests/css3/filters/script-tests/unprefixed.js [new file with mode: 0644]
LayoutTests/css3/filters/unprefixed-expected.txt [new file with mode: 0644]
LayoutTests/css3/filters/unprefixed.html [new file with mode: 0644]
LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/fast/filter-image/clipped-filter-expected.html
LayoutTests/fast/filter-image/clipped-filter.html
LayoutTests/fast/filter-image/filter-image-animation-expected.txt
LayoutTests/fast/filter-image/filter-image-animation.html
LayoutTests/fast/filter-image/filter-image-blur.html
LayoutTests/fast/filter-image/filter-image-expected.html
LayoutTests/fast/filter-image/filter-image-svg.html
LayoutTests/fast/filter-image/filter-image.html
LayoutTests/fast/filter-image/parse-filter-image-expected.txt
LayoutTests/fast/filter-image/parse-filter-image.html
LayoutTests/svg/css/getComputedStyle-basic-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSFilterImageValue.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/css/SVGCSSComputedStyleDeclaration.cpp
Source/WebCore/page/animation/CSSPropertyAnimation.cpp
Source/WebCore/page/animation/KeyframeAnimation.cpp
Source/WebCore/platform/graphics/GraphicsLayer.cpp
Source/WebCore/platform/graphics/GraphicsLayerClient.h
Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp
Source/WebCore/platform/graphics/texmap/TextureMapperAnimation.cpp
Source/WebCore/platform/graphics/texmap/TextureMapperLayer.cpp
Source/WebCore/platform/graphics/texmap/coordinated/CoordinatedGraphicsLayer.cpp
Source/WebCore/rendering/RenderLayer.cpp
Source/WebCore/rendering/RenderLayerBacking.cpp
Source/WebCore/rendering/RenderLayerCompositor.cpp
Source/WebCore/rendering/style/SVGRenderStyle.h
Source/WebCore/rendering/style/SVGRenderStyleDefs.cpp
Source/WebCore/rendering/style/SVGRenderStyleDefs.h
Source/WebCore/rendering/style/WillChangeData.cpp
Source/WebCore/rendering/svg/SVGRenderSupport.cpp
Source/WebCore/rendering/svg/SVGRenderTreeAsText.cpp
Source/WebCore/rendering/svg/SVGRenderingContext.cpp
Source/WebCore/rendering/svg/SVGResources.cpp
Source/WebCore/rendering/svg/SVGResources.h
Source/WebCore/rendering/svg/SVGResourcesCache.cpp
Source/WebKit2/ChangeLog
Source/WebKit2/Shared/CoordinatedGraphics/CoordinatedGraphicsArgumentCoders.cpp

index 9b13306..e710446 100644 (file)
@@ -1,3 +1,72 @@
+2015-08-18  Dean Jackson  <dino@apple.com>
+
+        Support CSS filters without webkit prefix
+        https://bugs.webkit.org/show_bug.cgi?id=148138
+        <rdar://problem/22331434>
+
+        Reviewed by Sam Weinig.
+
+        Globally change -webkit-filter to filter in as many places as
+        possible. Then add a new test that makes sure the prefixed
+        and unprefixed value resolve to the same computed style.
+
+        * animations/resources/animation-test-helpers.js:
+        (parseCSSImage):
+        * css3/filters/backdrop/effect-hw-expected.html:
+        * css3/filters/effect-blur-hw.html:
+        * css3/filters/effect-blur.html:
+        * css3/filters/effect-brightness-clamping-hw.html:
+        * css3/filters/effect-brightness-clamping.html:
+        * css3/filters/effect-brightness-hw.html:
+        * css3/filters/effect-brightness.html:
+        * css3/filters/effect-combined-hw.html:
+        * css3/filters/effect-combined.html:
+        * css3/filters/effect-contrast-hw.html:
+        * css3/filters/effect-contrast.html:
+        * css3/filters/effect-drop-shadow-hw.html:
+        * css3/filters/effect-drop-shadow.html:
+        * css3/filters/effect-grayscale-hw.html:
+        * css3/filters/effect-grayscale.html:
+        * css3/filters/effect-hue-rotate-hw.html:
+        * css3/filters/effect-hue-rotate.html:
+        * css3/filters/effect-invert-hw.html:
+        * css3/filters/effect-invert.html:
+        * css3/filters/effect-opacity-hw.html:
+        * css3/filters/effect-opacity.html:
+        * css3/filters/effect-reference-composite-hw.html:
+        * css3/filters/effect-reference-composite.html:
+        * css3/filters/effect-reference-hw.html:
+        * css3/filters/effect-reference-ordering-hw.html:
+        * css3/filters/effect-reference-ordering.html:
+        * css3/filters/effect-reference.html:
+        * css3/filters/effect-saturate-hw.html:
+        * css3/filters/effect-saturate.html:
+        * css3/filters/effect-sepia-hw.html:
+        * css3/filters/effect-sepia.html:
+        * css3/filters/filter-property-computed-style-expected.txt:
+        * css3/filters/filter-property-parsing-expected.txt:
+        * css3/filters/script-tests/filter-property-computed-style.js:
+        (testComputedFilterRule):
+        * css3/filters/script-tests/filter-property-parsing.js:
+        (testFilterRule):
+        * css3/filters/script-tests/unprefixed.js: Copied from LayoutTests/css3/filters/script-tests/filter-property-computed-style.js.
+        (testComputedFilterRule):
+        * css3/filters/unprefixed-expected.txt: Copied from LayoutTests/css3/filters/filter-property-computed-style-expected.txt.
+        * css3/filters/unprefixed.html: Added.
+        * fast/css/getComputedStyle/computed-style-expected.txt:
+        * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
+        * fast/filter-image/clipped-filter-expected.html:
+        * fast/filter-image/clipped-filter.html:
+        * fast/filter-image/filter-image-animation-expected.txt:
+        * fast/filter-image/filter-image-animation.html:
+        * fast/filter-image/filter-image-blur.html:
+        * fast/filter-image/filter-image-expected.html:
+        * fast/filter-image/filter-image-svg.html:
+        * fast/filter-image/filter-image.html:
+        * fast/filter-image/parse-filter-image-expected.txt:
+        * fast/filter-image/parse-filter-image.html:
+        * svg/css/getComputedStyle-basic-expected.txt:
+
 2015-08-19  Brian Burg  <bburg@apple.com>
 
         Web Inspector: InspectorTest should be a subclass of TestHarness
index 04af121..e0eac14 100644 (file)
@@ -70,7 +70,7 @@ function parseCSSImage(s)
     // Generator functions can have CSS images as values themself.
     // These functions will call parseCSSImage for each CSS Image.
     switch (functionName) {
-    case "-webkit-filter":
+    case "filter":
         return parseFilterImage(functionValue);
     case "-webkit-cross-fade":
         return parseCrossFade(functionValue);
index f1af7e3..27b82ba 100644 (file)
@@ -30,21 +30,21 @@ p {
 </style>
 <div>
     <img src="../resources/reference.png">
-    <p style="-webkit-filter: invert()"></p>
+    <p style="filter: invert()"></p>
 </div>
 <div>
     <img src="../resources/reference.png">
-    <p style="-webkit-filter: contrast(20%)"></p>
+    <p style="filter: contrast(20%)"></p>
 </div>
 <div>
     <img src="../resources/reference.png">
-    <p style="-webkit-filter: grayscale()"></p>
+    <p style="filter: grayscale()"></p>
 </div>
 <div>
     <img src="../resources/reference.png">
-    <p style="-webkit-filter: sepia()"></p>
+    <p style="filter: sepia()"></p>
 </div>
 <div>
     <img src="../resources/reference.png">
-    <p style="-webkit-filter: sepia() hue-rotate(90deg)"></p>
+    <p style="filter: sepia() hue-rotate(90deg)"></p>
 </div>
index 2563ca9..bd745c3 100644 (file)
@@ -4,7 +4,7 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: blur(0)" src="resources/reference.png">
-<img style="-webkit-filter: blur(2px)" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px 3px)" src="resources/reference.png">
-<img style="-webkit-filter: blur(10px)" src="resources/reference.png">
+<img style="filter: blur(0)" src="resources/reference.png">
+<img style="filter: blur(2px)" src="resources/reference.png">
+<img style="filter: blur(3px 3px)" src="resources/reference.png">
+<img style="filter: blur(10px)" src="resources/reference.png">
index 1d65f71..7818218 100644 (file)
@@ -9,7 +9,7 @@ img {
     margin: 10px;
 }
 </style>
-<img style="-webkit-filter: blur(0)" src="resources/reference.png">
-<img style="-webkit-filter: blur(2px)" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px)" src="resources/reference.png">
-<img style="-webkit-filter: blur(10px)" src="resources/reference.png">
+<img style="filter: blur(0)" src="resources/reference.png">
+<img style="filter: blur(2px)" src="resources/reference.png">
+<img style="filter: blur(3px)" src="resources/reference.png">
+<img style="filter: blur(10px)" src="resources/reference.png">
index c3f4954..058a9f2 100644 (file)
@@ -3,15 +3,15 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: brightness(1) brightness(2)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.2) brightness(1.8)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.5) brightness(1.5)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.8) brightness(1.2)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1.2) brightness(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1.5) brightness(0.5)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1.8) brightness(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1) brightness(1)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.8) grayscale(1)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.5) blur(3px)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1) blur(3px)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.5) drop-shadow(5px 5px 5px red)" src="resources/reference.png">
+<img style="filter: brightness(1) brightness(2)" src="resources/reference.png">
+<img style="filter: brightness(0.2) brightness(1.8)" src="resources/reference.png">
+<img style="filter: brightness(0.5) brightness(1.5)" src="resources/reference.png">
+<img style="filter: brightness(0.8) brightness(1.2)" src="resources/reference.png">
+<img style="filter: brightness(1.2) brightness(0.8)" src="resources/reference.png">
+<img style="filter: brightness(1.5) brightness(0.5)" src="resources/reference.png">
+<img style="filter: brightness(1.8) brightness(0.2)" src="resources/reference.png">
+<img style="filter: brightness(1) brightness(1)" src="resources/reference.png">
+<img style="filter: brightness(0.8) grayscale(1)" src="resources/reference.png">
+<img style="filter: brightness(0.5) blur(3px)" src="resources/reference.png">
+<img style="filter: brightness(1) blur(3px)" src="resources/reference.png">
+<img style="filter: brightness(0.5) drop-shadow(5px 5px 5px red)" src="resources/reference.png">
index 5635dd4..fea5a3a 100644 (file)
@@ -4,15 +4,15 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: brightness(-1) brightness(1)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(-0.8) brightness(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(-0.5) brightness(0.5)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(-0.2) brightness(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.2) brightness(-0.2)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.5) brightness(-0.5)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.8) brightness(-0.8)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1) brightness(-1)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.8) grayscale(1)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.5) blur(3px)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1) blur(3px)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.5) drop-shadow(5px 5px 5px red)" src="resources/reference.png">
+<img style="filter: brightness(-1) brightness(1)" src="resources/reference.png">
+<img style="filter: brightness(-0.8) brightness(0.8)" src="resources/reference.png">
+<img style="filter: brightness(-0.5) brightness(0.5)" src="resources/reference.png">
+<img style="filter: brightness(-0.2) brightness(0.2)" src="resources/reference.png">
+<img style="filter: brightness(0.2) brightness(-0.2)" src="resources/reference.png">
+<img style="filter: brightness(0.5) brightness(-0.5)" src="resources/reference.png">
+<img style="filter: brightness(0.8) brightness(-0.8)" src="resources/reference.png">
+<img style="filter: brightness(1) brightness(-1)" src="resources/reference.png">
+<img style="filter: brightness(0.8) grayscale(1)" src="resources/reference.png">
+<img style="filter: brightness(0.5) blur(3px)" src="resources/reference.png">
+<img style="filter: brightness(1) blur(3px)" src="resources/reference.png">
+<img style="filter: brightness(0.5) drop-shadow(5px 5px 5px red)" src="resources/reference.png">
index 93a0518..dd2875e 100644 (file)
@@ -3,10 +3,10 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: brightness(0)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.7)" src="resources/reference.png">
-<img style="-webkit-filter: brightness()" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1.3)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1.6)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(2)" src="resources/reference.png">
+<img style="filter: brightness(0)" src="resources/reference.png">
+<img style="filter: brightness(0.4)" src="resources/reference.png">
+<img style="filter: brightness(0.7)" src="resources/reference.png">
+<img style="filter: brightness()" src="resources/reference.png">
+<img style="filter: brightness(1.3)" src="resources/reference.png">
+<img style="filter: brightness(1.6)" src="resources/reference.png">
+<img style="filter: brightness(2)" src="resources/reference.png">
index 7dc5dcc..6768ffb 100644 (file)
@@ -4,10 +4,10 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: brightness(-1)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(-0.6)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(-0.3)" src="resources/reference.png">
-<img style="-webkit-filter: brightness()" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.3)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: brightness(1)" src="resources/reference.png">
+<img style="filter: brightness(-1)" src="resources/reference.png">
+<img style="filter: brightness(-0.6)" src="resources/reference.png">
+<img style="filter: brightness(-0.3)" src="resources/reference.png">
+<img style="filter: brightness()" src="resources/reference.png">
+<img style="filter: brightness(0.3)" src="resources/reference.png">
+<img style="filter: brightness(0.6)" src="resources/reference.png">
+<img style="filter: brightness(1)" src="resources/reference.png">
index 294264a..010ff2d 100644 (file)
@@ -4,9 +4,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: sepia() saturate(3) hue-rotate(180deg)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(3) hue-rotate(90deg)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale() blur(3px)" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px) hue-rotate(-90deg) sepia()" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px) opacity(0.5) hue-rotate(-90deg) sepia()" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px) brightness(1.2) contrast(2)" src="resources/reference.png">
+<img style="filter: sepia() saturate(3) hue-rotate(180deg)" src="resources/reference.png">
+<img style="filter: saturate(3) hue-rotate(90deg)" src="resources/reference.png">
+<img style="filter: grayscale() blur(3px)" src="resources/reference.png">
+<img style="filter: blur(3px) hue-rotate(-90deg) sepia()" src="resources/reference.png">
+<img style="filter: blur(3px) opacity(0.5) hue-rotate(-90deg) sepia()" src="resources/reference.png">
+<img style="filter: blur(3px) brightness(1.2) contrast(2)" src="resources/reference.png">
index b0a0a69..afbe983 100644 (file)
@@ -9,9 +9,9 @@ img {
     margin: 10px;
 }
 </style>
-<img style="-webkit-filter: sepia() saturate(3) hue-rotate(180deg)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(3) hue-rotate(90deg)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale() blur(3px)" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px) hue-rotate(-90deg) sepia()" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px) opacity(0.5) hue-rotate(-90deg) sepia()" src="resources/reference.png">
-<img style="-webkit-filter: blur(3px) brightness(1.2) contrast(2)" src="resources/reference.png">
+<img style="filter: sepia() saturate(3) hue-rotate(180deg)" src="resources/reference.png">
+<img style="filter: saturate(3) hue-rotate(90deg)" src="resources/reference.png">
+<img style="filter: grayscale() blur(3px)" src="resources/reference.png">
+<img style="filter: blur(3px) hue-rotate(-90deg) sepia()" src="resources/reference.png">
+<img style="filter: blur(3px) opacity(0.5) hue-rotate(-90deg) sepia()" src="resources/reference.png">
+<img style="filter: blur(3px) brightness(1.2) contrast(2)" src="resources/reference.png">
index 950fcea..95b8cdf 100644 (file)
@@ -3,9 +3,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: contrast(0)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(0.5)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(1.0)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(2)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(5)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(10)" src="resources/reference.png">
+<img style="filter: contrast(0)" src="resources/reference.png">
+<img style="filter: contrast(0.5)" src="resources/reference.png">
+<img style="filter: contrast(1.0)" src="resources/reference.png">
+<img style="filter: contrast(2)" src="resources/reference.png">
+<img style="filter: contrast(5)" src="resources/reference.png">
+<img style="filter: contrast(10)" src="resources/reference.png">
index 5de1335..7d8845f 100644 (file)
@@ -4,9 +4,9 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: contrast(0)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(0.5)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(1.0)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(2)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(5)" src="resources/reference.png">
-<img style="-webkit-filter: contrast(10)" src="resources/reference.png">
+<img style="filter: contrast(0)" src="resources/reference.png">
+<img style="filter: contrast(0.5)" src="resources/reference.png">
+<img style="filter: contrast(1.0)" src="resources/reference.png">
+<img style="filter: contrast(2)" src="resources/reference.png">
+<img style="filter: contrast(5)" src="resources/reference.png">
+<img style="filter: contrast(10)" src="resources/reference.png">
index 3443592..748653e 100644 (file)
@@ -4,8 +4,8 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: drop-shadow(0 0 0 black)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(5px 5px 2px black)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(5px 5px 0px red)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(10px 10px 0px red)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(5px 5px 10px blue)" src="resources/reference.png">
+<img style="filter: drop-shadow(0 0 0 black)" src="resources/reference.png">
+<img style="filter: drop-shadow(5px 5px 2px black)" src="resources/reference.png">
+<img style="filter: drop-shadow(5px 5px 0px red)" src="resources/reference.png">
+<img style="filter: drop-shadow(10px 10px 0px red)" src="resources/reference.png">
+<img style="filter: drop-shadow(5px 5px 10px blue)" src="resources/reference.png">
index 104fd39..40e6e19 100644 (file)
@@ -9,8 +9,8 @@ img {
     margin: 15px;
 }
 </style>
-<img style="-webkit-filter: drop-shadow(0 0 0 black)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(5px 5px 2px black)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(5px 5px 0px red)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(10px 10px 0px red)" src="resources/reference.png">
-<img style="-webkit-filter: drop-shadow(5px 5px 10px blue)" src="resources/reference.png">
+<img style="filter: drop-shadow(0 0 0 black)" src="resources/reference.png">
+<img style="filter: drop-shadow(5px 5px 2px black)" src="resources/reference.png">
+<img style="filter: drop-shadow(5px 5px 0px red)" src="resources/reference.png">
+<img style="filter: drop-shadow(10px 10px 0px red)" src="resources/reference.png">
+<img style="filter: drop-shadow(5px 5px 10px blue)" src="resources/reference.png">
index 86829b5..4b7cf2a 100644 (file)
@@ -3,9 +3,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: grayscale(0)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(1.0)" src="resources/reference.png">
+<img style="filter: grayscale(0)" src="resources/reference.png">
+<img style="filter: grayscale(0.2)" src="resources/reference.png">
+<img style="filter: grayscale(0.4)" src="resources/reference.png">
+<img style="filter: grayscale(0.6)" src="resources/reference.png">
+<img style="filter: grayscale(0.8)" src="resources/reference.png">
+<img style="filter: grayscale(1.0)" src="resources/reference.png">
index fa9643a..469a4b6 100644 (file)
@@ -4,9 +4,9 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: grayscale(0)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: grayscale(1.0)" src="resources/reference.png">
+<img style="filter: grayscale(0)" src="resources/reference.png">
+<img style="filter: grayscale(0.2)" src="resources/reference.png">
+<img style="filter: grayscale(0.4)" src="resources/reference.png">
+<img style="filter: grayscale(0.6)" src="resources/reference.png">
+<img style="filter: grayscale(0.8)" src="resources/reference.png">
+<img style="filter: grayscale(1.0)" src="resources/reference.png">
index f6e1580..a29ba43 100644 (file)
@@ -3,9 +3,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: hue-rotate(0deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(45deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(90deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(180deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(270deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(360deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(0deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(45deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(90deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(180deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(270deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(360deg)" src="resources/reference.png">
index 9357b36..5b9c8dc 100644 (file)
@@ -4,9 +4,9 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: hue-rotate(0deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(45deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(90deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(180deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(270deg)" src="resources/reference.png">
-<img style="-webkit-filter: hue-rotate(360deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(0deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(45deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(90deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(180deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(270deg)" src="resources/reference.png">
+<img style="filter: hue-rotate(360deg)" src="resources/reference.png">
index ff8500e..b39ccb4 100644 (file)
@@ -3,9 +3,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: invert(0)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: invert(1.0)" src="resources/reference.png">
+<img style="filter: invert(0)" src="resources/reference.png">
+<img style="filter: invert(0.2)" src="resources/reference.png">
+<img style="filter: invert(0.4)" src="resources/reference.png">
+<img style="filter: invert(0.6)" src="resources/reference.png">
+<img style="filter: invert(0.8)" src="resources/reference.png">
+<img style="filter: invert(1.0)" src="resources/reference.png">
index d03c11a..600ffd3 100644 (file)
@@ -4,9 +4,9 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: invert(0)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: invert(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: invert(1.0)" src="resources/reference.png">
+<img style="filter: invert(0)" src="resources/reference.png">
+<img style="filter: invert(0.2)" src="resources/reference.png">
+<img style="filter: invert(0.4)" src="resources/reference.png">
+<img style="filter: invert(0.6)" src="resources/reference.png">
+<img style="filter: invert(0.8)" src="resources/reference.png">
+<img style="filter: invert(1.0)" src="resources/reference.png">
index 85fba74..1bc713d 100644 (file)
@@ -3,9 +3,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: opacity(0)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(1.0)" src="resources/reference.png">
+<img style="filter: opacity(0)" src="resources/reference.png">
+<img style="filter: opacity(0.2)" src="resources/reference.png">
+<img style="filter: opacity(0.4)" src="resources/reference.png">
+<img style="filter: opacity(0.6)" src="resources/reference.png">
+<img style="filter: opacity(0.8)" src="resources/reference.png">
+<img style="filter: opacity(1.0)" src="resources/reference.png">
index 1e3dbbc..c1c8295 100644 (file)
@@ -4,9 +4,9 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: opacity(0)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: opacity(1.0)" src="resources/reference.png">
+<img style="filter: opacity(0)" src="resources/reference.png">
+<img style="filter: opacity(0.2)" src="resources/reference.png">
+<img style="filter: opacity(0.4)" src="resources/reference.png">
+<img style="filter: opacity(0.6)" src="resources/reference.png">
+<img style="filter: opacity(0.8)" src="resources/reference.png">
+<img style="filter: opacity(1.0)" src="resources/reference.png">
index 49b0e4d..5018115 100644 (file)
@@ -27,8 +27,8 @@ img {
     margin: 10px;
 }
 </style>
-<img style="-webkit-filter: url(#over); filter: url(#over); -webkit-transform: translateZ(0);" src="resources/reference.png">
-<img style="-webkit-filter: url(#in);   filter: url(#in);   -webkit-transform: translateZ(0);"   src="resources/reference.png">
-<img style="-webkit-filter: url(#out);  filter: url(#out);  -webkit-transform: translateZ(0);"  src="resources/reference.png">
-<img style="-webkit-filter: url(#atop); filter: url(#atop); -webkit-transform: translateZ(0);" src="resources/reference.png">
-<img style="-webkit-filter: url(#xor);  filter: url(#xor);  -webkit-transform: translateZ(0);"  src="resources/reference.png">
+<img style="filter: url(#over); filter: url(#over); -webkit-transform: translateZ(0);" src="resources/reference.png">
+<img style="filter: url(#in);   filter: url(#in);   -webkit-transform: translateZ(0);"   src="resources/reference.png">
+<img style="filter: url(#out);  filter: url(#out);  -webkit-transform: translateZ(0);"  src="resources/reference.png">
+<img style="filter: url(#atop); filter: url(#atop); -webkit-transform: translateZ(0);" src="resources/reference.png">
+<img style="filter: url(#xor);  filter: url(#xor);  -webkit-transform: translateZ(0);"  src="resources/reference.png">
index 548161d..f158a3c 100644 (file)
@@ -27,8 +27,8 @@ img {
     margin: 10px;
 }
 </style>
-<img style="-webkit-filter: url(#over); filter: url(#over);" src="resources/reference.png">
-<img style="-webkit-filter: url(#in);   filter: url(#in);"   src="resources/reference.png">
-<img style="-webkit-filter: url(#out);  filter: url(#out);"  src="resources/reference.png">
-<img style="-webkit-filter: url(#atop); filter: url(#atop);" src="resources/reference.png">
-<img style="-webkit-filter: url(#xor);  filter: url(#xor);"  src="resources/reference.png">
+<img style="filter: url(#over); filter: url(#over);" src="resources/reference.png">
+<img style="filter: url(#in);   filter: url(#in);"   src="resources/reference.png">
+<img style="filter: url(#out);  filter: url(#out);"  src="resources/reference.png">
+<img style="filter: url(#atop); filter: url(#atop);" src="resources/reference.png">
+<img style="filter: url(#xor);  filter: url(#xor);"  src="resources/reference.png">
index 40fbc8e..828f1cb 100644 (file)
@@ -46,12 +46,12 @@ img {
 }
 </style>
 <img src="resources/reference.png">
-<img style="-webkit-filter: url(#colormatrix); filter: url(#colormatrix);" src="resources/reference.png">
-<img style="-webkit-filter: url(#morphology); filter: url(#morphology);" src="resources/reference.png">
-<img style="-webkit-filter: url(#componenttransfer); filter: url(#componenttransfer);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blurY); filter: url(#blurY);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blend); filter: url(#blend);" src="resources/reference.png">
-<img style="-webkit-filter: url(#lighting); filter: url(#lighting);" src="resources/reference.png">
-<img style="-webkit-filter: url(#offset); filter: url(#offset);" src="resources/reference.png">
-<img style="-webkit-filter: url(#convolvematrix); filter: url(#convolvematrix);" src="resources/reference.png">
-<img style="-webkit-filter: url(#displacement); filter: url(#displacement);" src="resources/reference.png">
+<img style="filter: url(#colormatrix); filter: url(#colormatrix);" src="resources/reference.png">
+<img style="filter: url(#morphology); filter: url(#morphology);" src="resources/reference.png">
+<img style="filter: url(#componenttransfer); filter: url(#componenttransfer);" src="resources/reference.png">
+<img style="filter: url(#blurY); filter: url(#blurY);" src="resources/reference.png">
+<img style="filter: url(#blend); filter: url(#blend);" src="resources/reference.png">
+<img style="filter: url(#lighting); filter: url(#lighting);" src="resources/reference.png">
+<img style="filter: url(#offset); filter: url(#offset);" src="resources/reference.png">
+<img style="filter: url(#convolvematrix); filter: url(#convolvematrix);" src="resources/reference.png">
+<img style="filter: url(#displacement); filter: url(#displacement);" src="resources/reference.png">
index 2ea1d89..a5e1502 100644 (file)
@@ -14,7 +14,7 @@ img {
     -webkit-transform:  translateZ(0);
 }
 </style>
-<img style="-webkit-filter: url(#blurY);" src="resources/reference.png">
-<img style="-webkit-filter: contrast(500%) url(#blurY);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blurY) contrast(500%);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blurX) contrast(500%); url(#blurY);" src="resources/reference.png">
+<img style="filter: url(#blurY);" src="resources/reference.png">
+<img style="filter: contrast(500%) url(#blurY);" src="resources/reference.png">
+<img style="filter: url(#blurY) contrast(500%);" src="resources/reference.png">
+<img style="filter: url(#blurX) contrast(500%); url(#blurY);" src="resources/reference.png">
index ffe16cc..8dac7dd 100644 (file)
@@ -13,7 +13,7 @@ img {
     margin: 10px;
 }
 </style>
-<img style="-webkit-filter: url(#blurY);" src="resources/reference.png">
-<img style="-webkit-filter: contrast(500%) url(#blurY);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blurY) contrast(500%);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blurX) contrast(500%); url(#blurY);" src="resources/reference.png">
+<img style="filter: url(#blurY);" src="resources/reference.png">
+<img style="filter: contrast(500%) url(#blurY);" src="resources/reference.png">
+<img style="filter: url(#blurY) contrast(500%);" src="resources/reference.png">
+<img style="filter: url(#blurX) contrast(500%); url(#blurY);" src="resources/reference.png">
index 0d4f786..7567b45 100644 (file)
@@ -45,12 +45,12 @@ img {
 }
 </style>
 <img src="resources/reference.png">
-<img style="-webkit-filter: url(#colormatrix); filter: url(#colormatrix);" src="resources/reference.png">
-<img style="-webkit-filter: url(#morphology); filter: url(#morphology);" src="resources/reference.png">
-<img style="-webkit-filter: url(#componenttransfer); filter: url(#componenttransfer);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blurY); filter: url(#blurY);" src="resources/reference.png">
-<img style="-webkit-filter: url(#blend); filter: url(#blend);" src="resources/reference.png">
-<img style="-webkit-filter: url(#lighting); filter: url(#lighting);" src="resources/reference.png">
-<img style="-webkit-filter: url(#offset); filter: url(#offset);" src="resources/reference.png">
-<img style="-webkit-filter: url(#convolvematrix); filter: url(#convolvematrix);" src="resources/reference.png">
-<img style="-webkit-filter: url(#displacement); filter: url(#displacement);" src="resources/reference.png">
+<img style="filter: url(#colormatrix); filter: url(#colormatrix);" src="resources/reference.png">
+<img style="filter: url(#morphology); filter: url(#morphology);" src="resources/reference.png">
+<img style="filter: url(#componenttransfer); filter: url(#componenttransfer);" src="resources/reference.png">
+<img style="filter: url(#blurY); filter: url(#blurY);" src="resources/reference.png">
+<img style="filter: url(#blend); filter: url(#blend);" src="resources/reference.png">
+<img style="filter: url(#lighting); filter: url(#lighting);" src="resources/reference.png">
+<img style="filter: url(#offset); filter: url(#offset);" src="resources/reference.png">
+<img style="filter: url(#convolvematrix); filter: url(#convolvematrix);" src="resources/reference.png">
+<img style="filter: url(#displacement); filter: url(#displacement);" src="resources/reference.png">
index 895881a..7df46ee 100644 (file)
@@ -3,9 +3,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: saturate(0)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(0.5)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(1.0)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(2)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(5)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(10)" src="resources/reference.png">
+<img style="filter: saturate(0)" src="resources/reference.png">
+<img style="filter: saturate(0.5)" src="resources/reference.png">
+<img style="filter: saturate(1.0)" src="resources/reference.png">
+<img style="filter: saturate(2)" src="resources/reference.png">
+<img style="filter: saturate(5)" src="resources/reference.png">
+<img style="filter: saturate(10)" src="resources/reference.png">
index ca2c576..7b3e1f1 100644 (file)
@@ -4,9 +4,9 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: saturate(0)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(0.5)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(1.0)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(2)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(5)" src="resources/reference.png">
-<img style="-webkit-filter: saturate(10)" src="resources/reference.png">
+<img style="filter: saturate(0)" src="resources/reference.png">
+<img style="filter: saturate(0.5)" src="resources/reference.png">
+<img style="filter: saturate(1.0)" src="resources/reference.png">
+<img style="filter: saturate(2)" src="resources/reference.png">
+<img style="filter: saturate(5)" src="resources/reference.png">
+<img style="filter: saturate(10)" src="resources/reference.png">
index 5aabec7..c7d708b 100644 (file)
@@ -3,9 +3,9 @@ img {
     -webkit-transform:translateZ(0);
 }
 </style>
-<img style="-webkit-filter: sepia(0)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(1.0)" src="resources/reference.png">
+<img style="filter: sepia(0)" src="resources/reference.png">
+<img style="filter: sepia(0.2)" src="resources/reference.png">
+<img style="filter: sepia(0.4)" src="resources/reference.png">
+<img style="filter: sepia(0.6)" src="resources/reference.png">
+<img style="filter: sepia(0.8)" src="resources/reference.png">
+<img style="filter: sepia(1.0)" src="resources/reference.png">
index 322f03b..72b0898 100644 (file)
@@ -4,9 +4,9 @@ if (window.testRunner) {
     window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
 }
 </script>
-<img style="-webkit-filter: sepia(0)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.2)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.4)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.6)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(0.8)" src="resources/reference.png">
-<img style="-webkit-filter: sepia(1.0)" src="resources/reference.png">
+<img style="filter: sepia(0)" src="resources/reference.png">
+<img style="filter: sepia(0.2)" src="resources/reference.png">
+<img style="filter: sepia(0.4)" src="resources/reference.png">
+<img style="filter: sepia(0.6)" src="resources/reference.png">
+<img style="filter: sepia(0.8)" src="resources/reference.png">
+<img style="filter: sepia(1.0)" src="resources/reference.png">
index c392066..6d46ae2 100644 (file)
@@ -1,4 +1,4 @@
-Test the computed style of the -webkit-filter property.
+Test the computed style of the filter property.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
index c297333..82f5548 100644 (file)
@@ -1,4 +1,4 @@
-Test the parsing of the -webkit-filter property.
+Test the parsing of the filter property.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
@@ -7,7 +7,7 @@ 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-filter') is 'url(#a)'
+PASS declaration.getPropertyValue('filter') is 'url(#a)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -18,7 +18,7 @@ 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-filter') is 'url(#a)'
+PASS declaration.getPropertyValue('filter') is 'url(#a)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -29,7 +29,7 @@ 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-filter') is 'url(#a) url(#b)'
+PASS declaration.getPropertyValue('filter') is 'url(#a) url(#b)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -42,7 +42,7 @@ 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-filter') is 'grayscale(1) url(#a)'
+PASS declaration.getPropertyValue('filter') is 'grayscale(1) url(#a)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -55,7 +55,7 @@ PASS subRule.cssText is 'url(#a)'
 Integer value : grayscale(1)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'grayscale(1)'
+PASS declaration.getPropertyValue('filter') is 'grayscale(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -66,7 +66,7 @@ PASS subRule.cssText is 'grayscale(1)'
 Percentage value : grayscale(50%)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'grayscale(50%)'
+PASS declaration.getPropertyValue('filter') is 'grayscale(50%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -77,7 +77,7 @@ 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-filter') is 'grayscale(1)'
+PASS declaration.getPropertyValue('filter') is 'grayscale(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -88,7 +88,7 @@ PASS subRule.cssText is 'grayscale(1)'
 Zero value : grayscale(0)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'grayscale(0)'
+PASS declaration.getPropertyValue('filter') is 'grayscale(0)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -99,7 +99,7 @@ PASS subRule.cssText is 'grayscale(0)'
 No values : grayscale()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'grayscale()'
+PASS declaration.getPropertyValue('filter') is 'grayscale()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -110,7 +110,7 @@ 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-filter') is 'grayscale(0.5) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -123,7 +123,7 @@ 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-filter') is 'sepia(1)'
+PASS declaration.getPropertyValue('filter') is 'sepia(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -134,7 +134,7 @@ PASS subRule.cssText is 'sepia(1)'
 Percentage value : sepia(50%)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'sepia(50%)'
+PASS declaration.getPropertyValue('filter') is 'sepia(50%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -145,7 +145,7 @@ 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-filter') is 'sepia(1)'
+PASS declaration.getPropertyValue('filter') is 'sepia(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -156,7 +156,7 @@ PASS subRule.cssText is 'sepia(1)'
 Zero value : sepia(0)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'sepia(0)'
+PASS declaration.getPropertyValue('filter') is 'sepia(0)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -167,7 +167,7 @@ PASS subRule.cssText is 'sepia(0)'
 No values : sepia()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'sepia()'
+PASS declaration.getPropertyValue('filter') is 'sepia()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -178,7 +178,7 @@ 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-filter') is 'sepia(0.5) sepia(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -191,7 +191,7 @@ 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-filter') is 'sepia(0.5) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -204,7 +204,7 @@ 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-filter') is 'saturate(1)'
+PASS declaration.getPropertyValue('filter') is 'saturate(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -215,7 +215,7 @@ PASS subRule.cssText is 'saturate(1)'
 Percentage value : saturate(50%)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'saturate(50%)'
+PASS declaration.getPropertyValue('filter') is 'saturate(50%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -226,7 +226,7 @@ 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-filter') is 'saturate(250%)'
+PASS declaration.getPropertyValue('filter') is 'saturate(250%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -237,7 +237,7 @@ 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-filter') is 'saturate(1)'
+PASS declaration.getPropertyValue('filter') is 'saturate(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -248,7 +248,7 @@ 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-filter') is 'saturate(5.5)'
+PASS declaration.getPropertyValue('filter') is 'saturate(5.5)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -259,7 +259,7 @@ 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-filter') is 'saturate(0)'
+PASS declaration.getPropertyValue('filter') is 'saturate(0)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -270,7 +270,7 @@ PASS subRule.cssText is 'saturate(0)'
 No values : saturate()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'saturate()'
+PASS declaration.getPropertyValue('filter') is 'saturate()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -281,7 +281,7 @@ 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-filter') is 'saturate(0.5) saturate(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -294,7 +294,7 @@ 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-filter') is 'saturate(0.5) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -307,7 +307,7 @@ 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-filter') is 'hue-rotate(10deg)'
+PASS declaration.getPropertyValue('filter') is 'hue-rotate(10deg)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -318,7 +318,7 @@ 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-filter') is 'hue-rotate(10deg)'
+PASS declaration.getPropertyValue('filter') is 'hue-rotate(10deg)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -329,7 +329,7 @@ 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-filter') is 'hue-rotate(10rad)'
+PASS declaration.getPropertyValue('filter') is 'hue-rotate(10rad)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -340,7 +340,7 @@ 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-filter') is 'hue-rotate(10grad)'
+PASS declaration.getPropertyValue('filter') is 'hue-rotate(10grad)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -351,7 +351,7 @@ 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-filter') is 'hue-rotate(0.5turn)'
+PASS declaration.getPropertyValue('filter') is 'hue-rotate(0.5turn)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -362,7 +362,7 @@ 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-filter') is 'hue-rotate(0deg)'
+PASS declaration.getPropertyValue('filter') is 'hue-rotate(0deg)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -373,7 +373,7 @@ 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-filter') is 'hue-rotate()'
+PASS declaration.getPropertyValue('filter') is 'hue-rotate()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -384,7 +384,7 @@ 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-filter') is 'hue-rotate(10deg) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -397,7 +397,7 @@ 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-filter') is 'invert(1)'
+PASS declaration.getPropertyValue('filter') is 'invert(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -408,7 +408,7 @@ PASS subRule.cssText is 'invert(1)'
 Percentage value : invert(50%)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'invert(50%)'
+PASS declaration.getPropertyValue('filter') is 'invert(50%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -419,7 +419,7 @@ 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-filter') is 'invert(1)'
+PASS declaration.getPropertyValue('filter') is 'invert(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -430,7 +430,7 @@ PASS subRule.cssText is 'invert(1)'
 Zero value : invert(0)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'invert(0)'
+PASS declaration.getPropertyValue('filter') is 'invert(0)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -441,7 +441,7 @@ PASS subRule.cssText is 'invert(0)'
 No values : invert()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'invert()'
+PASS declaration.getPropertyValue('filter') is 'invert()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -452,7 +452,7 @@ 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-filter') is 'invert(0.5) invert(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -465,7 +465,7 @@ 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-filter') is 'invert(0.5) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -478,7 +478,7 @@ 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-filter') is 'opacity(1)'
+PASS declaration.getPropertyValue('filter') is 'opacity(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -489,7 +489,7 @@ PASS subRule.cssText is 'opacity(1)'
 Percentage value : opacity(50%)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'opacity(50%)'
+PASS declaration.getPropertyValue('filter') is 'opacity(50%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -500,7 +500,7 @@ 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-filter') is 'opacity(1)'
+PASS declaration.getPropertyValue('filter') is 'opacity(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -511,7 +511,7 @@ PASS subRule.cssText is 'opacity(1)'
 Zero value : opacity(0)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'opacity(0)'
+PASS declaration.getPropertyValue('filter') is 'opacity(0)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -522,7 +522,7 @@ PASS subRule.cssText is 'opacity(0)'
 No values : opacity()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'opacity()'
+PASS declaration.getPropertyValue('filter') is 'opacity()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -533,7 +533,7 @@ 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-filter') is 'opacity(0.5) opacity(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -546,7 +546,7 @@ 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-filter') is 'opacity(0.5) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -559,7 +559,7 @@ 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-filter') is 'brightness(1)'
+PASS declaration.getPropertyValue('filter') is 'brightness(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -570,7 +570,7 @@ PASS subRule.cssText is 'brightness(1)'
 Percentage value : brightness(50%)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'brightness(50%)'
+PASS declaration.getPropertyValue('filter') is 'brightness(50%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -581,7 +581,7 @@ 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-filter') is 'brightness(1)'
+PASS declaration.getPropertyValue('filter') is 'brightness(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -592,7 +592,7 @@ PASS subRule.cssText is 'brightness(1)'
 Zero value : brightness(0)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'brightness(0)'
+PASS declaration.getPropertyValue('filter') is 'brightness(0)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -603,7 +603,7 @@ PASS subRule.cssText is 'brightness(0)'
 No values : brightness()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'brightness()'
+PASS declaration.getPropertyValue('filter') is 'brightness()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -614,7 +614,7 @@ 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-filter') is 'brightness(0.5) brightness(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -627,7 +627,7 @@ 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-filter') is 'brightness(0.5) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -640,7 +640,7 @@ 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-filter') is 'brightness(-1.1)'
+PASS declaration.getPropertyValue('filter') is 'brightness(-1.1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -651,7 +651,7 @@ 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-filter') is 'brightness(101%)'
+PASS declaration.getPropertyValue('filter') is 'brightness(101%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -662,7 +662,7 @@ 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-filter') is 'grayscale(0.25) brightness(0.5)'
+PASS declaration.getPropertyValue('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'
@@ -675,7 +675,7 @@ 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-filter') is 'contrast(1)'
+PASS declaration.getPropertyValue('filter') is 'contrast(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -686,7 +686,7 @@ PASS subRule.cssText is 'contrast(1)'
 Percentage value : contrast(50%)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'contrast(50%)'
+PASS declaration.getPropertyValue('filter') is 'contrast(50%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -697,7 +697,7 @@ 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-filter') is 'contrast(250%)'
+PASS declaration.getPropertyValue('filter') is 'contrast(250%)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -708,7 +708,7 @@ 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-filter') is 'contrast(1)'
+PASS declaration.getPropertyValue('filter') is 'contrast(1)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -719,7 +719,7 @@ PASS subRule.cssText is 'contrast(1)'
 Zero value : contrast(0)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'contrast(0)'
+PASS declaration.getPropertyValue('filter') is 'contrast(0)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -730,7 +730,7 @@ PASS subRule.cssText is 'contrast(0)'
 No values : contrast()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'contrast()'
+PASS declaration.getPropertyValue('filter') is 'contrast()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -741,7 +741,7 @@ 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-filter') is 'contrast(2)'
+PASS declaration.getPropertyValue('filter') is 'contrast(2)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -752,7 +752,7 @@ 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-filter') is 'contrast(0.5) contrast(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -765,7 +765,7 @@ 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-filter') is 'contrast(0.5) grayscale(0.25)'
+PASS declaration.getPropertyValue('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'
@@ -778,7 +778,7 @@ 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-filter') is 'grayscale(0.25) contrast(0.5)'
+PASS declaration.getPropertyValue('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'
@@ -791,7 +791,7 @@ 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-filter') is 'blur(0px)'
+PASS declaration.getPropertyValue('filter') is 'blur(0px)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -802,7 +802,7 @@ PASS subRule.cssText is 'blur(0px)'
 One length : blur(10px)
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'blur(10px)'
+PASS declaration.getPropertyValue('filter') is 'blur(10px)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -813,7 +813,7 @@ PASS subRule.cssText is 'blur(10px)'
 No values : blur()
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-filter') is 'blur()'
+PASS declaration.getPropertyValue('filter') is 'blur()'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -824,7 +824,7 @@ 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-filter') is 'drop-shadow(red 1px 2px 3px)'
+PASS declaration.getPropertyValue('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'
@@ -835,7 +835,7 @@ 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-filter') is 'drop-shadow(red 1px 2px 3px)'
+PASS declaration.getPropertyValue('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'
@@ -846,7 +846,7 @@ 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-filter') is 'drop-shadow(rgb(170, 187, 204) 0px 0px 0px)'
+PASS declaration.getPropertyValue('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'
@@ -857,7 +857,7 @@ 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-filter') is 'drop-shadow(0px 0px 0px)'
+PASS declaration.getPropertyValue('filter') is 'drop-shadow(0px 0px 0px)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -868,7 +868,7 @@ 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-filter') is 'drop-shadow(1px 2px)'
+PASS declaration.getPropertyValue('filter') is 'drop-shadow(1px 2px)'
 PASS jsWrapperClass(filterRule) is 'CSSValueList'
 PASS jsWrapperClass(filterRule.__proto__) is 'CSSValueListPrototype'
 PASS jsWrapperClass(filterRule.constructor) is 'CSSValueListConstructor'
@@ -879,7 +879,7 @@ 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-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 declaration.getPropertyValue('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'
index 46c1b9b..c9832fe 100644 (file)
@@ -1,4 +1,4 @@
-description("Test the computed style of the -webkit-filter property.");
+description("Test the computed style of the filter property.");
 
 // These have to be global for the test helpers to see them.
 var stylesheet, filterStyle, subRule;
@@ -11,9 +11,9 @@ function testComputedFilterRule(description, rule, expectedLength, expectedTypes
     debug("");
     debug(description + " : " + rule);
 
-    stylesheet.insertRule("body { -webkit-filter: " + rule + "; }", 0);
+    stylesheet.insertRule("body { filter: " + rule + "; }", 0);
 
-    filterStyle = window.getComputedStyle(document.body).getPropertyCSSValue('-webkit-filter');
+    filterStyle = window.getComputedStyle(document.body).getPropertyCSSValue("filter");
     shouldBe("filterStyle.length", "" + expectedLength);
     for (var i = 0; i < expectedLength; i++) {
         subRule = filterStyle[i];
index 5446463..1ff126c 100644 (file)
@@ -1,4 +1,4 @@
-description("Test the parsing of the -webkit-filter property.");
+description("Test the parsing of the filter property.");
 
 function jsWrapperClass(node)
 {
@@ -30,16 +30,16 @@ function testFilterRule(description, rule, expectedLength, expectedValue, expect
     debug("");
     debug(description + " : " + rule);
 
-    stylesheet.insertRule("body { -webkit-filter: " + rule + "; }", 0);
+    stylesheet.insertRule("body { filter: " + rule + "; }", 0);
     cssRule = stylesheet.cssRules.item(0);
   
     shouldBe("cssRule.type", "1");
 
     declaration = cssRule.style;
     shouldBe("declaration.length", "1");
-    shouldBe("declaration.getPropertyValue('-webkit-filter')", "'" + expectedValue + "'");
+    shouldBe("declaration.getPropertyValue('filter')", "'" + expectedValue + "'");
 
-    filterRule = declaration.getPropertyCSSValue('-webkit-filter');
+    filterRule = declaration.getPropertyCSSValue("filter");
     shouldBeType("filterRule", "CSSValueList");
   
     shouldBe("filterRule.length", "" + expectedLength); // shouldBe expects string arguments
diff --git a/LayoutTests/css3/filters/script-tests/unprefixed.js b/LayoutTests/css3/filters/script-tests/unprefixed.js
new file mode 100644 (file)
index 0000000..a3b883a
--- /dev/null
@@ -0,0 +1,383 @@
+description("Test that -webkit-filter matches filter.");
+
+// 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-filter: " + rule + "; }", 0);
+
+    filterStyle = window.getComputedStyle(document.body).getPropertyCSSValue("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/unprefixed-expected.txt b/LayoutTests/css3/filters/unprefixed-expected.txt
new file mode 100644 (file)
index 0000000..78ca4e3
--- /dev/null
@@ -0,0 +1,390 @@
+Test that -webkit-filter matches filter.
+
+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/unprefixed.html b/LayoutTests/css3/filters/unprefixed.html
new file mode 100644 (file)
index 0000000..af497be
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script src="script-tests/unprefixed.js"></script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
index cef8ffe..ced4cf1 100644 (file)
@@ -151,6 +151,7 @@ column-width: auto;
 align-content: start;
 align-items: start;
 align-self: start;
+filter: none;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: start;
index 069ab4f..bd01bc6 100644 (file)
@@ -12,7 +12,7 @@
             border-radius: 50% 50%;
         }
         .inner {
-            -webkit-filter: drop-shadow(16px 16px 0px black);
+            filter: drop-shadow(16px 16px 0px black);
             background-color: red;
             height: 60px;
             width: 200px;
index a4556ff..6af518b 100644 (file)
@@ -14,7 +14,7 @@
         }
 
         .inner {
-            -webkit-filter: drop-shadow(16px 16px 0px black);
+            filter: drop-shadow(16px 16px 0px black);
             background-color: red;
             height: 60px;
             width: 200px;
index 46f5c1c..6118ccc 100644 (file)
@@ -1,15 +1,15 @@
             
-PASS - "backgroundImage" property for "brightness" element at 1s saw something close to: -webkit-filter(url(image.svg), brightness(0.5))
-PASS - "backgroundImage" property for "blur" element at 1s saw something close to: -webkit-filter(url(image.svg), blur(5px))
-PASS - "backgroundImage" property for "grayscale" element at 1s saw something close to: -webkit-filter(url(image.svg), grayscale(0.5))
-PASS - "backgroundImage" property for "sepia" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.5))
-PASS - "backgroundImage" property for "no" element at 1s saw something close to: -webkit-filter(url(blue.svg), sepia(0))
-PASS - "backgroundImage" property for "string" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.5))
-PASS - "backgroundImage" property for "multiple1" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))
-PASS - "backgroundImage" property for "multiple2" element at 1s saw something close to: -webkit-filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))
-PASS - "backgroundImage" property for "urlfilter" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.25))
-PASS - "backgroundImage" property for "filterurl" element at 1s saw something close to: -webkit-filter(url(image.svg), sepia(0.25))
-PASS - "backgroundImage" property for "filterdiffurl" element at 1s saw something close to: -webkit-filter(url(blue.svg), sepia(0.5))
-PASS - "backgroundImage" property for "generated1" element at 1s saw something close to: -webkit-filter(-webkit-filter(url(image.svg), blur(3px)), sepia(0))
-PASS - "backgroundImage" property for "generated2" element at 1s saw something close to: -webkit-filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))
+PASS - "backgroundImage" property for "brightness" element at 1s saw something close to: filter(url(image.svg), brightness(0.5))
+PASS - "backgroundImage" property for "blur" element at 1s saw something close to: filter(url(image.svg), blur(5px))
+PASS - "backgroundImage" property for "grayscale" element at 1s saw something close to: filter(url(image.svg), grayscale(0.5))
+PASS - "backgroundImage" property for "sepia" element at 1s saw something close to: filter(url(image.svg), sepia(0.5))
+PASS - "backgroundImage" property for "no" element at 1s saw something close to: filter(url(blue.svg), sepia(0))
+PASS - "backgroundImage" property for "string" element at 1s saw something close to: filter(url(image.svg), sepia(0.5))
+PASS - "backgroundImage" property for "multiple1" element at 1s saw something close to: filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))
+PASS - "backgroundImage" property for "multiple2" element at 1s saw something close to: filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))
+PASS - "backgroundImage" property for "urlfilter" element at 1s saw something close to: filter(url(image.svg), sepia(0.25))
+PASS - "backgroundImage" property for "filterurl" element at 1s saw something close to: filter(url(image.svg), sepia(0.25))
+PASS - "backgroundImage" property for "filterdiffurl" element at 1s saw something close to: filter(url(blue.svg), sepia(0.5))
+PASS - "backgroundImage" property for "generated1" element at 1s saw something close to: filter(filter(url(image.svg), blur(3px)), sepia(0))
+PASS - "backgroundImage" property for "generated2" element at 1s saw something close to: filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))
 
index 9316acb..262230c 100644 (file)
     }
 
     @-webkit-keyframes brightness-anim {
-        from { background-image: -webkit-filter(url(resources/image.svg), brightness(1)); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), brightness(0)); }
+        from { background-image: filter(url(resources/image.svg), brightness(1)); }
+        to   { background-image: filter(url(resources/image.svg), brightness(0)); }
     }
 
     @-webkit-keyframes blur-anim {
-        from { background-image: -webkit-filter(url(resources/image.svg), blur(0)); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), blur(10px)); }
+        from { background-image: filter(url(resources/image.svg), blur(0)); }
+        to   { background-image: filter(url(resources/image.svg), blur(10px)); }
     }
 
     @-webkit-keyframes grayscale-anim {
-        from { background-image: -webkit-filter(url(resources/image.svg), grayscale(1)); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), grayscale(0)); }
+        from { background-image: filter(url(resources/image.svg), grayscale(1)); }
+        to   { background-image: filter(url(resources/image.svg), grayscale(0)); }
     }
 
     @-webkit-keyframes sepia-anim {
-        from { background-image: -webkit-filter(url(resources/image.svg), sepia(1)); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), sepia(0)); }
+        from { background-image: filter(url(resources/image.svg), sepia(1)); }
+        to   { background-image: filter(url(resources/image.svg), sepia(0)); }
     }
 
     @-webkit-keyframes no-anim {
-        from { background-image: -webkit-filter(url(resources/image.svg), sepia(1)); }
-        to   { background-image: -webkit-filter(url(resources/blue.svg), sepia(0)); }
+        from { background-image: filter(url(resources/image.svg), sepia(1)); }
+        to   { background-image: filter(url(resources/blue.svg), sepia(0)); }
     }
 
     @-webkit-keyframes string-anim {
-        from { background-image: -webkit-filter('resources/image.svg', sepia(1)); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), sepia(0)); }
+        from { background-image: filter('resources/image.svg', sepia(1)); }
+        to   { background-image: filter(url(resources/image.svg), sepia(0)); }
     }
 
     @-webkit-keyframes multiple-anim1 {
-        from { background-image: -webkit-filter(url(resources/image.svg), sepia(0.25) blur(3px) hue-rotate(45deg)); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), sepia(0.75)); }
+        from { background-image: filter(url(resources/image.svg), sepia(0.25) blur(3px) hue-rotate(45deg)); }
+        to   { background-image: filter(url(resources/image.svg), sepia(0.75)); }
     }
 
     @-webkit-keyframes multiple-anim2 {
-        from { background-image: -webkit-filter(url(resources/image.svg), contrast(0.25)); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), contrast(0.75) blur(3px) hue-rotate(45deg)); }
+        from { background-image: filter(url(resources/image.svg), contrast(0.25)); }
+        to   { background-image: filter(url(resources/image.svg), contrast(0.75) blur(3px) hue-rotate(45deg)); }
     }
 
     @-webkit-keyframes url-to-filter-anim {
         from { background-image: url(resources/image.svg); }
-        to   { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
+        to   { background-image: filter(url(resources/image.svg), sepia(0.5)); }
     }
 
     @-webkit-keyframes filter-to-url-anim {
-        from { background-image: -webkit-filter(url(resources/image.svg), sepia(0.5)); }
+        from { background-image: filter(url(resources/image.svg), sepia(0.5)); }
         to   { background-image: url(resources/image.svg); }
     }
 
     @-webkit-keyframes filter-diff-url-anim {
         from { background-image: url(resources/image.svg); }
-        to   { background-image: -webkit-filter(url(resources/blue.svg), sepia(0.5)); }
+        to   { background-image: filter(url(resources/blue.svg), sepia(0.5)); }
     }
 
     @-webkit-keyframes generated-anim1 {
-        from { background-image: -webkit-filter(-webkit-filter(url(resources/image.svg), blur(3px)), sepia(1)); }
-        to   { background-image: -webkit-filter(-webkit-filter(url(resources/image.svg), blur(3px)), sepia(0)); }
+        from { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(1)); }
+        to   { background-image: filter(filter(url(resources/image.svg), blur(3px)), sepia(0)); }
     }
 
     @-webkit-keyframes generated-anim2 {
-        from { background-image: -webkit-filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(1)); }
-        to   { background-image: -webkit-filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(0)); }
+        from { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(1)); }
+        to   { background-image: filter(-webkit-cross-fade(url(resources/image.svg), url(resources/image.svg), 50%), sepia(0)); }
     }
   </style>
   <script src="../../animations/resources/animation-test-helpers.js"></script>
   <script type="text/javascript">
     const expectedValues = [
       // [animation-name, time, element-id, property, expected-value, tolerance]
-      ["brightness-anim",  1, "brightness", "backgroundImage", "-webkit-filter(url(image.svg), brightness(0.5))", 0.05],
-      ["blur-anim",  1, "blur", "backgroundImage", "-webkit-filter(url(image.svg), blur(5px))", 0.05],
-      ["grayscale-anim",  1, "grayscale", "backgroundImage", "-webkit-filter(url(image.svg), grayscale(0.5))", 0.05],
-      ["sepia-anim",  1, "sepia", "backgroundImage", "-webkit-filter(url(image.svg), sepia(0.5))", 0.05],
-      ["no-anim",  1, "no", "backgroundImage", "-webkit-filter(url(blue.svg), sepia(0))", 0],
-      ["string-anim",  1, "string", "backgroundImage", "-webkit-filter(url(image.svg), sepia(0.5))", 0],
-      ["multiple-anim1",  1, "multiple1", "backgroundImage", "-webkit-filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
-      ["multiple-anim2",  1, "multiple2", "backgroundImage", "-webkit-filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
-      ["url-to-filter-anim",  1, "urlfilter", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.25))", 0.05],
-      ["filter-to-url-anim",  1, "filterurl", "backgroundImage", " -webkit-filter(url(image.svg), sepia(0.25))", 0.05],
-      ["filter-diff-url-anim",  1, "filterdiffurl", "backgroundImage", " -webkit-filter(url(blue.svg), sepia(0.5))", 0],
+      ["brightness-anim",  1, "brightness", "backgroundImage", "filter(url(image.svg), brightness(0.5))", 0.05],
+      ["blur-anim",  1, "blur", "backgroundImage", "filter(url(image.svg), blur(5px))", 0.05],
+      ["grayscale-anim",  1, "grayscale", "backgroundImage", "filter(url(image.svg), grayscale(0.5))", 0.05],
+      ["sepia-anim",  1, "sepia", "backgroundImage", "filter(url(image.svg), sepia(0.5))", 0.05],
+      ["no-anim",  1, "no", "backgroundImage", "filter(url(blue.svg), sepia(0))", 0],
+      ["string-anim",  1, "string", "backgroundImage", "filter(url(image.svg), sepia(0.5))", 0],
+      ["multiple-anim1",  1, "multiple1", "backgroundImage", "filter(url(image.svg), sepia(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
+      ["multiple-anim2",  1, "multiple2", "backgroundImage", "filter(url(image.svg), contrast(0.5) blur(1.5px) hue-rotate(22.5deg))", 0.05],
+      ["url-to-filter-anim",  1, "urlfilter", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
+      ["filter-to-url-anim",  1, "filterurl", "backgroundImage", " filter(url(image.svg), sepia(0.25))", 0.05],
+      ["filter-diff-url-anim",  1, "filterdiffurl", "backgroundImage", " filter(url(blue.svg), sepia(0.5))", 0],
       // FIXME: We need to support generated images as input to other generated images for animations first.
-      ["generated-anim1",  1, "generated1", "backgroundImage", "-webkit-filter(-webkit-filter(url(image.svg), blur(3px)), sepia(0))", 0],
-      ["generated-anim2",  1, "generated2", "backgroundImage", "-webkit-filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))", 0],
+      ["generated-anim1",  1, "generated1", "backgroundImage", "filter(filter(url(image.svg), blur(3px)), sepia(0))", 0],
+      ["generated-anim2",  1, "generated2", "backgroundImage", "filter(-webkit-cross-fade(url(image.svg), url(image.svg), 50%), sepia(0))", 0],
     ];
     
     runAnimationTest(expectedValues);
index 83456dd..a12b3fc 100644 (file)
@@ -6,7 +6,7 @@
     div {
       width: 200px;
       height: 100px;
-      background-image: -webkit-filter(url(resources/svg-noblur.svg), blur(3px));
+      background-image: filter(url(resources/svg-noblur.svg), blur(3px));
     }
   </style>
 </head>
index 07d1b31..52205d9 100644 (file)
@@ -2,42 +2,45 @@
 <html lang="en">
 <head>
 <style>
-img    {
-       width: 50px;
-       height: 50px;
-       margin: 0;
-       padding: 0;
-       float: left;
+img {
+    width: 50px;
+    height: 50px;
+    margin: 0;
+    padding: 0;
+    float: left;
 }
 .f0 {
-       -webkit-filter: brightness(0.5);
+    filter: brightness(0.5);
 }
 .f1 {
-       -webkit-filter: contrast(0.5);
+    filter: contrast(0.5);
 }
 .f2 {
-       -webkit-filter: saturate(0.5);
+    filter: saturate(0.5);
 }
 .f3 {
-       -webkit-filter: sepia(0.5);
+    filter: sepia(0.5);
 }
 .f4 {
-       -webkit-filter: grayscale(0.5);
+    filter: grayscale(0.5);
 }
 .f5 {
-       -webkit-filter: invert(0.5);
+    filter: invert(0.5);
 }
 .f6 {
-       -webkit-filter: opacity(0.5);
+    filter: opacity(0.5);
 }
 .f7 {
-       -webkit-filter: sepia(0.3) brightness(1.2) contrast(0.2);
+    filter: sepia(0.3) brightness(1.2) contrast(0.2);
 }
 .f8 {
-       -webkit-filter: brightness(0.5) sepia(0.3) brightness(1.2) contrast(0.2);
+    filter: brightness(0.5) sepia(0.3) brightness(1.2) contrast(0.2);
 }
 .f9 {
-       -webkit-filter: contrast(0.5) contrast(1.5);
+    filter: contrast(0.5) contrast(1.5);
+}
+.f10 {
+    filter: contrast(0.5);
 }
 </style>
 </head>
@@ -52,5 +55,6 @@ img   {
 <img class="f7" src="resources/image.svg">
 <img class="f8" src="resources/image.svg">
 <img class="f9" src="resources/image.svg">
+<img class="f10" src="resources/image.svg">
 </body>
 </html>
\ No newline at end of file
index c8d98d6..2934581 100644 (file)
@@ -8,7 +8,7 @@
   </script>
   <style>
 div {
-       background-image: -webkit-filter(url(image.svg), url(#filter));
+       background-image: filter(url(image.svg), url(#filter));
        width: 100px;
        height: 100px;
 }
index fee106b..150ed08 100644 (file)
@@ -2,62 +2,67 @@
 <html lang="en">
 <head>
 <style>
-div    {
-       width: 50px;
-       height: 50px;
-       margin: 0;
-       padding: 0;
-       float: left;
+div {
+    width: 50px;
+    height: 50px;
+    margin: 0;
+    padding: 0;
+    float: left;
 }
 .f0 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               brightness(0.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        brightness(0.5));
 }
 .f1 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               contrast(0.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        contrast(0.5));
 }
 .f2 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               saturate(0.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        saturate(0.5));
 }
 .f3 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               sepia(0.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        sepia(0.5));
 }
 .f4 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               grayscale(0.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        grayscale(0.5));
 }
 .f5 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               invert(0.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        invert(0.5));
 }
 .f6 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               opacity(0.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        opacity(0.5));
 }
 .f7 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               sepia(0.3) brightness(1.2) contrast(0.2));
+    background-image: filter(
+        url("resources/image.svg"),
+        sepia(0.3) brightness(1.2) contrast(0.2));
 }
 .f8 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               brightness(0.5) sepia(0.3) brightness(1.2) contrast(0.2));
+    background-image: filter(
+        url("resources/image.svg"),
+        brightness(0.5) sepia(0.3) brightness(1.2) contrast(0.2));
 }
 .f9 {
-       background-image: -webkit-filter(
-               url("resources/image.svg"),
-               contrast(0.5) contrast(1.5));
+    background-image: filter(
+        url("resources/image.svg"),
+        contrast(0.5) contrast(1.5));
+}
+.f10 {
+    background-image: -webkit-filter(
+        url("resources/image.svg"),
+        contrast(0.5));
 }
 </style>
 </head>
@@ -72,5 +77,6 @@ div   {
 <div class="f7"></div>
 <div class="f8"></div>
 <div class="f9"></div>
+<div class="f10"></div>
 </body>
 </html>
\ No newline at end of file
index fc600ed..15d2831 100644 (file)
@@ -3,114 +3,114 @@ Test parsing and computation of CSS image filter() function.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS innerStyle("background-image", "-webkit-filter(none, blur(3px))") is "-webkit-filter(none, blur(3px))"
-PASS innerStyle("background-image", "-webkit-filter(none, url(#a))") is "-webkit-filter(none, url(#a))"
-PASS innerStyle("background-image", "-webkit-filter(none, url(#a))") is "-webkit-filter(none, url(#a))"
-PASS innerStyle("background-image", "-webkit-filter(none, url(#a) url(#b))") is "-webkit-filter(none, url(#a) url(#b))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(1) url(#a))") is "-webkit-filter(none, grayscale(1) url(#a))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(1))") is "-webkit-filter(none, grayscale(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(50%))") is "-webkit-filter(none, grayscale(50%))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(1.0))") is "-webkit-filter(none, grayscale(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(0))") is "-webkit-filter(none, grayscale(0))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(0.5) grayscale(0.25))") is "-webkit-filter(none, grayscale(0.5) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, sepia(1))") is "-webkit-filter(none, sepia(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, sepia(50%))") is "-webkit-filter(none, sepia(50%))"
-PASS innerStyle("background-image", "-webkit-filter(none, sepia(1.0))") is "-webkit-filter(none, sepia(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, sepia(0))") is "-webkit-filter(none, sepia(0))"
-PASS innerStyle("background-image", "-webkit-filter(none, sepia(0.5) sepia(0.25))") is "-webkit-filter(none, sepia(0.5) sepia(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, sepia(0.5) grayscale(0.25))") is "-webkit-filter(none, sepia(0.5) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(1))") is "-webkit-filter(none, saturate(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(50%))") is "-webkit-filter(none, saturate(50%))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(250%))") is "-webkit-filter(none, saturate(250%))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(1.0))") is "-webkit-filter(none, saturate(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(5.5))") is "-webkit-filter(none, saturate(5.5))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(0))") is "-webkit-filter(none, saturate(0))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(0.5) saturate(0.25))") is "-webkit-filter(none, saturate(0.5) saturate(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, saturate(0.5) grayscale(0.25))") is "-webkit-filter(none, saturate(0.5) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, hue-rotate(10deg))") is "-webkit-filter(none, hue-rotate(10deg))"
-PASS innerStyle("background-image", "-webkit-filter(none, hue-rotate(10.0deg))") is "-webkit-filter(none, hue-rotate(10deg))"
-PASS innerStyle("background-image", "-webkit-filter(none, hue-rotate(10rad))") is "-webkit-filter(none, hue-rotate(10rad))"
-PASS innerStyle("background-image", "-webkit-filter(none, hue-rotate(10grad))") is "-webkit-filter(none, hue-rotate(10grad))"
-PASS innerStyle("background-image", "-webkit-filter(none, hue-rotate(0.5turn))") is "-webkit-filter(none, hue-rotate(0.5turn))"
-PASS innerStyle("background-image", "-webkit-filter(none, hue-rotate(0))") is "-webkit-filter(none, hue-rotate(0deg))"
-PASS innerStyle("background-image", "-webkit-filter(none, hue-rotate(10deg) grayscale(0.25))") is "-webkit-filter(none, hue-rotate(10deg) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, invert(1))") is "-webkit-filter(none, invert(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, invert(50%))") is "-webkit-filter(none, invert(50%))"
-PASS innerStyle("background-image", "-webkit-filter(none, invert(1.0))") is "-webkit-filter(none, invert(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, invert(0))") is "-webkit-filter(none, invert(0))"
-PASS innerStyle("background-image", "-webkit-filter(none, invert(0.5) invert(0.25))") is "-webkit-filter(none, invert(0.5) invert(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, invert(0.5) grayscale(0.25))") is "-webkit-filter(none, invert(0.5) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, opacity(1))") is "-webkit-filter(none, opacity(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, opacity(50%))") is "-webkit-filter(none, opacity(50%))"
-PASS innerStyle("background-image", "-webkit-filter(none, opacity(1.0))") is "-webkit-filter(none, opacity(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, opacity(0))") is "-webkit-filter(none, opacity(0))"
-PASS innerStyle("background-image", "-webkit-filter(none, opacity(0.5) opacity(0.25))") is "-webkit-filter(none, opacity(0.5) opacity(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, opacity(0.5) grayscale(0.25))") is "-webkit-filter(none, opacity(0.5) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(1))") is "-webkit-filter(none, brightness(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(50%))") is "-webkit-filter(none, brightness(50%))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(1.0))") is "-webkit-filter(none, brightness(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(0))") is "-webkit-filter(none, brightness(0))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(0.5) brightness(0.25))") is "-webkit-filter(none, brightness(0.5) brightness(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(0.5) grayscale(0.25))") is "-webkit-filter(none, brightness(0.5) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(-1.1))") is "-webkit-filter(none, brightness(-1.1))"
-PASS innerStyle("background-image", "-webkit-filter(none, brightness(101%))") is "-webkit-filter(none, brightness(101%))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(0.25) brightness(0.5))") is "-webkit-filter(none, grayscale(0.25) brightness(0.5))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(1))") is "-webkit-filter(none, contrast(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(50%))") is "-webkit-filter(none, contrast(50%))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(250%))") is "-webkit-filter(none, contrast(250%))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(1.0))") is "-webkit-filter(none, contrast(1))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(0))") is "-webkit-filter(none, contrast(0))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(2))") is "-webkit-filter(none, contrast(2))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(0.5) contrast(0.25))") is "-webkit-filter(none, contrast(0.5) contrast(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, contrast(0.5) grayscale(0.25))") is "-webkit-filter(none, contrast(0.5) grayscale(0.25))"
-PASS innerStyle("background-image", "-webkit-filter(none, grayscale(0.25) contrast(0.5))") is "-webkit-filter(none, grayscale(0.25) contrast(0.5))"
-PASS innerStyle("background-image", "-webkit-filter(none, blur(0))") is "-webkit-filter(none, blur(0px))"
-PASS innerStyle("background-image", "-webkit-filter(none, blur(10px))") is "-webkit-filter(none, blur(10px))"
-PASS innerStyle("background-image", "-webkit-filter(none, drop-shadow(red 1px 2px 3px))") is "-webkit-filter(none, drop-shadow(red 1px 2px 3px))"
-PASS innerStyle("background-image", "-webkit-filter(none, drop-shadow(1px 2px 3px red))") is "-webkit-filter(none, drop-shadow(red 1px 2px 3px))"
-PASS innerStyle("background-image", "-webkit-filter(none, drop-shadow(#abc 0 0 0))") is "-webkit-filter(none, drop-shadow(rgb(170, 187, 204) 0px 0px 0px))"
-PASS innerStyle("background-image", "-webkit-filter(none, drop-shadow(0 0 0))") is "-webkit-filter(none, drop-shadow(0px 0px 0px))"
-PASS innerStyle("background-image", "-webkit-filter(none, drop-shadow(1px 2px))") is "-webkit-filter(none, drop-shadow(1px 2px))"
-PASS innerStyle("background-image", "-webkit-filter(none, 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))") is "-webkit-filter(none, 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 innerStyle("background-image", "-webkit-filter(radial-gradient(ellipse closest-corner, white, black), hue-rotate(90deg))") is "-webkit-filter(radial-gradient(closest-corner, white, black), hue-rotate(90deg))"
-PASS innerStyle("background-image", "-webkit-filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))") is "-webkit-filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))"
-PASS innerStyle("background-image", "-webkit-filter(radial-gradient(ellipse closest-corner at 20px 50px, white, black), hue-rotate(90deg))") is "-webkit-filter(radial-gradient(closest-corner at 20px 50px, white, black), hue-rotate(90deg))"
-PASS innerStyle("background-image", "-webkit-filter(linear-gradient(white, black), hue-rotate(90deg))") is "-webkit-filter(linear-gradient(white, black), hue-rotate(90deg))"
-PASS innerStyle("background-image", "-webkit-filter(linear-gradient(to top left, white, black), hue-rotate(90deg))") is "-webkit-filter(linear-gradient(to left top, white, black), hue-rotate(90deg))"
-PASS innerStyle("background-image", "-webkit-filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))") is "-webkit-filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))"
-PASS innerStyle("background-image", "-webkit-filter(-webkit-cross-fade(url(http://image1.png), url(http://image2.png), 50%), contrast(0.5))") is "-webkit-filter(-webkit-cross-fade(url(http://image1.png/), url(http://image2.png/), 0.5), contrast(0.5))"
-PASS innerStyle("background-image", "-webkit-filter(url(http://image1.png), brightness(50%))") is "-webkit-filter(url(http://image1.png/), brightness(50%))"
-PASS innerStyle("background-image", "-webkit-filter('http://image1.png', brightness(50%))") is "-webkit-filter(url(http://image1.png/), brightness(50%))"
-PASS innerStyle("border-image-source", "-webkit-filter(url(http://image1.png), invert(50%))") is "-webkit-filter(url(http://image1.png/), invert(50%))"
-PASS innerStyle("-webkit-mask-image", "-webkit-filter(url(http://image1.png), invert(50%))") is "-webkit-filter(url(http://image1.png/), invert(50%))"
-PASS innerStyle("-webkit-mask-box-image-source", "-webkit-filter(url(http://image1.png), invert(50%))") is "-webkit-filter(url(http://image1.png/), invert(50%))"
-PASS innerStyle("content", "-webkit-filter(url(http://image1.png), invert(50%))") is "-webkit-filter(url(http://image1.png/), invert(50%))"
-PASS innerStyle("background-image", "-webkit-filter()") is ""
-PASS computedStyle("background-image", "-webkit-filter()") is "none"
-PASS innerStyle("background-image", "-webkit-filter(url(image1.png))") is ""
-PASS computedStyle("background-image", "-webkit-filter(url(image1.png))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(url(image1.png), )") is ""
-PASS computedStyle("background-image", "-webkit-filter(url(image1.png), )") is "none"
-PASS innerStyle("background-image", "-webkit-filter(url(image1.png) brightness(50%))") is ""
-PASS computedStyle("background-image", "-webkit-filter(url(image1.png) brightness(50%))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(brightness(50%) url(image1.png))") is ""
-PASS computedStyle("background-image", "-webkit-filter(brightness(50%) url(image1.png))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(brightness(50%), url(image1.png))") is ""
-PASS computedStyle("background-image", "-webkit-filter(brightness(50%), url(image1.png))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(url(image1.png) url(#filter))") is ""
-PASS computedStyle("background-image", "-webkit-filter(url(image1.png) url(#filter))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(brightness(50%))") is ""
-PASS computedStyle("background-image", "-webkit-filter(brightness(50%))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(brightness(50%), )") is ""
-PASS computedStyle("background-image", "-webkit-filter(brightness(50%), )") is "none"
-PASS innerStyle("background-image", "-webkit-filter(url(image1.png), brightness(50%), brightness(50%))") is ""
-PASS computedStyle("background-image", "-webkit-filter(url(image1.png), brightness(50%), brightness(50%))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(url(image1.png) url(image2.png), brightness(50%))") is ""
-PASS computedStyle("background-image", "-webkit-filter(url(image1.png) url(image2.png), brightness(50%))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(url(image1.png), url(image2.png), brightness(50%))") is ""
-PASS computedStyle("background-image", "-webkit-filter(url(image1.png), url(image2.png), brightness(50%))") is "none"
-PASS innerStyle("background-image", "-webkit-filter(invalidToken.png, blur(3px))") is ""
-PASS computedStyle("background-image", "-webkit-filter(invalidToken.png, blur(3px))") is "none"
+PASS innerStyle("background-image", "filter(none, blur(3px))") is "filter(none, blur(3px))"
+PASS innerStyle("background-image", "filter(none, url(#a))") is "filter(none, url(#a))"
+PASS innerStyle("background-image", "filter(none, url(#a))") is "filter(none, url(#a))"
+PASS innerStyle("background-image", "filter(none, url(#a) url(#b))") is "filter(none, url(#a) url(#b))"
+PASS innerStyle("background-image", "filter(none, grayscale(1) url(#a))") is "filter(none, grayscale(1) url(#a))"
+PASS innerStyle("background-image", "filter(none, grayscale(1))") is "filter(none, grayscale(1))"
+PASS innerStyle("background-image", "filter(none, grayscale(50%))") is "filter(none, grayscale(50%))"
+PASS innerStyle("background-image", "filter(none, grayscale(1.0))") is "filter(none, grayscale(1))"
+PASS innerStyle("background-image", "filter(none, grayscale(0))") is "filter(none, grayscale(0))"
+PASS innerStyle("background-image", "filter(none, grayscale(0.5) grayscale(0.25))") is "filter(none, grayscale(0.5) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, sepia(1))") is "filter(none, sepia(1))"
+PASS innerStyle("background-image", "filter(none, sepia(50%))") is "filter(none, sepia(50%))"
+PASS innerStyle("background-image", "filter(none, sepia(1.0))") is "filter(none, sepia(1))"
+PASS innerStyle("background-image", "filter(none, sepia(0))") is "filter(none, sepia(0))"
+PASS innerStyle("background-image", "filter(none, sepia(0.5) sepia(0.25))") is "filter(none, sepia(0.5) sepia(0.25))"
+PASS innerStyle("background-image", "filter(none, sepia(0.5) grayscale(0.25))") is "filter(none, sepia(0.5) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, saturate(1))") is "filter(none, saturate(1))"
+PASS innerStyle("background-image", "filter(none, saturate(50%))") is "filter(none, saturate(50%))"
+PASS innerStyle("background-image", "filter(none, saturate(250%))") is "filter(none, saturate(250%))"
+PASS innerStyle("background-image", "filter(none, saturate(1.0))") is "filter(none, saturate(1))"
+PASS innerStyle("background-image", "filter(none, saturate(5.5))") is "filter(none, saturate(5.5))"
+PASS innerStyle("background-image", "filter(none, saturate(0))") is "filter(none, saturate(0))"
+PASS innerStyle("background-image", "filter(none, saturate(0.5) saturate(0.25))") is "filter(none, saturate(0.5) saturate(0.25))"
+PASS innerStyle("background-image", "filter(none, saturate(0.5) grayscale(0.25))") is "filter(none, saturate(0.5) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, hue-rotate(10deg))") is "filter(none, hue-rotate(10deg))"
+PASS innerStyle("background-image", "filter(none, hue-rotate(10.0deg))") is "filter(none, hue-rotate(10deg))"
+PASS innerStyle("background-image", "filter(none, hue-rotate(10rad))") is "filter(none, hue-rotate(10rad))"
+PASS innerStyle("background-image", "filter(none, hue-rotate(10grad))") is "filter(none, hue-rotate(10grad))"
+PASS innerStyle("background-image", "filter(none, hue-rotate(0.5turn))") is "filter(none, hue-rotate(0.5turn))"
+PASS innerStyle("background-image", "filter(none, hue-rotate(0))") is "filter(none, hue-rotate(0deg))"
+PASS innerStyle("background-image", "filter(none, hue-rotate(10deg) grayscale(0.25))") is "filter(none, hue-rotate(10deg) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, invert(1))") is "filter(none, invert(1))"
+PASS innerStyle("background-image", "filter(none, invert(50%))") is "filter(none, invert(50%))"
+PASS innerStyle("background-image", "filter(none, invert(1.0))") is "filter(none, invert(1))"
+PASS innerStyle("background-image", "filter(none, invert(0))") is "filter(none, invert(0))"
+PASS innerStyle("background-image", "filter(none, invert(0.5) invert(0.25))") is "filter(none, invert(0.5) invert(0.25))"
+PASS innerStyle("background-image", "filter(none, invert(0.5) grayscale(0.25))") is "filter(none, invert(0.5) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, opacity(1))") is "filter(none, opacity(1))"
+PASS innerStyle("background-image", "filter(none, opacity(50%))") is "filter(none, opacity(50%))"
+PASS innerStyle("background-image", "filter(none, opacity(1.0))") is "filter(none, opacity(1))"
+PASS innerStyle("background-image", "filter(none, opacity(0))") is "filter(none, opacity(0))"
+PASS innerStyle("background-image", "filter(none, opacity(0.5) opacity(0.25))") is "filter(none, opacity(0.5) opacity(0.25))"
+PASS innerStyle("background-image", "filter(none, opacity(0.5) grayscale(0.25))") is "filter(none, opacity(0.5) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, brightness(1))") is "filter(none, brightness(1))"
+PASS innerStyle("background-image", "filter(none, brightness(50%))") is "filter(none, brightness(50%))"
+PASS innerStyle("background-image", "filter(none, brightness(1.0))") is "filter(none, brightness(1))"
+PASS innerStyle("background-image", "filter(none, brightness(0))") is "filter(none, brightness(0))"
+PASS innerStyle("background-image", "filter(none, brightness(0.5) brightness(0.25))") is "filter(none, brightness(0.5) brightness(0.25))"
+PASS innerStyle("background-image", "filter(none, brightness(0.5) grayscale(0.25))") is "filter(none, brightness(0.5) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, brightness(-1.1))") is "filter(none, brightness(-1.1))"
+PASS innerStyle("background-image", "filter(none, brightness(101%))") is "filter(none, brightness(101%))"
+PASS innerStyle("background-image", "filter(none, grayscale(0.25) brightness(0.5))") is "filter(none, grayscale(0.25) brightness(0.5))"
+PASS innerStyle("background-image", "filter(none, contrast(1))") is "filter(none, contrast(1))"
+PASS innerStyle("background-image", "filter(none, contrast(50%))") is "filter(none, contrast(50%))"
+PASS innerStyle("background-image", "filter(none, contrast(250%))") is "filter(none, contrast(250%))"
+PASS innerStyle("background-image", "filter(none, contrast(1.0))") is "filter(none, contrast(1))"
+PASS innerStyle("background-image", "filter(none, contrast(0))") is "filter(none, contrast(0))"
+PASS innerStyle("background-image", "filter(none, contrast(2))") is "filter(none, contrast(2))"
+PASS innerStyle("background-image", "filter(none, contrast(0.5) contrast(0.25))") is "filter(none, contrast(0.5) contrast(0.25))"
+PASS innerStyle("background-image", "filter(none, contrast(0.5) grayscale(0.25))") is "filter(none, contrast(0.5) grayscale(0.25))"
+PASS innerStyle("background-image", "filter(none, grayscale(0.25) contrast(0.5))") is "filter(none, grayscale(0.25) contrast(0.5))"
+PASS innerStyle("background-image", "filter(none, blur(0))") is "filter(none, blur(0px))"
+PASS innerStyle("background-image", "filter(none, blur(10px))") is "filter(none, blur(10px))"
+PASS innerStyle("background-image", "filter(none, drop-shadow(red 1px 2px 3px))") is "filter(none, drop-shadow(red 1px 2px 3px))"
+PASS innerStyle("background-image", "filter(none, drop-shadow(1px 2px 3px red))") is "filter(none, drop-shadow(red 1px 2px 3px))"
+PASS innerStyle("background-image", "filter(none, drop-shadow(#abc 0 0 0))") is "filter(none, drop-shadow(rgb(170, 187, 204) 0px 0px 0px))"
+PASS innerStyle("background-image", "filter(none, drop-shadow(0 0 0))") is "filter(none, drop-shadow(0px 0px 0px))"
+PASS innerStyle("background-image", "filter(none, drop-shadow(1px 2px))") is "filter(none, drop-shadow(1px 2px))"
+PASS innerStyle("background-image", "filter(none, 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))") is "filter(none, 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 innerStyle("background-image", "filter(radial-gradient(ellipse closest-corner, white, black), hue-rotate(90deg))") is "filter(radial-gradient(closest-corner, white, black), hue-rotate(90deg))"
+PASS innerStyle("background-image", "filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))") is "filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))"
+PASS innerStyle("background-image", "filter(radial-gradient(ellipse closest-corner at 20px 50px, white, black), hue-rotate(90deg))") is "filter(radial-gradient(closest-corner at 20px 50px, white, black), hue-rotate(90deg))"
+PASS innerStyle("background-image", "filter(linear-gradient(white, black), hue-rotate(90deg))") is "filter(linear-gradient(white, black), hue-rotate(90deg))"
+PASS innerStyle("background-image", "filter(linear-gradient(to top left, white, black), hue-rotate(90deg))") is "filter(linear-gradient(to left top, white, black), hue-rotate(90deg))"
+PASS innerStyle("background-image", "filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))") is "filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))"
+PASS innerStyle("background-image", "filter(-webkit-cross-fade(url(http://image1.png), url(http://image2.png), 50%), contrast(0.5))") is "filter(-webkit-cross-fade(url(http://image1.png/), url(http://image2.png/), 0.5), contrast(0.5))"
+PASS innerStyle("background-image", "filter(url(http://image1.png), brightness(50%))") is "filter(url(http://image1.png/), brightness(50%))"
+PASS innerStyle("background-image", "filter('http://image1.png', brightness(50%))") is "filter(url(http://image1.png/), brightness(50%))"
+PASS innerStyle("border-image-source", "filter(url(http://image1.png), invert(50%))") is "filter(url(http://image1.png/), invert(50%))"
+PASS innerStyle("-webkit-mask-image", "filter(url(http://image1.png), invert(50%))") is "filter(url(http://image1.png/), invert(50%))"
+PASS innerStyle("-webkit-mask-box-image-source", "filter(url(http://image1.png), invert(50%))") is "filter(url(http://image1.png/), invert(50%))"
+PASS innerStyle("content", "filter(url(http://image1.png), invert(50%))") is "filter(url(http://image1.png/), invert(50%))"
+PASS innerStyle("background-image", "filter()") is ""
+PASS computedStyle("background-image", "filter()") is "none"
+PASS innerStyle("background-image", "filter(url(image1.png))") is ""
+PASS computedStyle("background-image", "filter(url(image1.png))") is "none"
+PASS innerStyle("background-image", "filter(url(image1.png), )") is ""
+PASS computedStyle("background-image", "filter(url(image1.png), )") is "none"
+PASS innerStyle("background-image", "filter(url(image1.png) brightness(50%))") is ""
+PASS computedStyle("background-image", "filter(url(image1.png) brightness(50%))") is "none"
+PASS innerStyle("background-image", "filter(brightness(50%) url(image1.png))") is ""
+PASS computedStyle("background-image", "filter(brightness(50%) url(image1.png))") is "none"
+PASS innerStyle("background-image", "filter(brightness(50%), url(image1.png))") is ""
+PASS computedStyle("background-image", "filter(brightness(50%), url(image1.png))") is "none"
+PASS innerStyle("background-image", "filter(url(image1.png) url(#filter))") is ""
+PASS computedStyle("background-image", "filter(url(image1.png) url(#filter))") is "none"
+PASS innerStyle("background-image", "filter(brightness(50%))") is ""
+PASS computedStyle("background-image", "filter(brightness(50%))") is "none"
+PASS innerStyle("background-image", "filter(brightness(50%), )") is ""
+PASS computedStyle("background-image", "filter(brightness(50%), )") is "none"
+PASS innerStyle("background-image", "filter(url(image1.png), brightness(50%), brightness(50%))") is ""
+PASS computedStyle("background-image", "filter(url(image1.png), brightness(50%), brightness(50%))") is "none"
+PASS innerStyle("background-image", "filter(url(image1.png) url(image2.png), brightness(50%))") is ""
+PASS computedStyle("background-image", "filter(url(image1.png) url(image2.png), brightness(50%))") is "none"
+PASS innerStyle("background-image", "filter(url(image1.png), url(image2.png), brightness(50%))") is ""
+PASS computedStyle("background-image", "filter(url(image1.png), url(image2.png), brightness(50%))") is "none"
+PASS innerStyle("background-image", "filter(invalidToken.png, blur(3px))") is ""
+PASS computedStyle("background-image", "filter(invalidToken.png, blur(3px))") is "none"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index ae76d03..7890640 100644 (file)
@@ -43,351 +43,351 @@ function negativeTest(property, value) {
 // Test different filter combination.
 testInner(
     "background-image",
-    "-webkit-filter(none, blur(3px))",
-    "-webkit-filter(none, blur(3px))");
+    "filter(none, blur(3px))",
+    "filter(none, blur(3px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, url(#a))",
-    "-webkit-filter(none, url(#a))");
+    "filter(none, url(#a))",
+    "filter(none, url(#a))");
 testInner(
     "background-image",
-    "-webkit-filter(none, url(#a))",
-    "-webkit-filter(none, url(#a))");
+    "filter(none, url(#a))",
+    "filter(none, url(#a))");
 testInner(
     "background-image",
-    "-webkit-filter(none, url(#a) url(#b))",
-    "-webkit-filter(none, url(#a) url(#b))");
+    "filter(none, url(#a) url(#b))",
+    "filter(none, url(#a) url(#b))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(1) url(#a))",
-    "-webkit-filter(none, grayscale(1) url(#a))");
+    "filter(none, grayscale(1) url(#a))",
+    "filter(none, grayscale(1) url(#a))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(1))",
-    "-webkit-filter(none, grayscale(1))");
+    "filter(none, grayscale(1))",
+    "filter(none, grayscale(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(50%))",
-    "-webkit-filter(none, grayscale(50%))");
+    "filter(none, grayscale(50%))",
+    "filter(none, grayscale(50%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(1.0))",
-    "-webkit-filter(none, grayscale(1))");
+    "filter(none, grayscale(1.0))",
+    "filter(none, grayscale(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(0))",
-    "-webkit-filter(none, grayscale(0))");
+    "filter(none, grayscale(0))",
+    "filter(none, grayscale(0))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(0.5) grayscale(0.25))",
-    "-webkit-filter(none, grayscale(0.5) grayscale(0.25))");
+    "filter(none, grayscale(0.5) grayscale(0.25))",
+    "filter(none, grayscale(0.5) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, sepia(1))",
-    "-webkit-filter(none, sepia(1))");
+    "filter(none, sepia(1))",
+    "filter(none, sepia(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, sepia(50%))",
-    "-webkit-filter(none, sepia(50%))");
+    "filter(none, sepia(50%))",
+    "filter(none, sepia(50%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, sepia(1.0))",
-    "-webkit-filter(none, sepia(1))");
+    "filter(none, sepia(1.0))",
+    "filter(none, sepia(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, sepia(0))",
-    "-webkit-filter(none, sepia(0))");
+    "filter(none, sepia(0))",
+    "filter(none, sepia(0))");
 testInner(
     "background-image",
-    "-webkit-filter(none, sepia(0.5) sepia(0.25))",
-    "-webkit-filter(none, sepia(0.5) sepia(0.25))");
+    "filter(none, sepia(0.5) sepia(0.25))",
+    "filter(none, sepia(0.5) sepia(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, sepia(0.5) grayscale(0.25))",
-    "-webkit-filter(none, sepia(0.5) grayscale(0.25))");
+    "filter(none, sepia(0.5) grayscale(0.25))",
+    "filter(none, sepia(0.5) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(1))",
-    "-webkit-filter(none, saturate(1))");
+    "filter(none, saturate(1))",
+    "filter(none, saturate(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(50%))",
-    "-webkit-filter(none, saturate(50%))");
+    "filter(none, saturate(50%))",
+    "filter(none, saturate(50%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(250%))",
-    "-webkit-filter(none, saturate(250%))");
+    "filter(none, saturate(250%))",
+    "filter(none, saturate(250%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(1.0))",
-    "-webkit-filter(none, saturate(1))");
+    "filter(none, saturate(1.0))",
+    "filter(none, saturate(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(5.5))",
-    "-webkit-filter(none, saturate(5.5))");
+    "filter(none, saturate(5.5))",
+    "filter(none, saturate(5.5))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(0))",
-    "-webkit-filter(none, saturate(0))");
+    "filter(none, saturate(0))",
+    "filter(none, saturate(0))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(0.5) saturate(0.25))",
-    "-webkit-filter(none, saturate(0.5) saturate(0.25))");
+    "filter(none, saturate(0.5) saturate(0.25))",
+    "filter(none, saturate(0.5) saturate(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, saturate(0.5) grayscale(0.25))",
-    "-webkit-filter(none, saturate(0.5) grayscale(0.25))");
+    "filter(none, saturate(0.5) grayscale(0.25))",
+    "filter(none, saturate(0.5) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, hue-rotate(10deg))",
-    "-webkit-filter(none, hue-rotate(10deg))");
+    "filter(none, hue-rotate(10deg))",
+    "filter(none, hue-rotate(10deg))");
 testInner(
     "background-image",
-    "-webkit-filter(none, hue-rotate(10.0deg))",
-    "-webkit-filter(none, hue-rotate(10deg))");
+    "filter(none, hue-rotate(10.0deg))",
+    "filter(none, hue-rotate(10deg))");
 testInner(
     "background-image",
-    "-webkit-filter(none, hue-rotate(10rad))",
-    "-webkit-filter(none, hue-rotate(10rad))");
+    "filter(none, hue-rotate(10rad))",
+    "filter(none, hue-rotate(10rad))");
 testInner(
     "background-image",
-    "-webkit-filter(none, hue-rotate(10grad))",
-    "-webkit-filter(none, hue-rotate(10grad))");
+    "filter(none, hue-rotate(10grad))",
+    "filter(none, hue-rotate(10grad))");
 testInner(
     "background-image",
-    "-webkit-filter(none, hue-rotate(0.5turn))",
-    "-webkit-filter(none, hue-rotate(0.5turn))");
+    "filter(none, hue-rotate(0.5turn))",
+    "filter(none, hue-rotate(0.5turn))");
 testInner(
     "background-image",
-    "-webkit-filter(none, hue-rotate(0))",
-    "-webkit-filter(none, hue-rotate(0deg))");
+    "filter(none, hue-rotate(0))",
+    "filter(none, hue-rotate(0deg))");
 testInner(
     "background-image",
-    "-webkit-filter(none, hue-rotate(10deg) grayscale(0.25))",
-    "-webkit-filter(none, hue-rotate(10deg) grayscale(0.25))");
+    "filter(none, hue-rotate(10deg) grayscale(0.25))",
+    "filter(none, hue-rotate(10deg) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, invert(1))",
-    "-webkit-filter(none, invert(1))");
+    "filter(none, invert(1))",
+    "filter(none, invert(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, invert(50%))",
-    "-webkit-filter(none, invert(50%))");
+    "filter(none, invert(50%))",
+    "filter(none, invert(50%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, invert(1.0))",
-    "-webkit-filter(none, invert(1))");
+    "filter(none, invert(1.0))",
+    "filter(none, invert(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, invert(0))",
-    "-webkit-filter(none, invert(0))");
+    "filter(none, invert(0))",
+    "filter(none, invert(0))");
 testInner(
     "background-image",
-    "-webkit-filter(none, invert(0.5) invert(0.25))",
-    "-webkit-filter(none, invert(0.5) invert(0.25))");
+    "filter(none, invert(0.5) invert(0.25))",
+    "filter(none, invert(0.5) invert(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, invert(0.5) grayscale(0.25))",
-    "-webkit-filter(none, invert(0.5) grayscale(0.25))");
+    "filter(none, invert(0.5) grayscale(0.25))",
+    "filter(none, invert(0.5) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, opacity(1))",
-    "-webkit-filter(none, opacity(1))");
+    "filter(none, opacity(1))",
+    "filter(none, opacity(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, opacity(50%))",
-    "-webkit-filter(none, opacity(50%))");
+    "filter(none, opacity(50%))",
+    "filter(none, opacity(50%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, opacity(1.0))",
-    "-webkit-filter(none, opacity(1))");
+    "filter(none, opacity(1.0))",
+    "filter(none, opacity(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, opacity(0))",
-    "-webkit-filter(none, opacity(0))");
+    "filter(none, opacity(0))",
+    "filter(none, opacity(0))");
 testInner(
     "background-image",
-    "-webkit-filter(none, opacity(0.5) opacity(0.25))",
-    "-webkit-filter(none, opacity(0.5) opacity(0.25))");
+    "filter(none, opacity(0.5) opacity(0.25))",
+    "filter(none, opacity(0.5) opacity(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, opacity(0.5) grayscale(0.25))",
-    "-webkit-filter(none, opacity(0.5) grayscale(0.25))");
+    "filter(none, opacity(0.5) grayscale(0.25))",
+    "filter(none, opacity(0.5) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(1))",
-    "-webkit-filter(none, brightness(1))");
+    "filter(none, brightness(1))",
+    "filter(none, brightness(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(50%))",
-    "-webkit-filter(none, brightness(50%))");
+    "filter(none, brightness(50%))",
+    "filter(none, brightness(50%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(1.0))",
-    "-webkit-filter(none, brightness(1))");
+    "filter(none, brightness(1.0))",
+    "filter(none, brightness(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(0))",
-    "-webkit-filter(none, brightness(0))");
+    "filter(none, brightness(0))",
+    "filter(none, brightness(0))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(0.5) brightness(0.25))",
-    "-webkit-filter(none, brightness(0.5) brightness(0.25))");
+    "filter(none, brightness(0.5) brightness(0.25))",
+    "filter(none, brightness(0.5) brightness(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(0.5) grayscale(0.25))",
-    "-webkit-filter(none, brightness(0.5) grayscale(0.25))");
+    "filter(none, brightness(0.5) grayscale(0.25))",
+    "filter(none, brightness(0.5) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(-1.1))",
-    "-webkit-filter(none, brightness(-1.1))");
+    "filter(none, brightness(-1.1))",
+    "filter(none, brightness(-1.1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, brightness(101%))",
-    "-webkit-filter(none, brightness(101%))");
+    "filter(none, brightness(101%))",
+    "filter(none, brightness(101%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(0.25) brightness(0.5))",
-    "-webkit-filter(none, grayscale(0.25) brightness(0.5))");
+    "filter(none, grayscale(0.25) brightness(0.5))",
+    "filter(none, grayscale(0.25) brightness(0.5))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(1))",
-    "-webkit-filter(none, contrast(1))");
+    "filter(none, contrast(1))",
+    "filter(none, contrast(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(50%))",
-    "-webkit-filter(none, contrast(50%))");
+    "filter(none, contrast(50%))",
+    "filter(none, contrast(50%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(250%))",
-    "-webkit-filter(none, contrast(250%))");
+    "filter(none, contrast(250%))",
+    "filter(none, contrast(250%))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(1.0))",
-    "-webkit-filter(none, contrast(1))");
+    "filter(none, contrast(1.0))",
+    "filter(none, contrast(1))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(0))",
-    "-webkit-filter(none, contrast(0))");
+    "filter(none, contrast(0))",
+    "filter(none, contrast(0))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(2))",
-    "-webkit-filter(none, contrast(2))");
+    "filter(none, contrast(2))",
+    "filter(none, contrast(2))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(0.5) contrast(0.25))",
-    "-webkit-filter(none, contrast(0.5) contrast(0.25))");
+    "filter(none, contrast(0.5) contrast(0.25))",
+    "filter(none, contrast(0.5) contrast(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, contrast(0.5) grayscale(0.25))",
-    "-webkit-filter(none, contrast(0.5) grayscale(0.25))");
+    "filter(none, contrast(0.5) grayscale(0.25))",
+    "filter(none, contrast(0.5) grayscale(0.25))");
 testInner(
     "background-image",
-    "-webkit-filter(none, grayscale(0.25) contrast(0.5))",
-    "-webkit-filter(none, grayscale(0.25) contrast(0.5))");
+    "filter(none, grayscale(0.25) contrast(0.5))",
+    "filter(none, grayscale(0.25) contrast(0.5))");
 testInner(
     "background-image",
-    "-webkit-filter(none, blur(0))",
-    "-webkit-filter(none, blur(0px))");
+    "filter(none, blur(0))",
+    "filter(none, blur(0px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, blur(10px))",
-    "-webkit-filter(none, blur(10px))");
+    "filter(none, blur(10px))",
+    "filter(none, blur(10px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, drop-shadow(red 1px 2px 3px))",
-    "-webkit-filter(none, drop-shadow(red 1px 2px 3px))");
+    "filter(none, drop-shadow(red 1px 2px 3px))",
+    "filter(none, drop-shadow(red 1px 2px 3px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, drop-shadow(1px 2px 3px red))",
-    "-webkit-filter(none, drop-shadow(red 1px 2px 3px))");
+    "filter(none, drop-shadow(1px 2px 3px red))",
+    "filter(none, drop-shadow(red 1px 2px 3px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, drop-shadow(#abc 0 0 0))",
-    "-webkit-filter(none, drop-shadow(rgb(170, 187, 204) 0px 0px 0px))");
+    "filter(none, drop-shadow(#abc 0 0 0))",
+    "filter(none, drop-shadow(rgb(170, 187, 204) 0px 0px 0px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, drop-shadow(0 0 0))",
-    "-webkit-filter(none, drop-shadow(0px 0px 0px))");
+    "filter(none, drop-shadow(0 0 0))",
+    "filter(none, drop-shadow(0px 0px 0px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, drop-shadow(1px 2px))",
-    "-webkit-filter(none, drop-shadow(1px 2px))");
+    "filter(none, drop-shadow(1px 2px))",
+    "filter(none, drop-shadow(1px 2px))");
 testInner(
     "background-image",
-    "-webkit-filter(none, 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))",
-    "-webkit-filter(none, 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))");
+    "filter(none, 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))",
+    "filter(none, 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))");
 
 // Test different CSS Image values.
 testInner(
     "background-image",
-    "-webkit-filter(radial-gradient(ellipse closest-corner, white, black), hue-rotate(90deg))",
-    "-webkit-filter(radial-gradient(closest-corner, white, black), hue-rotate(90deg))");
+    "filter(radial-gradient(ellipse closest-corner, white, black), hue-rotate(90deg))",
+    "filter(radial-gradient(closest-corner, white, black), hue-rotate(90deg))");
 testInner(
     "background-image",
-    "-webkit-filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))",
-    "-webkit-filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))");
+    "filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))",
+    "filter(radial-gradient(circle closest-side at 50px 50%, white, black), hue-rotate(90deg))");
 testInner(
     "background-image",
-    "-webkit-filter(radial-gradient(ellipse closest-corner at 20px 50px, white, black), hue-rotate(90deg))",
-    "-webkit-filter(radial-gradient(closest-corner at 20px 50px, white, black), hue-rotate(90deg))");
+    "filter(radial-gradient(ellipse closest-corner at 20px 50px, white, black), hue-rotate(90deg))",
+    "filter(radial-gradient(closest-corner at 20px 50px, white, black), hue-rotate(90deg))");
 testInner(
     "background-image",
-    "-webkit-filter(linear-gradient(white, black), hue-rotate(90deg))",
-    "-webkit-filter(linear-gradient(white, black), hue-rotate(90deg))");
+    "filter(linear-gradient(white, black), hue-rotate(90deg))",
+    "filter(linear-gradient(white, black), hue-rotate(90deg))");
 testInner(
     "background-image",
-    "-webkit-filter(linear-gradient(to top left, white, black), hue-rotate(90deg))",
-    "-webkit-filter(linear-gradient(to left top, white, black), hue-rotate(90deg))");
+    "filter(linear-gradient(to top left, white, black), hue-rotate(90deg))",
+    "filter(linear-gradient(to left top, white, black), hue-rotate(90deg))");
 testInner(
     "background-image",
-    "-webkit-filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))",
-    "-webkit-filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))");
+    "filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))",
+    "filter(linear-gradient(0deg, white -20%, blue, black 120%), hue-rotate(90deg))");
 testInner(
     "background-image",
-    "-webkit-filter(-webkit-cross-fade(url(http://image1.png), url(http://image2.png), 50%), contrast(0.5))",
-    "-webkit-filter(-webkit-cross-fade(url(http://image1.png/), url(http://image2.png/), 0.5), contrast(0.5))");
+    "filter(-webkit-cross-fade(url(http://image1.png), url(http://image2.png), 50%), contrast(0.5))",
+    "filter(-webkit-cross-fade(url(http://image1.png/), url(http://image2.png/), 0.5), contrast(0.5))");
 testInner(
     "background-image",
-    "-webkit-filter(url(http://image1.png), brightness(50%))",
-    "-webkit-filter(url(http://image1.png/), brightness(50%))");
+    "filter(url(http://image1.png), brightness(50%))",
+    "filter(url(http://image1.png/), brightness(50%))");
 testInner(
     "background-image",
-    "-webkit-filter('http://image1.png', brightness(50%))",
-    "-webkit-filter(url(http://image1.png/), brightness(50%))");
+    "filter('http://image1.png', brightness(50%))",
+    "filter(url(http://image1.png/), brightness(50%))");
 
 // Test different properties, taking CSS Image values.
 testInner(
     "border-image-source",
-    "-webkit-filter(url(http://image1.png), invert(50%))",
-    "-webkit-filter(url(http://image1.png/), invert(50%))");
+    "filter(url(http://image1.png), invert(50%))",
+    "filter(url(http://image1.png/), invert(50%))");
 testInner(
     "-webkit-mask-image",
-    "-webkit-filter(url(http://image1.png), invert(50%))",
-    "-webkit-filter(url(http://image1.png/), invert(50%))");
+    "filter(url(http://image1.png), invert(50%))",
+    "filter(url(http://image1.png/), invert(50%))");
 testInner(
     "-webkit-mask-box-image-source",
-    "-webkit-filter(url(http://image1.png), invert(50%))",
-    "-webkit-filter(url(http://image1.png/), invert(50%))");
+    "filter(url(http://image1.png), invert(50%))",
+    "filter(url(http://image1.png/), invert(50%))");
 testInner(
     "content",
-    "-webkit-filter(url(http://image1.png), invert(50%))",
-    "-webkit-filter(url(http://image1.png/), invert(50%))");
+    "filter(url(http://image1.png), invert(50%))",
+    "filter(url(http://image1.png/), invert(50%))");
 
 // negative tests
-negativeTest("background-image", "-webkit-filter()");
-negativeTest("background-image", "-webkit-filter(url(image1.png))");
-negativeTest("background-image", "-webkit-filter(url(image1.png), )");
-negativeTest("background-image", "-webkit-filter(url(image1.png) brightness(50%))");
-negativeTest("background-image", "-webkit-filter(brightness(50%) url(image1.png))");
-negativeTest("background-image", "-webkit-filter(brightness(50%), url(image1.png))");
-negativeTest("background-image", "-webkit-filter(url(image1.png) url(#filter))");
-negativeTest("background-image", "-webkit-filter(brightness(50%))");
-negativeTest("background-image", "-webkit-filter(brightness(50%), )");
-negativeTest("background-image", "-webkit-filter(url(image1.png), brightness(50%), brightness(50%))");
-negativeTest("background-image", "-webkit-filter(url(image1.png) url(image2.png), brightness(50%))");
-negativeTest("background-image", "-webkit-filter(url(image1.png), url(image2.png), brightness(50%))");
-negativeTest("background-image", "-webkit-filter(invalidToken.png, blur(3px))");
+negativeTest("background-image", "filter()");
+negativeTest("background-image", "filter(url(image1.png))");
+negativeTest("background-image", "filter(url(image1.png), )");
+negativeTest("background-image", "filter(url(image1.png) brightness(50%))");
+negativeTest("background-image", "filter(brightness(50%) url(image1.png))");
+negativeTest("background-image", "filter(brightness(50%), url(image1.png))");
+negativeTest("background-image", "filter(url(image1.png) url(#filter))");
+negativeTest("background-image", "filter(brightness(50%))");
+negativeTest("background-image", "filter(brightness(50%), )");
+negativeTest("background-image", "filter(url(image1.png), brightness(50%), brightness(50%))");
+negativeTest("background-image", "filter(url(image1.png) url(image2.png), brightness(50%))");
+negativeTest("background-image", "filter(url(image1.png), url(image2.png), brightness(50%))");
+negativeTest("background-image", "filter(invalidToken.png, blur(3px))");
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </body>
index 2fb96ab..b587bcc 100644 (file)
@@ -300,6 +300,8 @@ rect: style.getPropertyValue(align-items) : start
 rect: style.getPropertyCSSValue(align-items) : [object CSSValueList]
 rect: style.getPropertyValue(align-self) : start
 rect: style.getPropertyCSSValue(align-self) : [object CSSValueList]
+rect: style.getPropertyValue(filter) : none
+rect: style.getPropertyCSSValue(filter) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(flex-direction) : row
 rect: style.getPropertyCSSValue(flex-direction) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(flex-wrap) : nowrap
@@ -822,6 +824,8 @@ g: style.getPropertyValue(align-items) : start
 g: style.getPropertyCSSValue(align-items) : [object CSSValueList]
 g: style.getPropertyValue(align-self) : start
 g: style.getPropertyCSSValue(align-self) : [object CSSValueList]
+g: style.getPropertyValue(filter) : none
+g: style.getPropertyCSSValue(filter) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(flex-direction) : row
 g: style.getPropertyCSSValue(flex-direction) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(flex-wrap) : nowrap
index f789a59..f2ef64d 100644 (file)
@@ -1,3 +1,100 @@
+2015-08-18  Dean Jackson  <dino@apple.com>
+
+        Support CSS filters without webkit prefix
+        https://bugs.webkit.org/show_bug.cgi?id=148138
+        <rdar://problem/22331434>
+
+        Reviewed by Sam Weinig.
+
+        Add support for the un-prefixed form of the CSS filter property.
+        This was straightforward for the general case on HTML content.
+        It was a bit more tricky on SVG content, where there already
+        was an existing "filter" property/attribute. The parsing
+        code is now shared between SVG and HTML, as is the
+        computed style output.
+
+        Covered by updating the existing tests, and
+        adding one new test: css3/filters/unprefixed.html
+
+        * css/CSSComputedStyleDeclaration.cpp: Rename CSSPropertyWebkitFilter to CSSPropertyFilter.
+        (WebCore::isLayoutDependent):
+        (WebCore::ComputedStyleExtractor::propertyValue):
+
+        * css/CSSFilterImageValue.cpp:
+        (WebCore::CSSFilterImageValue::customCSSText): Use "filter(" as the prefix.
+
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue): Rename CSSPropertyWebkitFilter to CSSPropertyFilter.
+        (WebCore::CSSParser::isGeneratedImageValue): Add support for "filter()".
+        (WebCore::CSSParser::parseGeneratedImage): Ditto.
+        (WebCore::CSSParser::parseBuiltinFilterArguments):
+
+        * css/CSSPropertyNames.in: Add filter. Make -webkit-filter an alias.
+
+        * css/SVGCSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::svgPropertyValue): Deleted.
+
+        * page/animation/CSSPropertyAnimation.cpp: Rename CSSPropertyWebkitFilter to CSSPropertyFilter.
+        (WebCore::PropertyWrapperAcceleratedFilter::PropertyWrapperAcceleratedFilter):
+        * page/animation/KeyframeAnimation.cpp: Ditto.
+        (WebCore::KeyframeAnimation::checkForMatchingFilterFunctionLists):
+
+        * platform/graphics/GraphicsLayer.cpp: Rename AnimatedPropertyWebkitFilter to AnimatedPropertyFilter.
+        (WebCore::GraphicsLayer::validateFilterOperations):
+        * platform/graphics/GraphicsLayerClient.h: Ditto.
+        * platform/graphics/ca/GraphicsLayerCA.cpp: Ditto.
+        (WebCore::GraphicsLayerCA::moveOrCopyAnimations):
+        (WebCore::GraphicsLayerCA::addAnimation):
+        (WebCore::GraphicsLayerCA::createAnimationFromKeyframes):
+        (WebCore::GraphicsLayerCA::createFilterAnimationsFromKeyframes):
+
+        * rendering/RenderLayer.cpp:
+        (WebCore::RenderLayer::updateOrRemoveFilterClients): SVG manages its own filter resources,
+        so we shouldn't add a layer that has an SVG root to the filter clients.
+
+        * rendering/RenderLayerBacking.cpp: Renaming.
+        (WebCore::RenderLayerBacking::startAnimation):
+        (WebCore::RenderLayerBacking::startTransition):
+        (WebCore::RenderLayerBacking::graphicsLayerToCSSProperty):
+        (WebCore::RenderLayerBacking::cssToGraphicsLayerProperty):
+        * rendering/RenderLayerCompositor.cpp: Ditto.
+        (WebCore::RenderLayerCompositor::requiresCompositingForAnimation):
+
+        * rendering/style/SVGRenderStyle.h: Remove the SVG filter style.
+        (WebCore::SVGRenderStyle::isolatesBlending): No need to check for hasFilter().
+        (WebCore::SVGRenderStyle::initialFilterResource): Deleted.
+        (WebCore::SVGRenderStyle::setFilterResource): Deleted.
+        (WebCore::SVGRenderStyle::filterResource): Deleted.
+        (WebCore::SVGRenderStyle::hasFilter): Deleted.
+
+        * rendering/style/SVGRenderStyleDefs.cpp: Remove the filter resource.
+        (WebCore::StyleResourceData::StyleResourceData): Deleted.
+        (WebCore::StyleResourceData::operator==): Deleted.
+        * rendering/style/SVGRenderStyleDefs.h:
+
+        * rendering/style/WillChangeData.cpp: Renaming.
+        (WebCore::propertyCreatesStackingContext):
+        (WebCore::propertyTriggersCompositing):
+
+        * rendering/svg/SVGRenderSupport.cpp:
+        (WebCore::SVGRenderSupport::isolatesBlending): Since SVGRenderStyle no longer checks
+        hasFilter() in its isolatesBlending(), we need to do it here.
+
+        * rendering/svg/SVGRenderingContext.cpp:
+        (WebCore::SVGRenderingContext::prepareToRenderSVGContent):
+
+        * rendering/svg/SVGRenderTreeAsText.cpp:
+        (WebCore::writeResources): Dump from the CSS style value.
+        * rendering/svg/SVGResources.cpp: Ditto.
+        (WebCore::SVGResources::buildCachedResources):
+        * rendering/svg/SVGResources.h:
+        * rendering/svg/SVGResourcesCache.cpp:
+        (WebCore::SVGResourcesCache::addResourcesFromRenderer):
+
+        * platform/graphics/texmap/TextureMapperLayer.cpp: Renaming.
+        * platform/graphics/texmap/TextureMapperAnimation.cpp:
+        * platform/graphics/texmap/coordinated/CoordinatedGraphicsLayer.cpp:
+
 2015-08-18  Anders Carlsson  <andersca@apple.com>
 
         More work on simplifying the WebSQL code
index c7ce323..d95c1bc 100644 (file)
@@ -305,6 +305,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyAlignContent,
     CSSPropertyAlignItems,
     CSSPropertyAlignSelf,
+    CSSPropertyFilter,
     CSSPropertyFlexBasis,
     CSSPropertyFlexGrow,
     CSSPropertyFlexShrink,
@@ -313,7 +314,6 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyJustifyContent,
     CSSPropertyJustifySelf,
     CSSPropertyJustifyItems,
-    CSSPropertyWebkitFilter,
 #if ENABLE(FILTERS_LEVEL_2)
     CSSPropertyWebkitBackdropFilter,
 #endif
@@ -1698,7 +1698,7 @@ static bool isLayoutDependent(CSSPropertyID propertyID, RenderStyle* style, Rend
     case CSSPropertyPerspectiveOrigin:
     case CSSPropertyTransformOrigin:
     case CSSPropertyTransform:
-    case CSSPropertyWebkitFilter:
+    case CSSPropertyFilter:
 #if ENABLE(FILTERS_LEVEL_2)
     case CSSPropertyWebkitBackdropFilter:
 #endif
@@ -3118,7 +3118,7 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyWebkitShapeOutside:
             return shapePropertyValue(*style, style->shapeOutside());
 #endif
-        case CSSPropertyWebkitFilter:
+        case CSSPropertyFilter:
             return valueForFilter(*style, style->filter());
 #if ENABLE(FILTERS_LEVEL_2)
         case CSSPropertyWebkitBackdropFilter:
@@ -3324,7 +3324,6 @@ RefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propertyID,
         case CSSPropertyClipRule:
         case CSSPropertyMask:
         case CSSPropertyEnableBackground:
-        case CSSPropertyFilter:
         case CSSPropertyFloodColor:
         case CSSPropertyFloodOpacity:
         case CSSPropertyLightingColor:
index 69c84df..5d80331 100644 (file)
@@ -50,7 +50,7 @@ CSSFilterImageValue::~CSSFilterImageValue()
 String CSSFilterImageValue::customCSSText() const
 {
     StringBuilder result;
-    result.appendLiteral("-webkit-filter(");
+    result.appendLiteral("filter(");
     result.append(m_imageValue->cssText());
     result.appendLiteral(", ");
     result.append(m_filterValue->cssText());
index 3d3e7d9..70271fc 100644 (file)
@@ -2518,7 +2518,7 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
     case CSSPropertyWebkitBoxOrdinalGroup:
         validPrimitive = validateUnit(valueWithCalculation, FInteger | FNonNeg, CSSStrictMode) && valueWithCalculation.value().fValue;
         break;
-    case CSSPropertyWebkitFilter:
+    case CSSPropertyFilter:
 #if ENABLE(FILTERS_LEVEL_2)
     case CSSPropertyWebkitBackdropFilter:
 #endif
@@ -9155,6 +9155,7 @@ bool CSSParser::isGeneratedImageValue(CSSParserValue& value) const
         || equalIgnoringCase(value.function->name, "repeating-radial-gradient(")
         || equalIgnoringCase(value.function->name, "-webkit-canvas(")
         || equalIgnoringCase(value.function->name, "-webkit-cross-fade(")
+        || equalIgnoringCase(value.function->name, "filter(")
         || equalIgnoringCase(value.function->name, "-webkit-filter(")
         || equalIgnoringCase(value.function->name, "-webkit-named-image(");
 }
@@ -9199,7 +9200,7 @@ bool CSSParser::parseGeneratedImage(CSSParserValueList& valueList, RefPtr<CSSVal
     if (equalIgnoringCase(parserValue.function->name, "-webkit-cross-fade("))
         return parseCrossfade(valueList, value);
 
-    if (equalIgnoringCase(parserValue.function->name, "-webkit-filter("))
+    if (equalIgnoringCase(parserValue.function->name, "filter(") || equalIgnoringCase(parserValue.function->name, "-webkit-filter("))
         return parseFilterImage(valueList, value);
 
     if (equalIgnoringCase(parserValue.function->name, "-webkit-named-image("))
@@ -9877,7 +9878,7 @@ RefPtr<WebKitCSSFilterValue> CSSParser::parseBuiltinFilterArguments(CSSParserVal
     }
     case WebKitCSSFilterValue::DropShadowFilterOperation: {
         // drop-shadow() takes a single shadow.
-        RefPtr<CSSValueList> shadowValueList = parseShadow(args, CSSPropertyWebkitFilter);
+        RefPtr<CSSValueList> shadowValueList = parseShadow(args, CSSPropertyFilter);
         if (!shadowValueList || shadowValueList->length() != 1)
             return nullptr;
         
index 3a6b678..c63b104 100644 (file)
@@ -219,7 +219,6 @@ enable-background [SkipBuilder]
 fill [Inherited, SVG, Custom=All]
 fill-opacity [Inherited, SVG, Converter=Opacity]
 fill-rule [Inherited, SVG]
-filter [SVG, Converter=SVGURIReference, NameForMethods=FilterResource]
 float [NameForMethods=Floating]
 flood-color [SVG, Converter=SVGColor]
 flood-opacity [SVG, Converter=Opacity]
@@ -453,7 +452,8 @@ columns [Longhands=column-width|column-count]
 mix-blend-mode [NameForMethods=BlendMode]
 isolation
 #endif
--webkit-filter [ConditionalConverter=FilterOperations]
+filter [ConditionalConverter=FilterOperations]
+-webkit-filter = filter
 align-content [Initial=initialContentAlignment, Converter=ContentAlignmentData]
 -webkit-align-content = align-content
 align-items [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentData]
index b801d70..8a90c8a 100644 (file)
@@ -160,10 +160,6 @@ RefPtr<CSSValue> ComputedStyleExtractor::svgPropertyValue(CSSPropertyID property
             if (!svgStyle.maskerResource().isEmpty())
                 return CSSPrimitiveValue::create(svgStyle.maskerResource(), CSSPrimitiveValue::CSS_URI);
             return CSSPrimitiveValue::createIdentifier(CSSValueNone);
-        case CSSPropertyFilter:
-            if (!svgStyle.filterResource().isEmpty())
-                return CSSPrimitiveValue::create(svgStyle.filterResource(), CSSPrimitiveValue::CSS_URI);
-            return CSSPrimitiveValue::createIdentifier(CSSValueNone);
         case CSSPropertyFloodColor:
             return currentColorOrValidColor(style, svgStyle.floodColor());
         case CSSPropertyLightingColor:
index 918561b..2930028 100644 (file)
@@ -571,7 +571,7 @@ class PropertyWrapperAcceleratedFilter : public PropertyWrapper<const FilterOper
     WTF_MAKE_FAST_ALLOCATED;
 public:
     PropertyWrapperAcceleratedFilter()
-        : PropertyWrapper<const FilterOperations&>(CSSPropertyWebkitFilter, &RenderStyle::filter, &RenderStyle::setFilter)
+        : PropertyWrapper<const FilterOperations&>(CSSPropertyFilter, &RenderStyle::filter, &RenderStyle::setFilter)
     {
     }
 
index e4a97d0..3a1c216 100644 (file)
@@ -406,7 +406,7 @@ void KeyframeAnimation::checkForMatchingFilterFunctionLists()
 {
     m_filterFunctionListsMatch = false;
 
-    if (m_keyframes.size() < 2 || !m_keyframes.containsProperty(CSSPropertyWebkitFilter))
+    if (m_keyframes.size() < 2 || !m_keyframes.containsProperty(CSSPropertyFilter))
         return;
 
     // Empty filters match anything, so find the first non-empty entry as the reference
index 9445d4e..0616cd8 100644 (file)
@@ -510,9 +510,9 @@ static inline const FilterOperations& filterOperationsAt(const KeyframeValueList
 int GraphicsLayer::validateFilterOperations(const KeyframeValueList& valueList)
 {
 #if ENABLE(FILTERS_LEVEL_2)
-    ASSERT(valueList.property() == AnimatedPropertyWebkitFilter || valueList.property() == AnimatedPropertyWebkitBackdropFilter);
+    ASSERT(valueList.property() == AnimatedPropertyFilter || valueList.property() == AnimatedPropertyWebkitBackdropFilter);
 #else
-    ASSERT(valueList.property() == AnimatedPropertyWebkitFilter);
+    ASSERT(valueList.property() == AnimatedPropertyFilter);
 #endif
 
     if (valueList.size() < 2)
index 422ab11..20c874d 100644 (file)
@@ -55,7 +55,7 @@ enum AnimatedPropertyID {
     AnimatedPropertyTransform,
     AnimatedPropertyOpacity,
     AnimatedPropertyBackgroundColor,
-    AnimatedPropertyWebkitFilter
+    AnimatedPropertyFilter
 #if ENABLE(FILTERS_LEVEL_2)
     , AnimatedPropertyWebkitBackdropFilter
 #endif
index 7414a67..eaf67b0 100644 (file)
@@ -238,7 +238,7 @@ static ASCIILiteral propertyIdToString(AnimatedPropertyID property)
         return ASCIILiteral("opacity");
     case AnimatedPropertyBackgroundColor:
         return ASCIILiteral("backgroundColor");
-    case AnimatedPropertyWebkitFilter:
+    case AnimatedPropertyFilter:
         return ASCIILiteral("filters");
 #if ENABLE(FILTERS_LEVEL_2)
     case AnimatedPropertyWebkitBackdropFilter:
@@ -611,7 +611,7 @@ void GraphicsLayerCA::moveOrCopyAnimations(MoveOrCopy operation, PlatformCALayer
             if (currAnimation.m_property == AnimatedPropertyTransform
                 || currAnimation.m_property == AnimatedPropertyOpacity
                 || currAnimation.m_property == AnimatedPropertyBackgroundColor
-                || currAnimation.m_property == AnimatedPropertyWebkitFilter)
+                || currAnimation.m_property == AnimatedPropertyFilter)
                 moveOrCopyLayerAnimation(operation, animationIdentifier(currAnimation.m_name, currAnimation.m_property, currAnimation.m_index, currAnimation.m_subIndex), fromLayer, toLayer);
         }
     }
@@ -894,7 +894,7 @@ bool GraphicsLayerCA::addAnimation(const KeyframeValueList& valueList, const Flo
     bool createdAnimations = false;
     if (valueList.property() == AnimatedPropertyTransform)
         createdAnimations = createTransformAnimationsFromKeyframes(valueList, anim, animationName, timeOffset, boxSize);
-    else if (valueList.property() == AnimatedPropertyWebkitFilter) {
+    else if (valueList.property() == AnimatedPropertyFilter) {
         if (supportsAcceleratedFilterAnimations())
             createdAnimations = createFilterAnimationsFromKeyframes(valueList, anim, animationName, timeOffset);
     }
@@ -2639,7 +2639,7 @@ void GraphicsLayerCA::updateContentsNeedsDisplay()
 
 bool GraphicsLayerCA::createAnimationFromKeyframes(const KeyframeValueList& valueList, const Animation* animation, const String& animationName, double timeOffset)
 {
-    ASSERT(valueList.property() != AnimatedPropertyTransform && (!supportsAcceleratedFilterAnimations() || valueList.property() != AnimatedPropertyWebkitFilter));
+    ASSERT(valueList.property() != AnimatedPropertyTransform && (!supportsAcceleratedFilterAnimations() || valueList.property() != AnimatedPropertyFilter));
 
     bool isKeyframe = valueList.size() > 2;
     bool valuesOK;
@@ -2774,9 +2774,9 @@ bool GraphicsLayerCA::appendToUncommittedAnimations(const KeyframeValueList& val
 bool GraphicsLayerCA::createFilterAnimationsFromKeyframes(const KeyframeValueList& valueList, const Animation* animation, const String& animationName, double timeOffset)
 {
 #if ENABLE(FILTERS_LEVEL_2)
-    ASSERT(valueList.property() == AnimatedPropertyWebkitFilter || valueList.property() == AnimatedPropertyWebkitBackdropFilter);
+    ASSERT(valueList.property() == AnimatedPropertyFilter || valueList.property() == AnimatedPropertyWebkitBackdropFilter);
 #else
-    ASSERT(valueList.property() == AnimatedPropertyWebkitFilter);
+    ASSERT(valueList.property() == AnimatedPropertyFilter);
 #endif
 
     int listIndex = validateFilterOperations(valueList);
index ffd8547..24ed542 100644 (file)
@@ -246,7 +246,7 @@ void TextureMapperAnimation::applyInternal(Client* client, const AnimationValue&
     case AnimatedPropertyTransform:
         client->setAnimatedTransform(applyTransformAnimation(static_cast<const TransformAnimationValue&>(from).value(), static_cast<const TransformAnimationValue&>(to).value(), progress, m_boxSize, m_listsMatch));
         return;
-    case AnimatedPropertyWebkitFilter:
+    case AnimatedPropertyFilter:
         client->setAnimatedFilters(applyFilterAnimation(static_cast<const FilterAnimationValue&>(from).value(), static_cast<const FilterAnimationValue&>(to).value(), progress, m_boxSize));
         return;
     default:
index 3455398..e8122d9 100644 (file)
@@ -661,7 +661,7 @@ void TextureMapperLayer::syncAnimations()
     if (!m_animations.hasActiveAnimationsOfType(AnimatedPropertyOpacity))
         m_currentOpacity = m_state.opacity;
 
-    if (!m_animations.hasActiveAnimationsOfType(AnimatedPropertyWebkitFilter))
+    if (!m_animations.hasActiveAnimationsOfType(AnimatedPropertyFilter))
         m_currentFilters = m_state.filters;
 }
 
index 0c376e0..d37483d 100644 (file)
@@ -1150,7 +1150,7 @@ bool CoordinatedGraphicsLayer::addAnimation(const KeyframeValueList& valueList,
 {
     ASSERT(!keyframesName.isEmpty());
 
-    if (!anim || anim->isEmptyOrZeroDuration() || valueList.size() < 2 || (valueList.property() != AnimatedPropertyTransform && valueList.property() != AnimatedPropertyOpacity && valueList.property() != AnimatedPropertyWebkitFilter))
+    if (!anim || anim->isEmptyOrZeroDuration() || valueList.size() < 2 || (valueList.property() != AnimatedPropertyTransform && valueList.property() != AnimatedPropertyOpacity && valueList.property() != AnimatedPropertyFilter))
         return false;
 
     bool listsMatch = false;
index f43c8f9..41e61e4 100644 (file)
@@ -6863,8 +6863,9 @@ void RenderLayer::updateOrRemoveFilterClients()
         FilterInfo::remove(*this);
         return;
     }
-
-    if (renderer().style().filter().hasReferenceFilter())
+    // Add the filter as a client to this renderer, unless we are a RenderLayer accommodating
+    // an SVG. In that case it takes care of its own resource management for filters.
+    if (renderer().style().filter().hasReferenceFilter() && !renderer().isSVGRoot())
         FilterInfo::get(*this).updateReferenceFilterClients(renderer().style().filter());
     else if (FilterInfo* filterInfo = FilterInfo::getIfExists(*this))
         filterInfo->removeReferenceFilterClients();
index 6bb4e63..70cdaa8 100644 (file)
@@ -2472,7 +2472,7 @@ bool RenderLayerBacking::startAnimation(double timeOffset, const Animation* anim
 {
     bool hasOpacity = keyframes.containsProperty(CSSPropertyOpacity);
     bool hasTransform = renderer().isBox() && keyframes.containsProperty(CSSPropertyTransform);
-    bool hasFilter = keyframes.containsProperty(CSSPropertyWebkitFilter);
+    bool hasFilter = keyframes.containsProperty(CSSPropertyFilter);
 
     bool hasBackdropFilter = false;
 #if ENABLE(FILTERS_LEVEL_2)
@@ -2484,7 +2484,7 @@ bool RenderLayerBacking::startAnimation(double timeOffset, const Animation* anim
 
     KeyframeValueList transformVector(AnimatedPropertyTransform);
     KeyframeValueList opacityVector(AnimatedPropertyOpacity);
-    KeyframeValueList filterVector(AnimatedPropertyWebkitFilter);
+    KeyframeValueList filterVector(AnimatedPropertyFilter);
 #if ENABLE(FILTERS_LEVEL_2)
     KeyframeValueList backdropFilterVector(AnimatedPropertyWebkitBackdropFilter);
 #endif
@@ -2507,7 +2507,7 @@ bool RenderLayerBacking::startAnimation(double timeOffset, const Animation* anim
         if ((hasOpacity && isFirstOrLastKeyframe) || currentKeyframe.containsProperty(CSSPropertyOpacity))
             opacityVector.insert(std::make_unique<FloatAnimationValue>(key, keyframeStyle->opacity(), tf));
 
-        if ((hasFilter && isFirstOrLastKeyframe) || currentKeyframe.containsProperty(CSSPropertyWebkitFilter))
+        if ((hasFilter && isFirstOrLastKeyframe) || currentKeyframe.containsProperty(CSSPropertyFilter))
             filterVector.insert(std::make_unique<FilterAnimationValue>(key, keyframeStyle->filter(), tf));
 
 #if ENABLE(FILTERS_LEVEL_2)
@@ -2583,13 +2583,13 @@ bool RenderLayerBacking::startTransition(double timeOffset, CSSPropertyID proper
         }
     }
 
-    if (property == CSSPropertyWebkitFilter && m_owningLayer.hasFilter()) {
-        const Animation* filterAnim = toStyle->transitionForProperty(CSSPropertyWebkitFilter);
+    if (property == CSSPropertyFilter && m_owningLayer.hasFilter()) {
+        const Animation* filterAnim = toStyle->transitionForProperty(CSSPropertyFilter);
         if (filterAnim && !filterAnim->isEmptyOrZeroDuration()) {
-            KeyframeValueList filterVector(AnimatedPropertyWebkitFilter);
+            KeyframeValueList filterVector(AnimatedPropertyFilter);
             filterVector.insert(std::make_unique<FilterAnimationValue>(0, fromStyle->filter()));
             filterVector.insert(std::make_unique<FilterAnimationValue>(1, toStyle->filter()));
-            if (m_graphicsLayer->addAnimation(filterVector, FloatSize(), filterAnim, GraphicsLayer::animationNameForTransition(AnimatedPropertyWebkitFilter), timeOffset)) {
+            if (m_graphicsLayer->addAnimation(filterVector, FloatSize(), filterAnim, GraphicsLayer::animationNameForTransition(AnimatedPropertyFilter), timeOffset)) {
                 // To ensure that the correct filter is visible when the animation ends, also set the final filter.
                 updateFilters(*toStyle);
                 didAnimate = true;
@@ -2697,8 +2697,8 @@ CSSPropertyID RenderLayerBacking::graphicsLayerToCSSProperty(AnimatedPropertyID
     case AnimatedPropertyBackgroundColor:
         cssProperty = CSSPropertyBackgroundColor;
         break;
-    case AnimatedPropertyWebkitFilter:
-        cssProperty = CSSPropertyWebkitFilter;
+    case AnimatedPropertyFilter:
+        cssProperty = CSSPropertyFilter;
         break;
 #if ENABLE(FILTERS_LEVEL_2)
     case AnimatedPropertyWebkitBackdropFilter:
@@ -2720,8 +2720,8 @@ AnimatedPropertyID RenderLayerBacking::cssToGraphicsLayerProperty(CSSPropertyID
         return AnimatedPropertyOpacity;
     case CSSPropertyBackgroundColor:
         return AnimatedPropertyBackgroundColor;
-    case CSSPropertyWebkitFilter:
-        return AnimatedPropertyWebkitFilter;
+    case CSSPropertyFilter:
+        return AnimatedPropertyFilter;
 #if ENABLE(FILTERS_LEVEL_2)
     case CSSPropertyWebkitBackdropFilter:
         return AnimatedPropertyWebkitBackdropFilter;
index a6dd85a..89556e3 100644 (file)
@@ -2614,7 +2614,7 @@ bool RenderLayerCompositor::requiresCompositingForAnimation(RenderLayerModelObje
     AnimationController& animController = renderer.animation();
     return (animController.isRunningAnimationOnRenderer(renderer, CSSPropertyOpacity, activeAnimationState)
             && (inCompositingMode() || (m_compositingTriggers & ChromeClient::AnimatedOpacityTrigger)))
-            || animController.isRunningAnimationOnRenderer(renderer, CSSPropertyWebkitFilter, activeAnimationState)
+            || animController.isRunningAnimationOnRenderer(renderer, CSSPropertyFilter, activeAnimationState)
 #if ENABLE(FILTERS_LEVEL_2)
             || animController.isRunningAnimationOnRenderer(renderer, CSSPropertyWebkitBackdropFilter, activeAnimationState)
 #endif
index bf97ace..06bfa85 100644 (file)
@@ -90,7 +90,6 @@ public:
     static Color initialLightingColor() { return Color(255, 255, 255); }
     static ShadowData* initialShadow() { return 0; }
     static String initialClipperResource() { return String(); }
-    static String initialFilterResource() { return String(); }
     static String initialMaskerResource() { return String(); }
     static String initialMarkerStartResource() { return String(); }
     static String initialMarkerMidResource() { return String(); }
@@ -295,12 +294,6 @@ public:
             resources.access()->clipper = obj;
     }
 
-    void setFilterResource(const String& obj)
-    {
-        if (!(resources->filter == obj))
-            resources.access()->filter = obj;
-    }
-
     void setMaskerResource(const String& obj)
     {
         if (!(resources->masker == obj))
@@ -372,7 +365,6 @@ public:
     const Length& x() const { return layout->x; }
     const Length& y() const { return layout->y; }
     String clipperResource() const { return resources->clipper; }
-    String filterResource() const { return resources->filter; }
     String maskerResource() const { return resources->masker; }
     String markerStartResource() const { return inheritedResources->markerStart; }
     String markerMidResource() const { return inheritedResources->markerMid; }
@@ -391,13 +383,12 @@ public:
     // convenience
     bool hasClipper() const { return !clipperResource().isEmpty(); }
     bool hasMasker() const { return !maskerResource().isEmpty(); }
-    bool hasFilter() const { return !filterResource().isEmpty(); }
     bool hasMarkers() const { return !markerStartResource().isEmpty() || !markerMidResource().isEmpty() || !markerEndResource().isEmpty(); }
     bool hasStroke() const { return strokePaintType() != SVGPaint::SVG_PAINTTYPE_NONE; }
     bool hasVisibleStroke() const { return hasStroke() && !strokeWidth().isZero(); }
     bool hasFill() const { return fillPaintType() != SVGPaint::SVG_PAINTTYPE_NONE; }
     bool isVerticalWritingMode() const { return writingMode() == WM_TBRL || writingMode() == WM_TB; }
-    bool isolatesBlending() const { return hasMasker() || hasFilter() || shadow(); }
+    bool isolatesBlending() const { return hasMasker() || shadow(); }
 
 protected:
     // inherit
index 3d204a0..7d69d84 100644 (file)
@@ -225,7 +225,6 @@ bool StyleShadowSVGData::operator==(const StyleShadowSVGData& other) const
 
 StyleResourceData::StyleResourceData()
     : clipper(SVGRenderStyle::initialClipperResource())
-    , filter(SVGRenderStyle::initialFilterResource())
     , masker(SVGRenderStyle::initialMaskerResource())
 {
 }
@@ -233,7 +232,6 @@ StyleResourceData::StyleResourceData()
 inline StyleResourceData::StyleResourceData(const StyleResourceData& other)
     : RefCounted<StyleResourceData>()
     , clipper(other.clipper)
-    , filter(other.filter)
     , masker(other.masker)
 {
 }
@@ -246,7 +244,6 @@ Ref<StyleResourceData> StyleResourceData::copy() const
 bool StyleResourceData::operator==(const StyleResourceData& other) const
 {
     return clipper == other.clipper
-        && filter == other.filter
         && masker == other.masker;
 }
 
index 76c1a49..8836419 100644 (file)
@@ -261,7 +261,6 @@ namespace WebCore {
         }
 
         String clipper;
-        String filter;
         String masker;
 
     private:
index 981b0fe..dfd8f04 100644 (file)
@@ -76,7 +76,7 @@ static bool propertyCreatesStackingContext(CSSPropertyID property)
     case CSSPropertyMixBlendMode:
     case CSSPropertyIsolation:
 #endif
-    case CSSPropertyWebkitFilter:
+    case CSSPropertyFilter:
 #if ENABLE(FILTERS_LEVEL_2)
     case CSSPropertyWebkitBackdropFilter:
 #endif
@@ -112,7 +112,7 @@ static bool propertyTriggersCompositing(CSSPropertyID property)
 {
     switch (property) {
     case CSSPropertyOpacity:
-    case CSSPropertyWebkitFilter:
+    case CSSPropertyFilter:
 #if ENABLE(FILTERS_LEVEL_2)
     case CSSPropertyWebkitBackdropFilter:
 #endif
index 2b17b2c..208a1bb 100644 (file)
@@ -452,7 +452,7 @@ void SVGRenderSupport::styleChanged(RenderElement& renderer, const RenderStyle*
 #if ENABLE(CSS_COMPOSITING)
 bool SVGRenderSupport::isolatesBlending(const RenderStyle& style)
 {
-    return style.svgStyle().isolatesBlending() || style.hasBlendMode() || style.opacity() < 1.0f;
+    return style.svgStyle().isolatesBlending() || style.hasFilter() || style.hasBlendMode() || style.opacity() < 1.0f;
 }
 
 void SVGRenderSupport::updateMaskedAncestorShouldIsolateBlending(const RenderElement& renderer)
index fc85f23..56c0375 100644 (file)
@@ -634,14 +634,22 @@ void writeResources(TextStream& ts, const RenderObject& renderer, int indent)
             ts << " " << clipper->resourceBoundingBox(renderer) << "\n";
         }
     }
-    if (!svgStyle.filterResource().isEmpty()) {
-        if (RenderSVGResourceFilter* filter = getRenderSVGResourceById<RenderSVGResourceFilter>(renderer.document(), svgStyle.filterResource())) {
-            writeIndent(ts, indent);
-            ts << " ";
-            writeNameAndQuotedValue(ts, "filter", svgStyle.filterResource());
-            ts << " ";
-            writeStandardPrefix(ts, *filter, 0);
-            ts << " " << filter->resourceBoundingBox(renderer) << "\n";
+    if (style.hasFilter()) {
+        const FilterOperations& filterOperations = style.filter();
+        if (filterOperations.size() == 1) {
+            const FilterOperation& filterOperation = *filterOperations.at(0);
+            if (filterOperation.type() == FilterOperation::REFERENCE) {
+                const auto& referenceFilterOperation = downcast<ReferenceFilterOperation>(filterOperation);
+                AtomicString id = SVGURIReference::fragmentIdentifierFromIRIString(referenceFilterOperation.url(), renderer.document());
+                if (RenderSVGResourceFilter* filter = getRenderSVGResourceById<RenderSVGResourceFilter>(renderer.document(), id)) {
+                    writeIndent(ts, indent);
+                    ts << " ";
+                    writeNameAndQuotedValue(ts, "filter", id);
+                    ts << " ";
+                    writeStandardPrefix(ts, *filter, 0);
+                    ts << " " << filter->resourceBoundingBox(renderer) << "\n";
+                }
+            }
         }
     }
 }
index 926f23b..212a166 100644 (file)
@@ -152,7 +152,7 @@ void SVGRenderingContext::prepareToRenderSVGContent(RenderElement& renderer, Pai
 
     auto* resources = SVGResourcesCache::cachedResourcesForRenderer(*m_renderer);
     if (!resources) {
-        if (svgStyle.hasFilter())
+        if (style.hasFilter())
             return;
 
         m_renderingFlags |= RenderingPrepared;
index ab61dd3..e68ce38 100644 (file)
@@ -20,6 +20,7 @@
 #include "config.h"
 #include "SVGResources.h"
 
+#include "FilterOperation.h"
 #include "RenderSVGResourceClipper.h"
 #include "RenderSVGResourceFilter.h"
 #include "RenderSVGResourceMarker.h"
@@ -177,7 +178,7 @@ static inline void registerPendingResource(SVGDocumentExtensions& extensions, co
     extensions.addPendingResource(id, &element);
 }
 
-bool SVGResources::buildCachedResources(const RenderElement& renderer, const SVGRenderStyle& svgStyle)
+bool SVGResources::buildCachedResources(const RenderElement& renderer, const RenderStyle& style)
 {
     ASSERT(renderer.element());
     ASSERT_WITH_SECURITY_IMPLICATION(renderer.element()->isSVGElement());
@@ -195,6 +196,8 @@ bool SVGResources::buildCachedResources(const RenderElement& renderer, const SVG
     if (tagName.isNull())
         return false;
 
+    const SVGRenderStyle& svgStyle = style.svgStyle();
+
     bool foundResources = false;
     if (clipperFilterMaskerTags().contains(tagName)) {
         if (svgStyle.hasClipper()) {
@@ -205,12 +208,19 @@ bool SVGResources::buildCachedResources(const RenderElement& renderer, const SVG
                 registerPendingResource(extensions, id, element);
         }
 
-        if (svgStyle.hasFilter()) {
-            AtomicString id(svgStyle.filterResource());
-            if (setFilter(getRenderSVGResourceById<RenderSVGResourceFilter>(document, id)))
-                foundResources = true;
-            else
-                registerPendingResource(extensions, id, element);
+        if (style.hasFilter()) {
+            const FilterOperations& filterOperations = style.filter();
+            if (filterOperations.size() == 1) {
+                const FilterOperation& filterOperation = *filterOperations.at(0);
+                if (filterOperation.type() == FilterOperation::REFERENCE) {
+                    const auto& referenceFilterOperation = downcast<ReferenceFilterOperation>(filterOperation);
+                    AtomicString id = SVGURIReference::fragmentIdentifierFromIRIString(referenceFilterOperation.url(), element.document());
+                    if (setFilter(getRenderSVGResourceById<RenderSVGResourceFilter>(document, id)))
+                        foundResources = true;
+                    else
+                        registerPendingResource(extensions, id, element);
+                }
+            }
         }
 
         if (svgStyle.hasMasker()) {
index 8db1d4e..27312c7 100644 (file)
@@ -29,6 +29,7 @@ namespace WebCore {
 class Document;
 class RenderElement;
 class RenderObject;
+class RenderStyle;
 class RenderSVGResourceClipper;
 class RenderSVGResourceContainer;
 class RenderSVGResourceFilter;
@@ -42,7 +43,7 @@ class SVGResources {
 public:
     SVGResources();
 
-    bool buildCachedResources(const RenderElement&, const SVGRenderStyle&);
+    bool buildCachedResources(const RenderElement&, const RenderStyle&);
 
     // Ordinary resources
     RenderSVGResourceClipper* clipper() const { return m_clipperFilterMaskerData ? m_clipperFilterMaskerData->clipper : 0; }
index 8556ecd..f5d9780 100644 (file)
@@ -39,11 +39,9 @@ void SVGResourcesCache::addResourcesFromRenderer(RenderElement& renderer, const
 {
     ASSERT(!m_cache.contains(&renderer));
 
-    const SVGRenderStyle& svgStyle = style.svgStyle();
-
     // Build a list of all resources associated with the passed RenderObject
     auto newResources = std::make_unique<SVGResources>();
-    if (!newResources->buildCachedResources(renderer, svgStyle))
+    if (!newResources->buildCachedResources(renderer, style))
         return;
 
     // Put object in cache.
index f74b843..718d677 100644 (file)
@@ -1,3 +1,17 @@
+2015-08-18  Dean Jackson  <dino@apple.com>
+
+        Support CSS filters without webkit prefix
+        https://bugs.webkit.org/show_bug.cgi?id=148138
+        <rdar://problem/22331434>
+
+        Reviewed by Sam Weinig.
+
+        Rename WebkitFilter to Filter.
+
+        * Shared/CoordinatedGraphics/CoordinatedGraphicsArgumentCoders.cpp:
+        (IPC::ArgumentCoder<TextureMapperAnimation>::encode):
+        (IPC::ArgumentCoder<TextureMapperAnimation>::decode):
+
 2015-08-19  Alex Christensen  <achristensen@webkit.org>
 
         Build TestWTF on Mac with CMake.
index 2be9c87..5fa0de6 100644 (file)
@@ -448,7 +448,7 @@ void ArgumentCoder<TextureMapperAnimation>::encode(ArgumentEncoder& encoder, con
         case AnimatedPropertyTransform:
             encoder << static_cast<const TransformAnimationValue&>(value).value();
             break;
-        case AnimatedPropertyWebkitFilter:
+        case AnimatedPropertyFilter:
             encoder << static_cast<const FilterAnimationValue&>(value).value();
             break;
         default:
@@ -534,7 +534,7 @@ bool ArgumentCoder<TextureMapperAnimation>::decode(ArgumentDecoder& decoder, Tex
             keyframes.insert(std::make_unique<TransformAnimationValue>(keyTime, transform, timingFunction.get()));
             break;
         }
-        case AnimatedPropertyWebkitFilter: {
+        case AnimatedPropertyFilter: {
             FilterOperations filter;
             if (!decoder.decode(filter))
                 return false;