Bug 1210575 part 6: Implement -webkit-radial-gradient parse quirks with contain/cover keywords, sized shapes, "at" keyword, & angles. r=heycam
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 20 Oct 2015 23:35:55 -0700
changeset 303901 d25420b73478c80a412055078a4cd5f7bce189f9
parent 303900 806ccfb8d1dd266e6076aee544dabe10235e171a
child 303902 5d8d4372acbf99ec004ceac839b37ddab221cc8b
push id1001
push userraliiev@mozilla.com
push dateMon, 18 Jan 2016 19:06:03 +0000
treeherdermozilla-release@8b89261f3ac4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1210575
milestone44.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1210575 part 6: Implement -webkit-radial-gradient parse quirks with contain/cover keywords, sized shapes, "at" keyword, & angles. r=heycam
layout/style/nsCSSParser.cpp
layout/style/test/property_database.js
--- a/layout/style/nsCSSParser.cpp
+++ b/layout/style/nsCSSParser.cpp
@@ -1184,16 +1184,19 @@ protected:
   bool ParseImageRect(nsCSSValue& aImage);
   bool ParseElement(nsCSSValue& aValue);
   bool ParseColorStop(nsCSSValueGradient* aGradient);
 
   enum GradientParsingFlags {
     eGradient_Repeating    = 1 << 0, // repeating-{linear|radial}-gradient
     eGradient_MozLegacy    = 1 << 1, // -moz-{linear|radial}-gradient
     eGradient_WebkitLegacy = 1 << 2, // -webkit-{linear|radial}-gradient
+
+    // Mask to catch both "legacy" flags:
+    eGradient_AnyLegacy = eGradient_MozLegacy | eGradient_WebkitLegacy
   };
   bool ParseLinearGradient(nsCSSValue& aValue, uint8_t aFlags);
   bool ParseRadialGradient(nsCSSValue& aValue, uint8_t aFlags);
   bool IsLegacyGradientLine(const nsCSSTokenType& aType,
                             const nsString& aId);
   bool ParseGradientColorStops(nsCSSValueGradient* aGradient,
                                nsCSSValue& aValue);
 
