Support calc() in webkit-gradient and cross-fade
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Apr 2018 20:25:55 +0000 (20:25 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Apr 2018 20:25:55 +0000 (20:25 +0000)
https://bugs.webkit.org/show_bug.cgi?id=182225

Patch by Chris Nardi <cnardi@chromium.org> on 2018-04-19
Reviewed by Simon Fraser.

Source/WebCore:

calc() was previously unsupported in webkit-gradient and webkit-cross-fade, but both should take calc() values.
Update the code to support calc() values.

Tests: LayoutTests/css3/calc/cross-fade-calc.html
       LayoutTests/css3/calc/webkit-gradient-calc.html

* css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::CSSPropertyParserHelpers::consumeDeprecatedGradientColorStop):
(WebCore::CSSPropertyParserHelpers::consumeCrossFade):

LayoutTests:

Add new test cases.

* css3/calc/cross-fade-calc.html: Added.
* css3/calc/cross-fade-calc-expected.txt: Added.
* css3/calc/webkit-gradient-calc.html: Added.
* css3/calc/webkit-gradient-calc-expected.txt: Added.

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

LayoutTests/ChangeLog
LayoutTests/css3/calc/cross-fade-calc-expected.txt [new file with mode: 0644]
LayoutTests/css3/calc/cross-fade-calc.html [new file with mode: 0644]
LayoutTests/css3/calc/webkit-gradient-calc-expected.txt [new file with mode: 0644]
LayoutTests/css3/calc/webkit-gradient-calc.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp

index f168d1b..1beeafb 100644 (file)
@@ -1,3 +1,17 @@
+2018-04-19  Chris Nardi  <cnardi@chromium.org>
+
+        Support calc() in webkit-gradient and cross-fade
+        https://bugs.webkit.org/show_bug.cgi?id=182225
+
+        Reviewed by Simon Fraser.
+
+        Add new test cases.
+
+        * css3/calc/cross-fade-calc.html: Added.
+        * css3/calc/cross-fade-calc-expected.txt: Added.
+        * css3/calc/webkit-gradient-calc.html: Added.
+        * css3/calc/webkit-gradient-calc-expected.txt: Added.
+
 2018-04-19  Youenn Fablet  <youenn@apple.com>
 
         NetworkProcess should use CSP/content blockers for sync XHR
