Rename color-filter to -apple-color-filter and do not expose it to We…

…b content https://bugs.webkit.org/show_bug.cgi?id=186306 <rdar://problem/39874167> Reviewed by Simon Fraser. Source/WebCore: Rename the color-filter CSS property to -apple-color-filter. * animation/KeyframeEffectReadOnly.cpp: (WebCore::KeyframeEffectReadOnly::checkForMatchingColorFilterFunctionLists): * css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::valueForPropertyinStyle): * css/CSSGradientValue.cpp: (WebCore::CSSGradientValue::image): (WebCore::CSSGradientValue::computeStops): (WebCore::CSSGradientValue::knownToBeOpaque const): * css/CSSProperties.json: * css/parser/CSSPropertyParser.cpp: (WebCore::CSSPropertyParser::parseSingleValue): * page/animation/CSSPropertyAnimation.cpp: (WebCore::blendFunc): (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap): * page/animation/ImplicitAnimation.cpp: (WebCore::ImplicitAnimation::checkForMatchingColorFilterFunctionLists): * page/animation/KeyframeAnimation.cpp: (WebCore::KeyframeAnimation::checkForMatchingColorFilterFunctionLists): * rendering/InlineTextBox.cpp: (WebCore::InlineTextBox::paintMarkedTextForeground): (WebCore::InlineTextBox::paintMarkedTextDecoration): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::changeRequiresRepaint const): (WebCore::RenderStyle::visitedDependentColorWithColorFilter const): (WebCore::RenderStyle::colorByApplyingColorFilter const): * rendering/style/RenderStyle.h: (WebCore::RenderStyle::mutableAppleColorFilter): (WebCore::RenderStyle::appleColorFilter const): (WebCore::RenderStyle::hasAppleColorFilter const): (WebCore::RenderStyle::setAppleColorFilter): (WebCore::RenderStyle::initialAppleColorFilter): (WebCore::RenderStyle::mutableColorFilter): Deleted. (WebCore::RenderStyle::colorFilter const): Deleted. (WebCore::RenderStyle::hasColorFilter const): Deleted. (WebCore::RenderStyle::setColorFilter): Deleted. (WebCore::RenderStyle::initialColorFilter): Deleted. * rendering/style/StyleRareInheritedData.cpp: (WebCore::StyleRareInheritedData::StyleRareInheritedData): (WebCore::StyleRareInheritedData::operator== const): (WebCore::StyleRareInheritedData::hasColorFilters const): * rendering/style/StyleRareInheritedData.h: Source/WebKit: Change the ColorFilter setting to no longer be exposed as an experimental feature and ensure it's turned off by default. To allow internal clients to use the -apple-color-filter property, we expose a new _colorFilterEnabled property as SPI to WKWebViewConfigurationPrivate. * Shared/WebPreferences.yaml: * UIProcess/API/C/WKPreferences.cpp: (WKPreferencesSetColorFilterEnabled): (WKPreferencesGetColorFilterEnabled): * UIProcess/API/C/WKPreferencesRefPrivate.h: * UIProcess/API/Cocoa/WKWebView.mm: (-[WKWebView _initializeWithConfiguration:]): * UIProcess/API/Cocoa/WKWebViewConfiguration.mm: (-[WKWebViewConfiguration init]): (-[WKWebViewConfiguration copyWithZone:]): (-[WKWebViewConfiguration _setAttachmentElementEnabled:]): (-[WKWebViewConfiguration _colorFilterEnabled]): (-[WKWebViewConfiguration _setColorFilterEnabled:]): * UIProcess/API/Cocoa/WKWebViewConfigurationPrivate.h: Tools: Adding an option to turn support for the -apple-color-filter property on via an HTML comment. * DumpRenderTree/TestOptions.cpp: (TestOptions::TestOptions): * DumpRenderTree/TestOptions.h: * DumpRenderTree/mac/DumpRenderTree.mm: (setWebPreferencesForTestOptions): * WebKitTestRunner/TestController.cpp: (WTR::TestController::resetPreferencesToConsistentValues): (WTR::updateTestOptionsFromTestHeader): * WebKitTestRunner/TestOptions.h: (WTR::TestOptions::hasSameInitializationOptions const): * WebKitTestRunner/cocoa/TestControllerCocoa.mm: (WTR::TestController::platformCreateWebView): LayoutTests: Update tests for color-filter to test -apple-color-filter and explicitly turn the feature on since it's disabled by default. We also update a test to not use the colorFilter accessor and setter on CSSStyleDeclaration because using an -apple- prefix will no longer expose such a getter or setter, using getPropertyValue() and setProperty() instead. * animations/resources/animation-test-helpers.js: (getPropertyValue): (comparePropertyValue): * css3/color-filters/color-filter-animation-expected.txt: * css3/color-filters/color-filter-animation.html: * css3/color-filters/color-filter-backgrounds-borders-expected.html: * css3/color-filters/color-filter-backgrounds-borders.html: * css3/color-filters/color-filter-box-shadow-expected.html: * css3/color-filters/color-filter-box-shadow.html: * css3/color-filters/color-filter-brightness-expected.html: * css3/color-filters/color-filter-brightness.html: * css3/color-filters/color-filter-caret-color-expected.html: * css3/color-filters/color-filter-caret-color.html: * css3/color-filters/color-filter-color-property-expected.html: * css3/color-filters/color-filter-color-property-list-item-expected.html: * css3/color-filters/color-filter-color-property-list-item.html: * css3/color-filters/color-filter-color-property.html: * css3/color-filters/color-filter-color-text-decorations-expected.html: * css3/color-filters/color-filter-color-text-decorations.html: * css3/color-filters/color-filter-column-rule-expected.html: * css3/color-filters/color-filter-column-rule.html: * css3/color-filters/color-filter-contrast-expected.html: * css3/color-filters/color-filter-contrast.html: * css3/color-filters/color-filter-current-color-expected.html: * css3/color-filters/color-filter-current-color.html: * css3/color-filters/color-filter-filter-list-expected.html: * css3/color-filters/color-filter-filter-list.html: * css3/color-filters/color-filter-gradients-expected.html: * css3/color-filters/color-filter-gradients.html: * css3/color-filters/color-filter-grayscale-expected.html: * css3/color-filters/color-filter-grayscale.html: * css3/color-filters/color-filter-hue-rotate-expected.html: * css3/color-filters/color-filter-hue-rotate.html: * css3/color-filters/color-filter-inherits-expected.html: * css3/color-filters/color-filter-inherits.html: * css3/color-filters/color-filter-invert-expected.html: * css3/color-filters/color-filter-invert.html: * css3/color-filters/color-filter-opacity-expected.html: * css3/color-filters/color-filter-opacity.html: * css3/color-filters/color-filter-outline-expected.html: * css3/color-filters/color-filter-outline.html: * css3/color-filters/color-filter-parsing-expected.txt: * css3/color-filters/color-filter-parsing.html: * css3/color-filters/color-filter-saturate-expected.html: * css3/color-filters/color-filter-saturate.html: * css3/color-filters/color-filter-sepia-expected.html: * css3/color-filters/color-filter-sepia.html: * css3/color-filters/color-filter-text-decoration-shadow-expected.html: * css3/color-filters/color-filter-text-decoration-shadow.html: * css3/color-filters/color-filter-text-emphasis-expected.html: * css3/color-filters/color-filter-text-emphasis.html: * css3/color-filters/color-filter-text-shadow-expected.html: * css3/color-filters/color-filter-text-shadow.html: * css3/color-filters/color-filter-text-stroke-expected.html: * css3/color-filters/color-filter-text-stroke.html: * css3/color-filters/svg/color-filter-inline-svg-expected.html: * css3/color-filters/svg/color-filter-inline-svg.html: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@232559 268f45cc-cd09-0410-ab3c-d52691b4dbfc
wqyfavor · Jun 6, 2018 · beb3a08 · beb3a08
1 parent eb9d3ab
commit beb3a08
Show file tree

