[CSS Blending] Refactor -webkit-blend-mode to -webkit-mix-blend-mode
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Feb 2014 09:19:16 +0000 (09:19 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 21 Feb 2014 09:19:16 +0000 (09:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128805

Patch by Mihai Tica <mitica@adobe.com> on 2014-02-21
Reviewed by Dean Jackson.

Source/WebCore:

The spec defines the mix-blend-mode property. This means that the
prefixed version should be -webkit-mix-blend-mode, instead of
-webkit-blend-mode.

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::isValidKeywordPropertyAndValue):
(WebCore::isKeywordPropertyID):
(WebCore::CSSParser::parseValue):
* css/CSSPropertyNames.in:
* css/DeprecatedStyleBuilder.cpp:
(WebCore::DeprecatedStyleBuilder::DeprecatedStyleBuilder):

LayoutTests:

The spec defines the mix-blend-mode property. This means that the
prefixed version should be -webkit-mix-blend-mode, instead of
-webkit-blend-mode. Update all tests accordingly.

* css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html:
* css3/compositing/blend-mode-layers.html:
* css3/compositing/blend-mode-overflow.html:
* css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html:
* css3/compositing/blend-mode-property-expected.txt:
* css3/compositing/blend-mode-property-parsing-expected.txt:
* css3/compositing/blend-mode-property-parsing-invalid-expected.txt:
* css3/compositing/blend-mode-reflection.html:
* css3/compositing/blend-mode-simple-composited.html:
* css3/compositing/blend-mode-simple.html:
* css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html:
* css3/compositing/resources/red-circle.svg:
* css3/compositing/script-tests/blend-mode-property-parsing-invalid.js:
(testInvalidFilterRule):
* css3/compositing/script-tests/blend-mode-property-parsing.js:
(testBlendModeRule):
* css3/compositing/script-tests/blend-mode-property.js:
(testblendmode):
* css3/compositing/svg-blend-color-burn.html:
* css3/compositing/svg-blend-color-dodge.html:
* css3/compositing/svg-blend-color.html:
* css3/compositing/svg-blend-darken.html:
* css3/compositing/svg-blend-difference.html:
* css3/compositing/svg-blend-exclusion.html:
* css3/compositing/svg-blend-hard-light.html:
* css3/compositing/svg-blend-hue.html:
* css3/compositing/svg-blend-layer-blend.html:
* css3/compositing/svg-blend-layer-clip-path.html:
* css3/compositing/svg-blend-layer-filter.html:
* css3/compositing/svg-blend-layer-mask.html:
* css3/compositing/svg-blend-layer-opacity.html:
* css3/compositing/svg-blend-layer-shadow.html:
* css3/compositing/svg-blend-lighten.html:
* css3/compositing/svg-blend-luminosity.html:
* css3/compositing/svg-blend-multiply-alpha.html:
* css3/compositing/svg-blend-multiply.html:
* css3/compositing/svg-blend-normal.html:
* css3/compositing/svg-blend-overlay.html:
* css3/compositing/svg-blend-saturation.html:
* css3/compositing/svg-blend-screen.html:
* css3/compositing/svg-blend-soft-light.html:
* transitions/blendmode-transitions-expected.txt:
* transitions/blendmode-transitions.html:

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

46 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html
LayoutTests/css3/compositing/blend-mode-layers.html
LayoutTests/css3/compositing/blend-mode-overflow.html
LayoutTests/css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html
LayoutTests/css3/compositing/blend-mode-property-expected.txt
LayoutTests/css3/compositing/blend-mode-property-parsing-expected.txt
LayoutTests/css3/compositing/blend-mode-property-parsing-invalid-expected.txt
LayoutTests/css3/compositing/blend-mode-reflection.html
LayoutTests/css3/compositing/blend-mode-simple-composited.html
LayoutTests/css3/compositing/blend-mode-simple.html
LayoutTests/css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html
LayoutTests/css3/compositing/resources/red-circle.svg
LayoutTests/css3/compositing/script-tests/blend-mode-property-parsing-invalid.js
LayoutTests/css3/compositing/script-tests/blend-mode-property-parsing.js
LayoutTests/css3/compositing/script-tests/blend-mode-property.js
LayoutTests/css3/compositing/svg-blend-color-burn.html
LayoutTests/css3/compositing/svg-blend-color-dodge.html
LayoutTests/css3/compositing/svg-blend-color.html
LayoutTests/css3/compositing/svg-blend-darken.html
LayoutTests/css3/compositing/svg-blend-difference.html
LayoutTests/css3/compositing/svg-blend-exclusion.html
LayoutTests/css3/compositing/svg-blend-hard-light.html
LayoutTests/css3/compositing/svg-blend-hue.html
LayoutTests/css3/compositing/svg-blend-layer-blend.html
LayoutTests/css3/compositing/svg-blend-layer-clip-path.html
LayoutTests/css3/compositing/svg-blend-layer-filter.html
LayoutTests/css3/compositing/svg-blend-layer-mask.html
LayoutTests/css3/compositing/svg-blend-layer-opacity.html
LayoutTests/css3/compositing/svg-blend-layer-shadow.html
LayoutTests/css3/compositing/svg-blend-lighten.html
LayoutTests/css3/compositing/svg-blend-luminosity.html
LayoutTests/css3/compositing/svg-blend-multiply-alpha.html
LayoutTests/css3/compositing/svg-blend-multiply.html
LayoutTests/css3/compositing/svg-blend-normal.html
LayoutTests/css3/compositing/svg-blend-overlay.html
LayoutTests/css3/compositing/svg-blend-saturation.html
LayoutTests/css3/compositing/svg-blend-screen.html
LayoutTests/css3/compositing/svg-blend-soft-light.html
LayoutTests/transitions/blendmode-transitions-expected.txt
LayoutTests/transitions/blendmode-transitions.html
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/css/DeprecatedStyleBuilder.cpp

index c9bd883..01c9776 100644 (file)
@@ -1,3 +1,58 @@
+2014-02-21  Mihai Tica  <mitica@adobe.com>
+
+        [CSS Blending] Refactor -webkit-blend-mode to -webkit-mix-blend-mode
+        https://bugs.webkit.org/show_bug.cgi?id=128805
+
+        Reviewed by Dean Jackson.
+
+        The spec defines the mix-blend-mode property. This means that the
+        prefixed version should be -webkit-mix-blend-mode, instead of
+        -webkit-blend-mode. Update all tests accordingly.
+
+        * css3/compositing/blend-mode-blended-element-overlapping-composited-sibling-should-have-compositing-layer.html:
+        * css3/compositing/blend-mode-layers.html:
+        * css3/compositing/blend-mode-overflow.html:
+        * css3/compositing/blend-mode-parent-of-composited-blended-has-layer.html:
+        * css3/compositing/blend-mode-property-expected.txt:
+        * css3/compositing/blend-mode-property-parsing-expected.txt:
+        * css3/compositing/blend-mode-property-parsing-invalid-expected.txt:
+        * css3/compositing/blend-mode-reflection.html:
+        * css3/compositing/blend-mode-simple-composited.html:
+        * css3/compositing/blend-mode-simple.html:
+        * css3/compositing/blend-mode-with-composited-descendant-should-have-layer.html:
+        * css3/compositing/resources/red-circle.svg:
+        * css3/compositing/script-tests/blend-mode-property-parsing-invalid.js:
+        (testInvalidFilterRule):
+        * css3/compositing/script-tests/blend-mode-property-parsing.js:
+        (testBlendModeRule):
+        * css3/compositing/script-tests/blend-mode-property.js:
+        (testblendmode):
+        * css3/compositing/svg-blend-color-burn.html:
+        * css3/compositing/svg-blend-color-dodge.html:
+        * css3/compositing/svg-blend-color.html:
+        * css3/compositing/svg-blend-darken.html:
+        * css3/compositing/svg-blend-difference.html:
+        * css3/compositing/svg-blend-exclusion.html:
+        * css3/compositing/svg-blend-hard-light.html:
+        * css3/compositing/svg-blend-hue.html:
+        * css3/compositing/svg-blend-layer-blend.html:
+        * css3/compositing/svg-blend-layer-clip-path.html:
+        * css3/compositing/svg-blend-layer-filter.html:
+        * css3/compositing/svg-blend-layer-mask.html:
+        * css3/compositing/svg-blend-layer-opacity.html:
+        * css3/compositing/svg-blend-layer-shadow.html:
+        * css3/compositing/svg-blend-lighten.html:
+        * css3/compositing/svg-blend-luminosity.html:
+        * css3/compositing/svg-blend-multiply-alpha.html:
+        * css3/compositing/svg-blend-multiply.html:
+        * css3/compositing/svg-blend-normal.html:
+        * css3/compositing/svg-blend-overlay.html:
+        * css3/compositing/svg-blend-saturation.html:
+        * css3/compositing/svg-blend-screen.html:
+        * css3/compositing/svg-blend-soft-light.html:
+        * transitions/blendmode-transitions-expected.txt:
+        * transitions/blendmode-transitions.html:
+
 2014-02-20  ChangSeok Oh  <changseok.oh@collabora.com>
 
         Rename EXT_draw_buffers to WEBGL_draw_buffers
index 16f7444..a9fdf35 100755 (executable)
@@ -60,14 +60,14 @@ It uses nested content and then set various attributes to show the interaction o
         <li><div class="div1"><div class="div2"><div class="div3"></div></div></div></li>
 
         <!-- setting the blendmode will create a new stacking context which causes z-index to change -->
-        <li><div class="div1"><div class="div2" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
-        <li><div class="div1"><div class="div2 composited" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
+        <li><div class="div1"><div class="div2" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
+        <li><div class="div1"><div class="div2 composited" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
 
         <!-- just setting slight opacity which causes a stacking context. This also causes z-index to be resolved to the stacking context -->
         <li><div class="div1" style="opacity:.99"><div class="div2"><div class="div3"></div></div></div></li>
 
         <!-- blending will now only happen upto the stacking context generated by opacity. Z-index is resolved against the stacking context of the div with the blendmode -->
-        <li><div class="div1" style="opacity:.99"><div class="div2" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
-        <li><div class="div1" style="opacity:.99"><div class="div2 composited" style="-webkit-blend-mode: multiply"><div class="div3"></div></div></div></li>
+        <li><div class="div1" style="opacity:.99"><div class="div2" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
+        <li><div class="div1" style="opacity:.99"><div class="div2 composited" style="-webkit-mix-blend-mode: multiply"><div class="div3"></div></div></div></li>
     </ul>
 </body>
index 1e69ceb..209f3fc 100755 (executable)
         <!-- normal blending -->
         <div class="example">
             <div class="blendingbg">
-                <img src="resources/ducky.png" style="-webkit-blend-mode: difference;">
+                <img src="resources/ducky.png" style="-webkit-mix-blend-mode: difference;">
             </div>
         </div>
 
         <!-- parent is a stacking context -->
         <div class="example">
             <div class="blendingbg" style="-webkit-transform: translateZ(0)">
-                <img src="resources/ducky.png" style="-webkit-blend-mode: difference;">
+                <img src="resources/ducky.png" style="-webkit-mix-blend-mode: difference;">
             </div>
         </div>
 
@@ -79,7 +79,7 @@
         <div class="example">
             <div class="blendingbg">
                 <div class="intermediate">
-                    <img src="resources/ducky.png" style="-webkit-blend-mode: difference;">
+                    <img src="resources/ducky.png" style="-webkit-mix-blend-mode: difference;">
                 </div>
             </div>
         </div>
@@ -88,7 +88,7 @@
         <div class="example">
             <div class="blendingbg" style="-webkit-transform: translateZ(0)">
                 <div class="intermediate">
-                    <img src="resources/ducky.png" style="-webkit-blend-mode: difference;">
+                    <img src="resources/ducky.png" style="-webkit-mix-blend-mode: difference;">
                 </div>
             </div>
         </div>
@@ -97,7 +97,7 @@
         <div class="example">
             <div class="blendingbg" style="-webkit-transform: translateZ(0)">
                 <div class="intermediate" style="overflow: hidden">
-                    <img src="resources/ducky.png" style="-webkit-blend-mode: difference;">
+                    <img src="resources/ducky.png" style="-webkit-mix-blend-mode: difference;">
                 </div>
             </div>
         </div>
index e94074a..0ef3061 100644 (file)
@@ -7,7 +7,7 @@
         height: 100px;
     }
     .blender {
-        -webkit-blend-mode: difference;
+        -webkit-mix-blend-mode: difference;
         -webkit-transform: translateZ(0);
         margin: 10px;
     }
