Diff
Modified: trunk/LayoutTests/ChangeLog (155178 => 155179)
--- trunk/LayoutTests/ChangeLog 2013-09-06 06:00:49 UTC (rev 155178)
+++ trunk/LayoutTests/ChangeLog 2013-09-06 07:02:40 UTC (rev 155179)
@@ -1,3 +1,19 @@
+2013-09-06 Dirk Schulze <[email protected]>
+
+ Allow string as image reference on filter()
+ https://bugs.webkit.org/show_bug.cgi?id=120829
+
+ Reviewed by Andreas Kling.
+
+ Check that string can be used as image reference, that we
+ interpolate between the same images once referenced by string
+ and once by url() and that other tokens are not excepted.
+
+ * fast/filter-image/filter-image-animation-expected.txt:
+ * fast/filter-image/filter-image-animation.html:
+ * fast/filter-image/parse-filter-image-expected.txt:
+ * fast/filter-image/parse-filter-image.html:
+
2013-09-05 Dirk Schulze <[email protected]>
Support SVG filters on -webkit-filter() function
Modified: trunk/LayoutTests/fast/filter-image/filter-image-animation-expected.txt (155178 => 155179)
--- trunk/LayoutTests/fast/filter-image/filter-image-animation-expected.txt 2013-09-06 06:00:49 UTC (rev 155178)
+++ trunk/LayoutTests/fast/filter-image/filter-image-animation-expected.txt 2013-09-06 07:02:40 UTC (rev 155179)
@@ -1,9 +1,10 @@
-
+
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 "generated1" element at 1s saw something close to: -webkit-filter(-webkit-filter(url(image.svg), blur(3px)), sepia(0))
Modified: trunk/LayoutTests/fast/filter-image/filter-image-animation.html (155178 => 155179)
--- trunk/LayoutTests/fast/filter-image/filter-image-animation.html 2013-09-06 06:00:49 UTC (rev 155178)
+++ trunk/LayoutTests/fast/filter-image/filter-image-animation.html 2013-09-06 07:02:40 UTC (rev 155179)
@@ -31,6 +31,10 @@
-webkit-animation: no-anim 2s linear;
}
+ #string {
+ -webkit-animation: string-anim 2s linear;
+ }
+
#multiple1 {
-webkit-animation: multiple-anim1 2s linear;
}
@@ -77,6 +81,11 @@
to { background-image: -webkit-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)); }
+ }
+
@-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)); }
@@ -111,6 +120,7 @@
["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],
// FIXME: We need to support generated images as input to other generated images for animations first.
@@ -129,6 +139,7 @@
<div class="box" id="grayscale"></div>
<div class="box" id="sepia"></div>
<div class="box" id="no"></div>
+<div class="box" id="string"></div>
<div class="box" id="multiple1"></div>
<div class="box" id="multiple2"></div>
<div class="box" id="generated1"></div>
Modified: trunk/LayoutTests/fast/filter-image/parse-filter-image-expected.txt (155178 => 155179)
--- trunk/LayoutTests/fast/filter-image/parse-filter-image-expected.txt 2013-09-06 06:00:49 UTC (rev 155178)
+++ trunk/LayoutTests/fast/filter-image/parse-filter-image-expected.txt 2013-09-06 07:02:40 UTC (rev 155179)
@@ -80,6 +80,7 @@
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%))"
@@ -108,6 +109,8 @@
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 null
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 null
+PASS computedStyle("background-image", "-webkit-filter(invalidToken.png, blur(3px))") is "none"
PASS successfullyParsed is true
TEST COMPLETE
Modified: trunk/LayoutTests/fast/filter-image/parse-filter-image.html (155178 => 155179)
--- trunk/LayoutTests/fast/filter-image/parse-filter-image.html 2013-09-06 06:00:49 UTC (rev 155178)
+++ trunk/LayoutTests/fast/filter-image/parse-filter-image.html 2013-09-06 07:02:40 UTC (rev 155179)
@@ -352,6 +352,10 @@
"background-image",
"-webkit-filter(url(http://image1.png), brightness(50%))",
"-webkit-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%))");
// Test different properties, taking CSS Image values.
testInner(
@@ -384,6 +388,7 @@
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))");
</script>
<script src=""
</body>
Modified: trunk/Source/WebCore/ChangeLog (155178 => 155179)
--- trunk/Source/WebCore/ChangeLog 2013-09-06 06:00:49 UTC (rev 155178)
+++ trunk/Source/WebCore/ChangeLog 2013-09-06 07:02:40 UTC (rev 155179)
@@ -1,3 +1,19 @@
+2013-09-06 Dirk Schulze <[email protected]>
+
+ Allow string as image reference on filter()
+ https://bugs.webkit.org/show_bug.cgi?id=120829
+
+ Reviewed by Andreas Kling.
+
+ Beside <image> (which already includes url(), gradients, cross-fade() and
+ image-set()), the filter() image function should support <string> as image
+ reference.
+
+ http://dev.w3.org/fxtf/filters/#FilterCSSImageValue
+
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseFilterImage): Create CSSImageValue from string.
+
2013-09-05 Dirk Schulze <[email protected]>
Support SVG filters on -webkit-filter() function
Modified: trunk/Source/WebCore/css/CSSParser.cpp (155178 => 155179)
--- trunk/Source/WebCore/css/CSSParser.cpp 2013-09-06 06:00:49 UTC (rev 155178)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2013-09-06 07:02:40 UTC (rev 155179)
@@ -8077,7 +8077,7 @@
}
#if ENABLE(CSS_FILTERS)
-bool CSSParser::parseFilterImage(CSSParserValueList* valueList, RefPtr<CSSValue>& crossfade)
+bool CSSParser::parseFilterImage(CSSParserValueList* valueList, RefPtr<CSSValue>& filter)
{
RefPtr<CSSFilterImageValue> result;
@@ -8085,27 +8085,35 @@
CSSParserValueList* args = valueList->current()->function->args.get();
if (!args)
return false;
- CSSParserValue* a = args->current();
+ CSSParserValue* value = args->current();
RefPtr<CSSValue> imageValue;
RefPtr<CSSValue> filterValue;
- // The first argument is the image. It is a fill image.
- if (!a || !parseFillImage(args, imageValue))
+ if (!value)
return false;
- a = args->next();
+ // The first argument is the image. It is a fill image.
+ if (!parseFillImage(args, imageValue)) {
+ if (value->unit == CSSPrimitiveValue::CSS_STRING)
+ imageValue = CSSImageValue::create(completeURL(value->string));
+ else
+ return false;
+ }
+
+ value = args->next();
+
// Skip a comma
- if (!isComma(a))
+ if (!isComma(value))
return false;
- a = args->next();
+ value = args->next();
- if (!a || !parseFilter(args, filterValue))
+ if (!value || !parseFilter(args, filterValue))
return false;
- a = args->next();
+ value = args->next();
result = CSSFilterImageValue::create(imageValue, filterValue);
- crossfade = result;
+ filter = result;
return true;
}