Hide file tree

Showing 84 changed files with 504 additions and 285 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,73 @@
+2018-06-06  Antoine Quint  <[email protected]>
+
+        Rename color-filter to -apple-color-filter and do not expose it to Web content
+        https://bugs.webkit.org/show_bug.cgi?id=186306
+        <rdar://problem/39874167>
+
+        Reviewed by Simon Fraser.
+
+        Update tests for color-filter to test -apple-color-filter and explicitly turn the feature on since it's disabled by default.
+        We also update a test to not use the colorFilter accessor and setter on CSSStyleDeclaration because using an -apple- prefix
+        will no longer expose such a getter or setter, using getPropertyValue() and setProperty() instead.
+
+        * animations/resources/animation-test-helpers.js:
+        (getPropertyValue):
+        (comparePropertyValue):
+        * css3/color-filters/color-filter-animation-expected.txt:
+        * css3/color-filters/color-filter-animation.html:
+        * css3/color-filters/color-filter-backgrounds-borders-expected.html:
+        * css3/color-filters/color-filter-backgrounds-borders.html:
+        * css3/color-filters/color-filter-box-shadow-expected.html:
+        * css3/color-filters/color-filter-box-shadow.html:
+        * css3/color-filters/color-filter-brightness-expected.html:
+        * css3/color-filters/color-filter-brightness.html:
+        * css3/color-filters/color-filter-caret-color-expected.html:
+        * css3/color-filters/color-filter-caret-color.html:
+        * css3/color-filters/color-filter-color-property-expected.html:
+        * css3/color-filters/color-filter-color-property-list-item-expected.html:
+        * css3/color-filters/color-filter-color-property-list-item.html:
+        * css3/color-filters/color-filter-color-property.html:
+        * css3/color-filters/color-filter-color-text-decorations-expected.html:
+        * css3/color-filters/color-filter-color-text-decorations.html:
+        * css3/color-filters/color-filter-column-rule-expected.html:
+        * css3/color-filters/color-filter-column-rule.html:
+        * css3/color-filters/color-filter-contrast-expected.html:
+        * css3/color-filters/color-filter-contrast.html:
+        * css3/color-filters/color-filter-current-color-expected.html:
+        * css3/color-filters/color-filter-current-color.html:
+        * css3/color-filters/color-filter-filter-list-expected.html:
+        * css3/color-filters/color-filter-filter-list.html:
+        * css3/color-filters/color-filter-gradients-expected.html:
+        * css3/color-filters/color-filter-gradients.html:
+        * css3/color-filters/color-filter-grayscale-expected.html:
+        * css3/color-filters/color-filter-grayscale.html:
+        * css3/color-filters/color-filter-hue-rotate-expected.html:
+        * css3/color-filters/color-filter-hue-rotate.html:
+        * css3/color-filters/color-filter-inherits-expected.html:
+        * css3/color-filters/color-filter-inherits.html:
+        * css3/color-filters/color-filter-invert-expected.html:
+        * css3/color-filters/color-filter-invert.html:
+        * css3/color-filters/color-filter-opacity-expected.html:
+        * css3/color-filters/color-filter-opacity.html:
+        * css3/color-filters/color-filter-outline-expected.html:
+        * css3/color-filters/color-filter-outline.html:
+        * css3/color-filters/color-filter-parsing-expected.txt:
+        * css3/color-filters/color-filter-parsing.html:
+        * css3/color-filters/color-filter-saturate-expected.html:
+        * css3/color-filters/color-filter-saturate.html:
+        * css3/color-filters/color-filter-sepia-expected.html:
+        * css3/color-filters/color-filter-sepia.html:
+        * css3/color-filters/color-filter-text-decoration-shadow-expected.html:
+        * css3/color-filters/color-filter-text-decoration-shadow.html:
+        * css3/color-filters/color-filter-text-emphasis-expected.html:
+        * css3/color-filters/color-filter-text-emphasis.html:
+        * css3/color-filters/color-filter-text-shadow-expected.html:
+        * css3/color-filters/color-filter-text-shadow.html:
+        * css3/color-filters/color-filter-text-stroke-expected.html:
+        * css3/color-filters/color-filter-text-stroke.html:
+        * css3/color-filters/svg/color-filter-inline-svg-expected.html:
+        * css3/color-filters/svg/color-filter-inline-svg.html:
+
 2018-06-06  David Fenton  <[email protected]>
 
         [macOS WK2 Release] Layout Test media/video-trackmenu-selection.html is flaky