@@ -9488,27 +9491,27 @@ CSSParserImpl::ParseRadialGradient(nsCSS
 
   // [ <shape> || <size> ]
   bool haveShape =
     ParseSingleTokenVariant(cssGradient->GetRadialShape(), VARIANT_KEYWORD,
                             nsCSSProps::kRadialGradientShapeKTable);
 
   bool haveSize =
     ParseSingleTokenVariant(cssGradient->GetRadialSize(), VARIANT_KEYWORD,
-                            (aFlags & eGradient_MozLegacy) ?
+                            (aFlags & eGradient_AnyLegacy) ?
                             nsCSSProps::kRadialGradientLegacySizeKTable :
                             nsCSSProps::kRadialGradientSizeKTable);
   if (haveSize) {
     if (!haveShape) {
       // <size> <shape>
       haveShape =
         ParseSingleTokenVariant(cssGradient->GetRadialShape(), VARIANT_KEYWORD,
                                 nsCSSProps::kRadialGradientShapeKTable);
     }
-  } else if (!(aFlags & eGradient_MozLegacy)) {
+  } else if (!(aFlags & eGradient_AnyLegacy)) {
     // Save RadialShape before parsing RadiusX because RadialShape and
     // RadiusX share the storage.
     int32_t shape =
       cssGradient->GetRadialShape().GetUnit() == eCSSUnit_Enumerated ?
       cssGradient->GetRadialShape().GetIntValue() : -1;
     // <length> | [<length> | <percentage>]{2}
     cssGradient->mIsExplicitSize = true;
     haveSize =
@@ -9552,17 +9555,17 @@ CSSParserImpl::ParseRadialGradient(nsCSS
     // [ <shape> || <size> ] ,
     return ParseGradientColorStops(cssGradient, aValue);
   }
 
   if (!GetToken(true)) {
     return false;
   }
 
-  if (!(aFlags & eGradient_MozLegacy)) {
+  if (!(aFlags & eGradient_AnyLegacy)) {
     if (mToken.mType == eCSSToken_Ident &&
         mToken.mIdent.LowerCaseEqualsLiteral("at")) {
       // [ <shape> || <size> ]? at <position> ,
       if (!ParseBoxPositionValues(cssGradient->mBgPos, false) ||
           !ExpectSymbol(',', true)) {
         SkipUntil(')');
         return false;
       }
@@ -9583,30 +9586,33 @@ CSSParserImpl::ParseRadialGradient(nsCSS
   // <legacy-gradient-line>
   bool haveGradientLine = false;
   // if we already encountered a shape or size,
   // we can not have a gradient-line in legacy syntax
   if (!haveShape && !haveSize) {
       haveGradientLine = IsLegacyGradientLine(ty, id);
   }
   if (haveGradientLine) {
-    bool haveAngle =
-      ParseSingleTokenVariant(cssGradient->mAngle, VARIANT_ANGLE, nullptr);
-
-    // if we got an angle, we might now have a comma, ending the gradient-line
+    // Note: -webkit-radial-gradient() doesn't accept angles.
+    bool haveAngle = (aFlags & eGradient_WebkitLegacy)
+      ? false
+      : ParseSingleTokenVariant(cssGradient->mAngle, VARIANT_ANGLE, nullptr);
+
+    // If we got an angle, we might now have a comma, ending the gradient-line
     if (!haveAngle || !ExpectSymbol(',', true)) {
       if (!ParseBoxPositionValues(cssGradient->mBgPos, false)) {
         SkipUntil(')');
         return false;
       }
 
       if (!ExpectSymbol(',', true) &&
-          // if we didn't already get an angle, we might have one now,
-          // otherwise it's an error
+          // If we didn't already get an angle, and we're not -webkit prefixed,
+          // can parse an angle+comma now.  Otherwise it's an error.
           (haveAngle ||
+           (aFlags & eGradient_WebkitLegacy) ||
            !ParseSingleTokenVariant(cssGradient->mAngle, VARIANT_ANGLE,
                                     nullptr) ||
            // now we better have a comma
            !ExpectSymbol(',', true))) {
         SkipUntil(')');
         return false;
       }
     }
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -255,16 +255,19 @@ var validGradientAndElementValues = [
   "-moz-radial-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
 
   "-moz-radial-gradient(-33deg, red, blue)",
   "-moz-radial-gradient(30grad left 35px, red, blue)",
   "-moz-radial-gradient(10deg 20px, red, blue)",
   "-moz-radial-gradient(.414rad bottom, red, blue)",
 
   "-moz-radial-gradient(cover, red, blue)",
+  "-moz-radial-gradient(cover circle, red, blue)",
+  "-moz-radial-gradient(contain, red, blue)",
+  "-moz-radial-gradient(contain ellipse, red, blue)",
   "-moz-radial-gradient(circle, red, blue)",
   "-moz-radial-gradient(ellipse closest-corner, red, blue)",
   "-moz-radial-gradient(farthest-side circle, red, blue)",
 
   "-moz-radial-gradient(top left, cover, red, blue)",
   "-moz-radial-gradient(15% 20%, circle, red, blue)",
   "-moz-radial-gradient(45px, ellipse closest-corner, red, blue)",
   "-moz-radial-gradient(45px, farthest-side circle, red, blue)",
@@ -632,37 +635,82 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-webkit-linear-gradient(280deg, red 60%, blue)",
 
     // Basic radial-gradient syntax (valid when prefixed or unprefixed):
     "-webkit-radial-gradient(circle, white, black)",
     "-webkit-radial-gradient(circle, white, black)",
     "-webkit-radial-gradient(ellipse closest-side, white, black)",
     "-webkit-radial-gradient(circle farthest-corner, white, black)",
 
+    // Contain/cover keywords (valid only for -moz/-webkit prefixed):
+    "-webkit-radial-gradient(cover, red, blue)",
+    "-webkit-radial-gradient(cover circle, red, blue)",
+    "-webkit-radial-gradient(contain, red, blue)",
+    "-webkit-radial-gradient(contain ellipse, red, blue)",
+
+    // Initial side/corner/point (valid only for -moz/-webkit prefixed):
+    "-webkit-radial-gradient(right, red, blue)",
+    "-webkit-radial-gradient(left bottom, red, blue)",
+    "-webkit-radial-gradient(bottom left, red, blue)",
+    "-webkit-radial-gradient(center, red, blue)",
+    "-webkit-radial-gradient(center right, red, blue)",
+    "-webkit-radial-gradient(center center, red, blue)",
+    "-webkit-radial-gradient(center top, red, blue)",
+    "-webkit-radial-gradient(left 50%, red, blue)",
+    "-webkit-radial-gradient(20px top, red, blue)",
+    "-webkit-radial-gradient(20em 30%, red, blue)",
+
+    // Point + keyword-sized shape (valid only for -moz/-webkit prefixed):
+    "-webkit-radial-gradient(center, circle closest-corner, red, blue)",
+    "-webkit-radial-gradient(10px 20px, cover circle, red, blue)",
+    "-webkit-radial-gradient(5em 50%, ellipse contain, red, blue)",
+
     // Repeating examples:
     "-webkit-repeating-linear-gradient(red 10%, blue 30%)",
     "-webkit-repeating-linear-gradient(30deg, pink 20px, orange 70px)",
     "-webkit-repeating-radial-gradient(circle, red, blue 10%, red 20%)",
-    "-webkit-repeating-radial-gradient(circle farthest-corner, gray 10px, yellow 20px)"
+    "-webkit-repeating-radial-gradient(circle farthest-corner, gray 10px, yellow 20px)",
+    "-webkit-repeating-radial-gradient(top left, circle, red, blue 4%, red 8%)"
   );
 
   invalidGradientAndElementValues.push(
     // Syntax that's invalid for all types of gradients:
     // * empty gradient expressions:
     "-webkit-linear-gradient()",
     "-webkit-radial-gradient()",
     "-webkit-repeating-linear-gradient()",
     "-webkit-repeating-radial-gradient()",
 
     // Syntax that's invalid for both -webkit & -moz, but valid for unprefixed:
     // XXXdholbert (populated in a later patch)
 
-    // Syntax that's invalid for both -webkit & unprefixed, but valid for -moz:
+    // Linear syntax that's invalid for both -webkit & unprefixed, but valid
+    // for -moz:
     // * initial length
-    "-webkit-linear-gradient(10px, red, blue)"
+    "-webkit-linear-gradient(10px, red, blue)",
+
+    // * <shape> followed by angle:
+    "-webkit-radial-gradient(circle 10deg, red, blue)",
+
+    // Radial syntax that's invalid for both -webkit & -moz, but valid for
+    // unprefixed:
+    // * "<shape> at <position>" syntax:
+    "-webkit-radial-gradient(circle at left bottom, red, blue)",
+    // * explicitly-sized shape:
+    "-webkit-radial-gradient(circle 10px, red, blue)",
+    "-webkit-radial-gradient(ellipse 40px 20px, red, blue)",
+
+    // Radial syntax that's invalid for both -webkit & unprefixed, but valid
+    // for -moz:
+    // * initial angle
+    "-webkit-radial-gradient(30deg, red, blue)",
+    // * initial angle/position combo
+    "-webkit-radial-gradient(top 30deg, red, blue)",
+    "-webkit-radial-gradient(left top 30deg, red, blue)",
+    "-webkit-radial-gradient(10px 20px 30deg, red, blue)"
 
     // Syntax that's invalid for -webkit, but valid for -moz & unprefixed:
     // XXXdholbert (populated in a later patch)
   );
 }
 
 var gCSSProperties = {
   "animation": {