Bug 1391534 - Fix computed prefixed linear gradient direction serialization r?dholbert draft
authorNazım Can Altınova <canaltinova@gmail.com>
Wed, 30 Aug 2017 14:39:44 -0700
changeset 656239 29df1f80e048a23c875a32064441a56f72b25c09
parent 654592 1b4c59eef820b46eb0037aca68f83a15088db45f
child 729064 f2fd75e0c4a333f6beec75736eba23bd4f3e4411
push id77129
push userbmo:canaltinova@gmail.com
push dateWed, 30 Aug 2017 22:01:59 +0000
reviewersdholbert
bugs1391534
milestone57.0a1
Bug 1391534 - Fix computed prefixed linear gradient direction serialization r?dholbert Default direction of linear gradient functions is `top` but we were trying to remove `bottom` keyword from computed values. That was making the serialized gradient wrong. MozReview-Commit-ID: 8UCsFE44LRX
layout/style/nsComputedDOMStyle.cpp
layout/style/test/property_database.js
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -2142,20 +2142,22 @@ AppendCSSGradientToBoxPosition(const nsS
   // representable with box-position keywords.
   MOZ_ASSERT(aGradient->mShape == NS_STYLE_GRADIENT_SHAPE_LINEAR &&
              !(aGradient->mLegacySyntax && aGradient->mMozLegacySyntax),
              "Only call me for linear-gradient and -webkit-linear-gradient");
 
   float xValue = aGradient->mBgPosX.GetPercentValue();
   float yValue = aGradient->mBgPosY.GetPercentValue();
 
-  if (yValue == 1.0f && xValue == 0.5f) {
-    // omit "to bottom"
+  if (xValue == 0.5f &&
+      yValue == (aGradient->mLegacySyntax ? 0.0f : 0.1f)) {
+    // omit "to bottom" in modern syntax, "top" in legacy syntax
     return;
   }
+
   NS_ASSERTION(yValue != 0.5f || xValue != 0.5f, "invalid box position");
 
   if (!aGradient->mLegacySyntax) {
     // Modern syntax explicitly includes the word "to". Old syntax does not
     // (and is implicitly "from" the given position instead).
     aString.AppendLiteral("to ");
   }
 
@@ -2241,17 +2243,17 @@ nsComputedDOMStyle::GetCSSGradientString
     MOZ_ASSERT(aGradient->mBgPosY.GetUnit() != eStyleUnit_None);
     if (!isRadial &&
         !(aGradient->mLegacySyntax && aGradient->mMozLegacySyntax)) {
       // linear-gradient() or -webkit-linear-gradient()
       AppendCSSGradientToBoxPosition(aGradient, aString, needSep);
     } else if (aGradient->mBgPosX.GetUnit() != eStyleUnit_Percent ||
                aGradient->mBgPosX.GetPercentValue() != 0.5f ||
                aGradient->mBgPosY.GetUnit() != eStyleUnit_Percent ||
-               aGradient->mBgPosY.GetPercentValue() != (isRadial ? 0.5f : 1.0f)) {
+               aGradient->mBgPosY.GetPercentValue() != (isRadial ? 0.5f : 0.0f)) {
       if (isRadial && !aGradient->mLegacySyntax) {
         if (needSep) {
           aString.Append(' ');
         }
         aString.AppendLiteral("at ");
         needSep = false;
       }
       AppendCSSGradientLength(aGradient->mBgPosX, tmpVal, aString);
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -434,16 +434,17 @@ if (IsCSSPropertyPrefEnabled("layout.css
     // 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-linear-gradient(left, red, blue)",
+    "-webkit-linear-gradient(bottom, red, blue)",
     "-webkit-linear-gradient(right top, red, blue)",
     "-webkit-linear-gradient(top right, red, blue)",
     "-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)",
@@ -657,16 +658,17 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-moz-linear-gradient(0 0, red, blue)",
     "-moz-linear-gradient(20% bottom, red, blue)",
     "-moz-linear-gradient(center 20%, red, blue)",
     "-moz-linear-gradient(left 35px, red, blue)",
     "-moz-linear-gradient(10% 10em, red, blue)",
     "-moz-linear-gradient(44px top, red, blue)",
     "-moz-linear-gradient(left, red, blue)",
     "-moz-linear-gradient(top, red, blue)",
+    "-moz-linear-gradient(bottom, red, blue)",
 
     "-moz-linear-gradient(0px, red, blue)",
     "-moz-linear-gradient(0, red, blue)",
     "-moz-linear-gradient(top left 45deg, red, blue)",
     "-moz-linear-gradient(20% bottom -300deg, red, blue)",
     "-moz-linear-gradient(center 20% 1.95929rad, red, blue)",
     "-moz-linear-gradient(left 35px 30grad, red, blue)",
     "-moz-linear-gradient(left 35px 0.1turn, red, blue)",