diff --git a/LayoutTests/animations/resources/animation-test-helpers.js b/LayoutTests/animations/resources/animation-test-helpers.js
@@ -431,7 +431,7 @@ function getPropertyValue(property, elementId, iframeId)
                || property == "webkitMaskImage"
                || property == "webkitMaskBoxImage"
                || property == "filter"
-               || property == "colorFilter"
+               || property == "-apple-color-filter"
                || property == "webkitFilter"
                || property == "webkitBackdropFilter"
                || property == "webkitClipPath"
@@ -471,7 +471,7 @@ function comparePropertyValue(property, computedValue, expectedValue, tolerance)
                     break;
             }
         }
-    } else if (property == "webkitFilter" || property == "webkitBackdropFilter" || property == "filter" || property == "colorFilter") {
+    } else if (property == "webkitFilter" || property == "webkitBackdropFilter" || property == "filter" || property == "-apple-color-filter") {
         var filterParameters = parseFilterFunctionList(computedValue);
         var filter2Parameters = parseFilterFunctionList(expectedValue);
         result = compareFilterFunctions(filterParameters, filter2Parameters, tolerance);

diff --git a/LayoutTests/css3/color-filters/color-filter-animation-expected.txt b/LayoutTests/css3/color-filters/color-filter-animation-expected.txt
@@ -1,10 +1,10 @@
 
-PASS - "colorFilter" property for "grayscale-box" element at 1s saw something close to: grayscale(0.5)
-PASS - "colorFilter" property for "sepia-box" element at 1s saw something close to: sepia(0.5)
-PASS - "colorFilter" property for "saturate-box" element at 1s saw something close to: saturate(0.5)
-PASS - "colorFilter" property for "huerotate-box" element at 1s saw something close to: hue-rotate(90deg)
-PASS - "colorFilter" property for "invert-box" element at 1s saw something close to: invert(0.5)
-PASS - "colorFilter" property for "opacity-box" element at 1s saw something close to: opacity(0.5)
-PASS - "colorFilter" property for "brightness-box" element at 1s saw something close to: brightness(0.5)
-PASS - "colorFilter" property for "contrast-box" element at 1s saw something close to: contrast(0.5)
+PASS - "-apple-color-filter" property for "grayscale-box" element at 1s saw something close to: grayscale(0.5)
+PASS - "-apple-color-filter" property for "sepia-box" element at 1s saw something close to: sepia(0.5)
+PASS - "-apple-color-filter" property for "saturate-box" element at 1s saw something close to: saturate(0.5)
+PASS - "-apple-color-filter" property for "huerotate-box" element at 1s saw something close to: hue-rotate(90deg)
+PASS - "-apple-color-filter" property for "invert-box" element at 1s saw something close to: invert(0.5)
+PASS - "-apple-color-filter" property for "opacity-box" element at 1s saw something close to: opacity(0.5)
+PASS - "-apple-color-filter" property for "brightness-box" element at 1s saw something close to: brightness(0.5)
+PASS - "-apple-color-filter" property for "contrast-box" element at 1s saw something close to: contrast(0.5)
 
diff --git a/LayoutTests/css3/color-filters/color-filter-animation.html b/LayoutTests/css3/color-filters/color-filter-animation.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
 
 <html>
 <head>
@@ -45,58 +45,58 @@
 
 
     @keyframes grayscale-anim {
-        from { color-filter: grayscale(0); }
-        to   { color-filter: grayscale(1); }
+        from { -apple-color-filter: grayscale(0); }
+        to   { -apple-color-filter: grayscale(1); }
     }
 
     @keyframes sepia-anim {
-        from { color-filter: sepia(0); }
-        to   { color-filter: sepia(1); }
+        from { -apple-color-filter: sepia(0); }
+        to   { -apple-color-filter: sepia(1); }
     }
 
     @keyframes saturate-anim {
-        from { color-filter: saturate(0); }
-        to   { color-filter: saturate(1); }
+        from { -apple-color-filter: saturate(0); }
+        to   { -apple-color-filter: saturate(1); }
     }
 
     @keyframes huerotate-anim {
-        from { color-filter: hue-rotate(0); }
-        to   { color-filter: hue-rotate(180deg); }
+        from { -apple-color-filter: hue-rotate(0); }
+        to   { -apple-color-filter: hue-rotate(180deg); }
     }
 
     @keyframes invert-anim {
-        from { color-filter: invert(0); }
-        to   { color-filter: invert(1); }
+        from { -apple-color-filter: invert(0); }
+        to   { -apple-color-filter: invert(1); }
     }
 
     @keyframes opacity-anim {
-        from { color-filter: opacity(1); }
-        to   { color-filter: opacity(0); }
+        from { -apple-color-filter: opacity(1); }
+        to   { -apple-color-filter: opacity(0); }
     }
 
     @keyframes brightness-anim {
-        from { color-filter: brightness(1); }
-        to   { color-filter: brightness(0); }
+        from { -apple-color-filter: brightness(1); }
+        to   { -apple-color-filter: brightness(0); }
     }
 
     @keyframes contrast-anim {
-        from { color-filter: contrast(1); }
-        to   { color-filter: contrast(0); }
+        from { -apple-color-filter: contrast(1); }
+        to   { -apple-color-filter: contrast(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]
-      ["grayscale-anim",  1, "grayscale-box", "colorFilter", 'grayscale(0.5)', 0.05],
-      ["sepia-anim",  1, "sepia-box", "colorFilter", 'sepia(0.5)', 0.05],
-      ["saturate-anim",  1, "saturate-box", "colorFilter", 'saturate(0.5)', 0.05],
-      ["huerotate-anim",  1, "huerotate-box", "colorFilter", 'hue-rotate(90deg)', 2],
-      ["invert-anim",  1, "invert-box", "colorFilter", 'invert(0.5)', 0.05],
-      ["opacity-anim",  1, "opacity-box", "colorFilter", 'opacity(0.5)', 0.05],
-      ["brightness-anim",  1, "brightness-box", "colorFilter", 'brightness(0.5)', 0.05],
-      ["contrast-anim",  1, "contrast-box", "colorFilter", 'contrast(0.5)', 0.05],
+      ["grayscale-anim",  1, "grayscale-box", "-apple-color-filter", 'grayscale(0.5)', 0.05],
+      ["sepia-anim",  1, "sepia-box", "-apple-color-filter", 'sepia(0.5)', 0.05],
+      ["saturate-anim",  1, "saturate-box", "-apple-color-filter", 'saturate(0.5)', 0.05],
+      ["huerotate-anim",  1, "huerotate-box", "-apple-color-filter", 'hue-rotate(90deg)', 2],
+      ["invert-anim",  1, "invert-box", "-apple-color-filter", 'invert(0.5)', 0.05],
+      ["opacity-anim",  1, "opacity-box", "-apple-color-filter", 'opacity(0.5)', 0.05],
+      ["brightness-anim",  1, "brightness-box", "-apple-color-filter", 'brightness(0.5)', 0.05],
+      ["contrast-anim",  1, "contrast-box", "-apple-color-filter", 'contrast(0.5)', 0.05],
     ];
 
     runAnimationTest(expectedValues);

diff --git a/LayoutTests/css3/color-filters/color-filter-backgrounds-borders-expected.html b/LayoutTests/css3/color-filters/color-filter-backgrounds-borders-expected.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>CSS Test: color-filter reference</title>
+        <title>CSS Test: -apple-color-filter reference</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
 
-        <meta name="assert" content="color-filter affects backgrounds and borders">
+        <meta name="assert" content="-apple-color-filter affects backgrounds and borders">
         <style type="text/css">
             .test
             {

diff --git a/LayoutTests/css3/color-filters/color-filter-backgrounds-borders.html b/LayoutTests/css3/color-filters/color-filter-backgrounds-borders.html
@@ -1,19 +1,19 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
 <html>
     <head>
-        <title>CSS Test: color-filter affects backgrounds and borders</title>
+        <title>CSS Test: -apple-color-filter affects backgrounds and borders</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
-        <link rel="match" href="color-filter-backgrounds-borders-expected.html">
+        <link rel="match" href="-apple-color-filter-backgrounds-borders-expected.html">
 
-        <meta name="assert" content="color-filter affects backgrounds and borders">
+        <meta name="assert" content="-apple-color-filter affects backgrounds and borders">
         <style type="text/css">
             .test
             {
                 width: 200px;
                 height: 200px;
                 background-color: rgb(255, 128, 255);
                 border: 20px solid yellow;
-                color-filter: invert();
+                -apple-color-filter: invert();
             }
         </style>
     </head>

diff --git a/LayoutTests/css3/color-filters/color-filter-box-shadow-expected.html b/LayoutTests/css3/color-filters/color-filter-box-shadow-expected.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>CSS Test: color-filter affects box-shadow color</title>
+        <title>CSS Test: -apple-color-filter affects box-shadow color</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
 
-        <meta name="assert" content="color-filter affects backgrounds and borders">
+        <meta name="assert" content="-apple-color-filter affects backgrounds and borders">
         <style type="text/css">
             .test
             {

diff --git a/LayoutTests/css3/color-filters/color-filter-box-shadow.html b/LayoutTests/css3/color-filters/color-filter-box-shadow.html
@@ -1,19 +1,19 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
 <html>
     <head>
-        <title>CSS Test: color-filter affects box-shadow color</title>
+        <title>CSS Test: -apple-color-filter affects box-shadow color</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
-        <link rel="match" href="color-filter-box-shadow-expected.html">
+        <link rel="match" href="-apple-color-filter-box-shadow-expected.html">
 
-        <meta name="assert" content="color-filter affects box-shadow color">
+        <meta name="assert" content="-apple-color-filter affects box-shadow color">
         <style type="text/css">
             .test
             {
                 width: 200px;
                 height: 200px;
                 background-color: rgb(255, 128, 255);
                 box-shadow: 50px 50px 0 yellow;
-                color-filter: invert();
+                -apple-color-filter: invert();
             }
         </style>
     </head>

diff --git a/LayoutTests/css3/color-filters/color-filter-brightness-expected.html b/LayoutTests/css3/color-filters/color-filter-brightness-expected.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>CSS Test: color-filter reference</title>
+        <title>CSS Test: -apple-color-filter reference</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
 
         <style type="text/css">

diff --git a/LayoutTests/css3/color-filters/color-filter-brightness.html b/LayoutTests/css3/color-filters/color-filter-brightness.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
 <html>
     <head>
-        <title>CSS Test: brightness color-filter</title>
+        <title>CSS Test: brightness -apple-color-filter</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
-        <link rel="match" href="color-filter-brightness-expected.html">
+        <link rel="match" href="-apple-color-filter-brightness-expected.html">
 
-        <meta name="assert" content="brightness color-filter">
+        <meta name="assert" content="brightness -apple-color-filter">
         <style type="text/css">
             .test
             {
@@ -19,11 +19,11 @@
         </style>
     </head>
     <body>
-        <div class="test" style="color-filter: brightness()"></div>
-        <div class="test" style="color-filter: brightness(2)"></div>
-        <div class="test" style="color-filter: brightness(1)"></div>
-        <div class="test" style="color-filter: brightness(0.5)"></div>
-        <div class="test" style="color-filter: brightness(0)"></div>
-        <div class="test" style="color-filter: brightness(-0.5)"></div>
+        <div class="test" style="-apple-color-filter: brightness()"></div>
+        <div class="test" style="-apple-color-filter: brightness(2)"></div>
+        <div class="test" style="-apple-color-filter: brightness(1)"></div>
+        <div class="test" style="-apple-color-filter: brightness(0.5)"></div>
+        <div class="test" style="-apple-color-filter: brightness(0)"></div>
+        <div class="test" style="-apple-color-filter: brightness(-0.5)"></div>
     </body>
 </html>
diff --git a/LayoutTests/css3/color-filters/color-filter-caret-color-expected.html b/LayoutTests/css3/color-filters/color-filter-caret-color-expected.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>CSS Test: color-filter reference</title>
+        <title>CSS Test: -apple-color-filter reference</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
 
         <style>

diff --git a/LayoutTests/css3/color-filters/color-filter-caret-color.html b/LayoutTests/css3/color-filters/color-filter-caret-color.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
 <html>
     <head>
-        <title>CSS Test: color-filter affects caret-color</title>
+        <title>CSS Test: -apple-color-filter affects caret-color</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
-        <link rel="match" href="color-filter-caret-color-expected.html">
+        <link rel="match" href="-apple-color-filter-caret-color-expected.html">
 
-        <meta name="assert" content="color-filter affects caret-color">
+        <meta name="assert" content="-apple-color-filter affects caret-color">
         <style>
         #test-container {
             height: 50px;
@@ -15,7 +15,7 @@
         }
 
         #test {
-            color-filter: invert();
+            -apple-color-filter: invert();
             background-color: white;
             transform-origin: left top;
             transform: scale(50, 50);

diff --git a/LayoutTests/css3/color-filters/color-filter-color-property-expected.html b/LayoutTests/css3/color-filters/color-filter-color-property-expected.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>CSS Test: color-filter reference</title>
+        <title>CSS Test: -apple-color-filter reference</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
 
         <style type="text/css">

diff --git a/LayoutTests/css3/color-filters/color-filter-color-property-list-item-expected.html b/LayoutTests/css3/color-filters/color-filter-color-property-list-item-expected.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>CSS Test: color-filter reference</title>
+        <title>CSS Test: -apple-color-filter reference</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
 
-        <meta name="assert" content="color-filter affects the color of text">
+        <meta name="assert" content="-apple-color-filter affects the color of text">
         <style type="text/css">
             div.test
             {

diff --git a/LayoutTests/css3/color-filters/color-filter-color-property-list-item.html b/LayoutTests/css3/color-filters/color-filter-color-property-list-item.html
@@ -1,17 +1,17 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
 <html>
     <head>
-        <title>CSS Test: color-filter affects the color of a list item bullet</title>
+        <title>CSS Test: -apple-color-filter affects the color of a list item bullet</title>
         <link rel="author" title="Apple" href="http://www.apple.com/">
-        <link rel="match" href="color-filter-color-property-list-item-expected.html">
+        <link rel="match" href="-apple-color-filter-color-property-list-item-expected.html">
 
-        <meta name="assert" content="color-filter affects the color of a list item bullet">
+        <meta name="assert" content="-apple-color-filter affects the color of a list item bullet">
         <style type="text/css">
             div.test
             {
                 font: 200px Ahem;
                 color: rgb(255, 128, 255);
-                color-filter: invert();
+                -apple-color-filter: invert();
             }
             ul {
                 margin: 0;