index e809905..1fd7579 100644 (file)
@@ -1,56 +1,56 @@
-Test the parsing of the -webkit-blend-mode property.
+Test the parsing of the -webkit-mix-blend-mode property.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'normal'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'normal'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'multiply'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'multiply'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'screen'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'screen'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'overlay'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'overlay'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'darken'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'darken'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'lighten'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'lighten'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'color-dodge'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'color-dodge'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'color-burn'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'color-burn'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'hard-light'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'hard-light'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'soft-light'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'soft-light'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'difference'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'difference'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'exclusion'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'exclusion'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'hue'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'hue'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'saturation'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'saturation'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'color'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'color'
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'luminosity'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'luminosity'
 PASS successfullyParsed is true
 
 TEST COMPLETE
index bca4b69..157c707 100644 (file)
@@ -1,4 +1,4 @@
-Test the parsing of the -webkit-blend-mode property.
+Test the parsing of the -webkit-mix-blend-mode 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 : normal
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'normal'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'normal'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -15,7 +15,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : multiply
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'multiply'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'multiply'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -23,7 +23,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : screen
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'screen'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'screen'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -31,7 +31,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : overlay
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'overlay'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'overlay'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -39,7 +39,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : darken
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'darken'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'darken'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -47,7 +47,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : lighten
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'lighten'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'lighten'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -55,7 +55,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : color-dodge
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'color-dodge'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'color-dodge'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -63,7 +63,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : color-burn
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'color-burn'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'color-burn'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -71,7 +71,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : hard-light
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'hard-light'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'hard-light'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -79,7 +79,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : soft-light
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'soft-light'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'soft-light'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -87,7 +87,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : difference
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'difference'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'difference'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -95,7 +95,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : exclusion
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'exclusion'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'exclusion'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -103,7 +103,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : hue
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'hue'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'hue'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -111,7 +111,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : saturation
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'saturation'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'saturation'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -119,7 +119,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : color
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'color'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'color'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
@@ -127,7 +127,7 @@ PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
 Basic reference : luminosity
 PASS cssRule.type is 1
 PASS declaration.length is 1