diff --git a/LayoutTests/css3/calc/cross-fade-calc-expected.txt b/LayoutTests/css3/calc/cross-fade-calc-expected.txt
new file mode 100644 (file)
index 0000000..f037add
--- /dev/null
@@ -0,0 +1,3 @@
+
+PASS calc() in cross-fade 
+
diff --git a/LayoutTests/css3/calc/cross-fade-calc.html b/LayoutTests/css3/calc/cross-fade-calc.html
new file mode 100644 (file)
index 0000000..5235092
--- /dev/null
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: calc() function in cross-fade</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+    #test {
+        background-image: cross-fade(url(dummy://example.png), url(dummy://example.png), calc(35% * 2));
+    }
+</style>
+<div id="test"></div>
+<script>
+    const div = document.querySelector("#test");
+    const expected = "cross-fade(url(dummy://example.png), url(dummy://example.png), 0.7)"
+    test(function() {
+        assert_equals(getComputedStyle(div).backgroundImage, expected);
+    }, "calc() in cross-fade");
+</script>
\ No newline at end of file
diff --git a/LayoutTests/css3/calc/webkit-gradient-calc-expected.txt b/LayoutTests/css3/calc/webkit-gradient-calc-expected.txt
new file mode 100644 (file)
index 0000000..e46d504
--- /dev/null
@@ -0,0 +1,3 @@
+
+PASS calc() in webkit-gradient 
+
diff --git a/LayoutTests/css3/calc/webkit-gradient-calc.html b/LayoutTests/css3/calc/webkit-gradient-calc.html
new file mode 100644 (file)
index 0000000..5a89937
--- /dev/null
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: calc() function in webkit-gradient</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+    #test {
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(calc(40% + 10%), #fff));
+    }
+</style>
+<div id="test"></div>
+<script>
+    const div = document.querySelector("#test");
+    const expected = '-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(0, 171, 235)), to(rgb(255, 255, 255)), color-stop(0.5, rgb(255, 255, 255)))'
+    test(function() {
+        assert_equals(getComputedStyle(div).backgroundImage, expected);
+    }, "calc() in webkit-gradient");
+</script>
\ No newline at end of file
index 27387c5..b7151ef 100644 (file)
@@ -1,3 +1,20 @@
+2018-04-19  Chris Nardi  <cnardi@chromium.org>
+
+        Support calc() in webkit-gradient and cross-fade
+        https://bugs.webkit.org/show_bug.cgi?id=182225
+
+        Reviewed by Simon Fraser.
+
+        calc() was previously unsupported in webkit-gradient and webkit-cross-fade, but both should take calc() values.
+        Update the code to support calc() values.
+
+        Tests: LayoutTests/css3/calc/cross-fade-calc.html
+               LayoutTests/css3/calc/webkit-gradient-calc.html
+
+        * css/parser/CSSPropertyParserHelpers.cpp:
+        (WebCore::CSSPropertyParserHelpers::consumeDeprecatedGradientColorStop):
+        (WebCore::CSSPropertyParserHelpers::consumeCrossFade):
+
 2018-04-17  Filip Pizlo  <fpizlo@apple.com>
 
         The InternalFunction hierarchy should be in IsoSubspaces
index f0e25c7..9417136 100644 (file)
@@ -866,12 +866,9 @@ static bool consumeDeprecatedGradientColorStop(CSSParserTokenRange& range, CSSGr
         position = (id == CSSValueFrom) ? 0 : 1;
     } else {
         ASSERT(id == CSSValueColorStop);
-        const CSSParserToken& arg = args.consumeIncludingWhitespace();
-        if (arg.type() == PercentageToken)
-            position = arg.numericValue() / 100.0;
-        else if (arg.type() == NumberToken)
-            position = arg.numericValue();
-        else
+        if (auto percentValue = consumePercent(args, ValueRangeAll))
+            position = percentValue->doubleValue() / 100.0;
+        else if (!consumeNumberRaw(args, position))
             return false;
 
         if (!consumeCommaIncludingWhitespace(args))
@@ -1229,11 +1226,10 @@ static RefPtr<CSSValue> consumeCrossFade(CSSParserTokenRange& args, CSSParserCon
         return nullptr;
 
     RefPtr<CSSPrimitiveValue> percentage;
-    const CSSParserToken& percentageArg = args.consumeIncludingWhitespace();
-    if (percentageArg.type() == PercentageToken)
-        percentage = CSSValuePool::singleton().createValue(clampTo<double>(percentageArg.numericValue() / 100, 0, 1), CSSPrimitiveValue::UnitType::CSS_NUMBER);
-    else if (percentageArg.type() == NumberToken)
-        percentage = CSSValuePool::singleton().createValue(clampTo<double>(percentageArg.numericValue(), 0, 1), CSSPrimitiveValue::UnitType::CSS_NUMBER);
+    if (auto percentValue = consumePercent(args, ValueRangeAll))
+        percentage = CSSValuePool::singleton().createValue(clampTo<double>(percentValue->doubleValue() / 100.0, 0, 1), CSSPrimitiveValue::UnitType::CSS_NUMBER);
+    else if (auto numberValue = consumeNumber(args, ValueRangeAll))
+        percentage = CSSValuePool::singleton().createValue(clampTo<double>(numberValue->doubleValue(), 0, 1), CSSPrimitiveValue::UnitType::CSS_NUMBER);
 
     if (!percentage)
         return nullptr;