-PASS declaration.getPropertyValue('-webkit-blend-mode') is 'luminosity'
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is 'luminosity'
 PASS jsWrapperClass(blendModeRule) is 'CSSPrimitiveValue'
 PASS jsWrapperClass(blendModeRule.__proto__) is 'CSSPrimitiveValuePrototype'
 PASS jsWrapperClass(blendModeRule.constructor) is 'CSSPrimitiveValueConstructor'
index 0a1f509..8cdc66b 100644 (file)
@@ -1,4 +1,4 @@
-Test the parsing of the -webkit-blend-mode property.
+Test the parsing of the -webkit-mix-blend-mode property.
 
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
@@ -7,17 +7,17 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 Too many parameters : overlay overlay
 PASS cssRule.type is 1
 PASS declaration.length is 0
-PASS declaration.getPropertyValue('-webkit-blend-mode') is null
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is null
 
 Wrong type : "5px"
 PASS cssRule.type is 1
 PASS declaration.length is 0
-PASS declaration.getPropertyValue('-webkit-blend-mode') is null
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is null
 
 Trailing comma : overlay,
 PASS cssRule.type is 1
 PASS declaration.length is 0
-PASS declaration.getPropertyValue('-webkit-blend-mode') is null
+PASS declaration.getPropertyValue('-webkit-mix-blend-mode') is null
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 715fc99..4b13aa8 100755 (executable)
@@ -30,6 +30,6 @@
 <!-- This file should contain two images of a duck on top of a gradient with reflection.
 Both the duck and the reflection should blend.  -->
 <body>
-    <ul><li><img style="-webkit-blend-mode: multiply" src="resources/ducky.png"></li></ul>
-    <ul><li><img class="composited" style="-webkit-blend-mode: multiply" src="resources/ducky.png"></li></ul>
+    <ul><li><img style="-webkit-mix-blend-mode: multiply" src="resources/ducky.png"></li></ul>
+    <ul><li><img class="composited" style="-webkit-mix-blend-mode: multiply" src="resources/ducky.png"></li></ul>
 </body>
index 93c6c09..d16dd33 100644 (file)
 <body>
     <ul>
         <!-- Separable blend modes -->
-        <li><img style="-webkit-blend-mode: normal" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: overlay" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: screen" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: overlay" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: darken" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: lighten" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: color-dodge" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: color-burn" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: hard-light" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: soft-light" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: difference" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: exclusion" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: normal" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: overlay" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: screen" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: overlay" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: darken" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: lighten" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: color-dodge" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: color-burn" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: hard-light" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: soft-light" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: difference" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: exclusion" src="resources/ducky.png"></li>
         <!-- Non separable blend modes -->
-        <li><img style="-webkit-blend-mode: hue" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: saturation" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: color" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: luminosity" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: hue" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: saturation" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: color" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: luminosity" src="resources/ducky.png"></li>
     </ul>
 </body>
index d46f68b..5047ed6 100755 (executable)
 <body>
     <ul>
         <!-- Separable blend modes -->
-        <li><img style="-webkit-blend-mode: normal" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: overlay" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: screen" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: overlay" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: darken" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: lighten" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: color-dodge" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: color-burn" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: hard-light" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: soft-light" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: difference" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: exclusion" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: normal" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: overlay" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: screen" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: overlay" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: darken" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: lighten" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: color-dodge" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: color-burn" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: hard-light" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: soft-light" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: difference" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: exclusion" src="resources/ducky.png"></li>
         <!-- Non separable blend modes -->
-        <li><img style="-webkit-blend-mode: hue" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: saturation" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: color" src="resources/ducky.png"></li>
-        <li><img style="-webkit-blend-mode: luminosity" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: hue" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: saturation" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: color" src="resources/ducky.png"></li>
+        <li><img style="-webkit-mix-blend-mode: luminosity" src="resources/ducky.png"></li>
     </ul>
 </body>
index 7286fca..17195c1 100644 (file)
@@ -7,7 +7,7 @@
         height: 100px;
     }
     .blender {
-        -webkit-blend-mode: difference;
+        -webkit-mix-blend-mode: difference;
     }
     .child {
         -webkit-transform: translateZ(0);
index 1d752d3..e8669a7 100644 (file)
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red">
   </circle>
-</svg>
\ No newline at end of file
+</svg>
index 3d7d8ca..c601a19 100644 (file)
@@ -1,25 +1,25 @@
-description("Test the parsing of the -webkit-blend-mode property.");
+description("Test the parsing of the -webkit-mix-blend-mode property.");
 
 // These have to be global for the test helpers to see them.
 var stylesheet, cssRule, declaration;
 var styleElement = document.createElement("style");
 document.head.appendChild(styleElement);
 stylesheet = styleElement.sheet;
-stylesheet.insertRule("body { -webkit-blend-mode: multiply; }", 0);
+stylesheet.insertRule("body { -webkit-mix-blend-mode: multiply; }", 0);
 
 function testInvalidFilterRule(description, rule)
 {
     debug("");
     debug(description + " : " + rule);
 
-    stylesheet.insertRule("body { -webkit-blend-mode: " + rule + "; }", 0);
+    stylesheet.insertRule("body { -webkit-mix-blend-mode: " + rule + "; }", 0);
     cssRule = stylesheet.cssRules.item(0);
   
     shouldBe("cssRule.type", "1");
 
     declaration = cssRule.style;
     shouldBe("declaration.length", "0");
-    shouldBe("declaration.getPropertyValue('-webkit-blend-mode')", "null");
+    shouldBe("declaration.getPropertyValue('-webkit-mix-blend-mode')", "null");
 }
 
 testInvalidFilterRule("Too many parameters", "overlay overlay");
index f2d00de..73ae571 100644 (file)
@@ -1,4 +1,4 @@
-description("Test the parsing of the -webkit-blend-mode property.");
+description("Test the parsing of the -webkit-mix-blend-mode property.");
 
 function jsWrapperClass(node)
 {
@@ -30,16 +30,16 @@ function testBlendModeRule(description, rule, expectedLength, expectedValue, exp
     debug("");
     debug(description + " : " + rule);
 
-    stylesheet.insertRule("body { -webkit-blend-mode: " + rule + "; }", 0);
+    stylesheet.insertRule("body { -webkit-mix-blend-mode: " + rule + "; }", 0);
     cssRule = stylesheet.cssRules.item(0);
   
     shouldBe("cssRule.type", "1");
 
     declaration = cssRule.style;
     shouldBe("declaration.length", "1");
-    shouldBe("declaration.getPropertyValue('-webkit-blend-mode')", "'" + expectedValue + "'");
+    shouldBe("declaration.getPropertyValue('-webkit-mix-blend-mode')", "'" + expectedValue + "'");
 
-    blendModeRule = declaration.getPropertyCSSValue('-webkit-blend-mode');
+    blendModeRule = declaration.getPropertyCSSValue('-webkit-mix-blend-mode');
     shouldBeType("blendModeRule", "CSSPrimitiveValue");
 }
 
index 2a756f9..e56360d 100644 (file)
@@ -1,4 +1,4 @@
-description("Test the parsing of the -webkit-blend-mode property.");
+description("Test the parsing of the -webkit-mix-blend-mode property.");
 
 var styleElement = document.createElement("style");
 document.head.appendChild(styleElement);
@@ -9,7 +9,7 @@ var declaration;
 function testblendmode(blendmode)
 {
 // add a -webkit-filter property to the start of the stylesheet
-stylesheet.addRule("body", "-webkit-blend-mode: " + blendmode, 0);
+stylesheet.addRule("body", "-webkit-mix-blend-mode: " + blendmode, 0);
 
 cssRule = stylesheet.cssRules.item(0);
 
@@ -17,7 +17,7 @@ shouldBe("cssRule.type", "1");
 
 declaration = cssRule.style;
 shouldBe("declaration.length", "1");
-shouldBe("declaration.getPropertyValue('-webkit-blend-mode')", "\'" + blendmode + "\'");
+shouldBe("declaration.getPropertyValue('-webkit-mix-blend-mode')", "\'" + blendmode + "\'");
 }
 
 var blendmodes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
index 86b814f..beaff5a 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: color-burn"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: color-burn"></use>
 </g>
 </svg>
 </body>
index 96e286c..04a21b7 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: color-dodge"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: color-dodge"></use>
 </g>
 </svg>
 </body>
index e232911..42933ba 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: color"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: color"></use>
 </g>
 </svg>
 </body>
index 52e85f0..72c7704 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: darken"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: darken"></use>
 </g>
 </svg>
 </body>
index 96d07eb..23bd7f6 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: difference"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: difference"></use>
 </g>
 </svg>
 </body>
index 5b1da2d..e34fb0d 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: exclusion"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: exclusion"></use>
 </g>
 </svg>
 </body>
index 2d0f319..cb54cb1 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: hard-light"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: hard-light"></use>
 </g>
 </svg>
 </body>
index f4bb88c..7271325 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: hue"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: hue"></use>
 </g>
 </svg>
 </body>
index 9b11446..48c9d94 100644 (file)
@@ -5,8 +5,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px" >
 <g transform="scale(4 4)">
   <rect x="0" y="0" width="40" height="40" fill="rgb(0,255,0)"/>
-  <g style="-webkit-blend-mode: multiply">
-    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-blend-mode: difference"/>
+  <g style="-webkit-mix-blend-mode: multiply">
+    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-mix-blend-mode: difference"/>
   </g>
 </g>
 </svg>
index e783816..3febc8e 100644 (file)
@@ -11,7 +11,7 @@
 <g transform="scale(4 4)">
   <rect x="0" y="0" width="40" height="40" fill="rgb(255,255,0)"/>
   <g clip-path="url(#clip)">
-    <rect x="0" y="0" width="40" height="40" fill="rgb(255,0,0)" style="-webkit-blend-mode: difference"/>
+    <rect x="0" y="0" width="40" height="40" fill="rgb(255,0,0)" style="-webkit-mix-blend-mode: difference"/>
   </g>
 </g>
 </svg>
index e463d8a..6546946 100644 (file)
@@ -11,7 +11,7 @@
 <g transform="scale(4 4)">
   <rect x="0" y="0" width="40" height="40" fill="rgb(0,255,0)"/>
   <g filter="url(#f1)">
-    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-blend-mode: difference"/>
+    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-mix-blend-mode: difference"/>
   </g>
 </g>
 </svg>
index 3117b0b..ca1f031 100644 (file)
@@ -11,7 +11,7 @@
 <g transform="scale(4 4)">
   <rect x="0" y="0" width="40" height="40" fill="rgb(0,255,0)"/>
   <g mask="url(#msk)">
-    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-blend-mode: difference"/>
+    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-mix-blend-mode: difference"/>
   </g>
 </g>
 </svg>
index eb05156..2701881 100644 (file)
@@ -6,7 +6,7 @@
 <g transform="scale(4 4)">
   <rect x="0" y="0" width="40" height="40" fill="rgb(0,255,0)"/>
   <g opacity=".5">
-    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-blend-mode: difference"/>
+    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-mix-blend-mode: difference"/>
   </g>
 </g>
 </svg>
index c368ff9..33280df 100644 (file)
@@ -7,7 +7,7 @@
 <g transform="scale(4 4)">
   <rect x="0" y="0" width="40" height="40" fill="rgb(0,255,0)"/>
   <g style="-webkit-svg-shadow:0px 0px 1px rgba(0,0,0,0);">
-    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-blend-mode: difference"/>
+    <rect x="10" y="10" width="20" height="20" fill="rgb(0,255,0)" style="-webkit-mix-blend-mode: difference"/>
   </g>
 </g>
 </svg>
index 3593e57..62d5268 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: lighten"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: lighten"></use>
 </g>
 </svg>
 </body>
index 7f4c910..927d6db 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: luminosity"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: luminosity"></use>
 </g>
 </svg>
 </body>
index b718e50..77340d5 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="opacity: .5; -webkit-blend-mode: multiply"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="opacity: .5; -webkit-mix-blend-mode: multiply"></use>
 </g>
 </svg>
 </body>
index 58b68fb..113b8a4 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: multiply"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: multiply"></use>
 </g>
 </svg>
 </body>
index d93eb35..ecd514b 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: normal"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: normal"></use>
 </g>
 </svg>
 </body>
index ddda489..817b206 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: overlay"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: overlay"></use>
 </g>
 </svg>
 </body>
index 150d0f3..1a151ef 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: saturation"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: saturation"></use>
 </g>
 </svg>
 </body>
index 841315b..472abff 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: screen"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: screen"></use>
 </g>
 </svg>
 </body>
index 3cd48be..e0ee1fa 100644 (file)
@@ -13,7 +13,7 @@
 </defs>
 <g transform="scale(4 4)">
   <use xlink:href="#patch" x="0" y="0" width="40" height="10"></use>
-  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-blend-mode: soft-light"></use>
+  <use xlink:href="#patch" x="0" y="0" width="40" height="10" transform="rotate(90 20 20)" style="-webkit-mix-blend-mode: soft-light"></use>
 </g>
 </svg>
 </body>
index 1ee1e1e..1a52bb9 100644 (file)
@@ -1,4 +1,4 @@
 Test to make sure that the blendmode property is properly propagated to shared styles
 BOX
-PASS - "-webkit-blend-mode" property for "box" element at 0.5s saw something close to: difference
+PASS - "-webkit-mix-blend-mode" property for "box" element at 0.5s saw something close to: difference
 
index 7f7f66d..23074c0 100644 (file)
@@ -14,7 +14,7 @@
       -webkit-transition-timing-function: linear;
       -webkit-transition-property: opacity;
          opacity:1;
-         -webkit-blend-mode: difference;
+         -webkit-mix-blend-mode: difference;
     }
     
     .final {
@@ -26,7 +26,7 @@
 
     const expectedValues = [
       // [time, element-id, property, expected-value, tolerance]
-      [0.5, 'box', '-webkit-blend-mode', 'difference', 0],
+      [0.5, 'box', '-webkit-mix-blend-mode', 'difference', 0],
     ];
   
     function setupTest()
index 2f245b6..5dac1df 100644 (file)
@@ -1,3 +1,24 @@
+2014-02-21  Mihai Tica  <mitica@adobe.com>
+
+        [CSS Blending] Refactor -webkit-blend-mode to -webkit-mix-blend-mode
+        https://bugs.webkit.org/show_bug.cgi?id=128805
+
+        Reviewed by Dean Jackson.
+
+        The spec defines the mix-blend-mode property. This means that the
+        prefixed version should be -webkit-mix-blend-mode, instead of
+        -webkit-blend-mode.
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::ComputedStyleExtractor::propertyValue):
+        * css/CSSParser.cpp:
+        (WebCore::isValidKeywordPropertyAndValue):
+        (WebCore::isKeywordPropertyID):
+        (WebCore::CSSParser::parseValue):
+        * css/CSSPropertyNames.in:
+        * css/DeprecatedStyleBuilder.cpp:
+        (WebCore::DeprecatedStyleBuilder::DeprecatedStyleBuilder):
+
 2014-02-21  Ryosuke Niwa  <rniwa@webkit.org>
 
         Bindings tests rebaseline after r164473.
index 4e87dc2..12331d4 100644 (file)
@@ -227,7 +227,7 @@ static const CSSPropertyID computedProperties[] = {
     CSSPropertyWebkitBackgroundOrigin,
     CSSPropertyWebkitBackgroundSize,
 #if ENABLE(CSS_COMPOSITING)
-    CSSPropertyWebkitBlendMode,
+    CSSPropertyWebkitMixBlendMode,
 #endif
     CSSPropertyWebkitBorderFit,
     CSSPropertyWebkitBorderHorizontalSpacing,
@@ -2840,7 +2840,7 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
             return valueForFilter(style.get(), style->filter());
 #endif
 #if ENABLE(CSS_COMPOSITING)
-        case CSSPropertyWebkitBlendMode:
+        case CSSPropertyWebkitMixBlendMode:
             return cssValuePool().createValue(style->blendMode());
 #endif
         case CSSPropertyBackgroundBlendMode: {
index 66e0e21..0df8f99 100644 (file)
@@ -802,7 +802,7 @@ static inline bool isValidKeywordPropertyAndValue(CSSPropertyID propertyId, int
             return true;
         break;
 #if ENABLE(CSS_COMPOSITING)
-    case CSSPropertyWebkitBlendMode:
+    case CSSPropertyWebkitMixBlendMode:
         if (parserContext.isCSSCompositingEnabled && (valueID == CSSValueNormal || valueID == CSSValueMultiply || valueID == CSSValueScreen
             || valueID == CSSValueOverlay || valueID == CSSValueDarken || valueID == CSSValueLighten ||  valueID == CSSValueColorDodge
             || valueID == CSSValueColorBurn || valueID == CSSValueHardLight || valueID == CSSValueSoftLight || valueID == CSSValueDifference
@@ -1078,7 +1078,7 @@ static inline bool isKeywordPropertyID(CSSPropertyID propertyId)
     case CSSPropertyVisibility:
     case CSSPropertyWebkitAppearance:
 #if ENABLE(CSS_COMPOSITING)
-    case CSSPropertyWebkitBlendMode:
+    case CSSPropertyWebkitMixBlendMode:
 #endif
     case CSSPropertyWebkitBackfaceVisibility:
     case CSSPropertyWebkitBorderAfterStyle:
@@ -2411,7 +2411,7 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
         break;
 #endif
 #if ENABLE(CSS_COMPOSITING)
-    case CSSPropertyWebkitBlendMode:
+    case CSSPropertyWebkitMixBlendMode:
         if (cssCompositingEnabled())
             validPrimitive = true;
         break;
index 3ef0524..f5c199e 100644 (file)
@@ -282,7 +282,7 @@ z-index
 -webkit-box-decoration-break
 #endif
 #if defined(ENABLE_CSS_COMPOSITING) && ENABLE_CSS_COMPOSITING
--webkit-blend-mode
+-webkit-mix-blend-mode
 #endif
 #if defined(ENABLE_CSS_FILTERS) && ENABLE_CSS_FILTERS
 -webkit-filter
index 583a5db..e9a9246 100644 (file)
@@ -2487,7 +2487,7 @@ DeprecatedStyleBuilder::DeprecatedStyleBuilder()
     setPropertyHandler(CSSPropertyWebkitBackgroundOrigin, CSSPropertyBackgroundOrigin);
     setPropertyHandler(CSSPropertyWebkitBackgroundSize, CSSPropertyBackgroundSize);
 #if ENABLE(CSS_COMPOSITING)
-    setPropertyHandler(CSSPropertyWebkitBlendMode, ApplyPropertyDefault<BlendMode, &RenderStyle::blendMode, BlendMode, &RenderStyle::setBlendMode, BlendMode, &RenderStyle::initialBlendMode>::createHandler());
+    setPropertyHandler(CSSPropertyWebkitMixBlendMode, ApplyPropertyDefault<BlendMode, &RenderStyle::blendMode, BlendMode, &RenderStyle::setBlendMode, BlendMode, &RenderStyle::initialBlendMode>::createHandler());
 #endif
     setPropertyHandler(CSSPropertyWebkitBorderFit, ApplyPropertyDefault<EBorderFit, &RenderStyle::borderFit, EBorderFit, &RenderStyle::setBorderFit, EBorderFit, &RenderStyle::initialBorderFit>::createHandler());
     setPropertyHandler(CSSPropertyWebkitBorderHorizontalSpacing, ApplyPropertyComputeLength<short, &RenderStyle::horizontalBorderSpacing, &RenderStyle::setHorizontalBorderSpacing, &RenderStyle::initialHorizontalBorderSpacing>::createHandler());