Bug 1391534 - Fix computed prefixed linear gradient direction serialization r=dholbert
authorNazım Can Altınova <canaltinova@gmail.com>
Wed, 30 Aug 2017 14:39:44 -0700
changeset 378324 3f97c8d93c68d532657666a2c228f87a845d4a07
parent 378323 51cb54b738296e7f21f97861049e2a7314ab53f4
child 378325 4e0649ecbe504a7fcdabcce54f342cd6318e6c04
push id32428
push userarchaeopteryx@coole-files.de
push dateSat, 02 Sep 2017 08:52:28 +0000
treeherdermozilla-central@b01a7e57425b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1391534
milestone57.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 1391534 - Fix computed prefixed linear gradient direction serialization r=dholbert Prefixed linear gradients use direction keyword to indicate starting point of the gradient but modern syntax uses this keyword to indicate ending point of the gradient. Top-to-bottom direction is the default value for gradients. Therefore `top` is default value of prefixed linear gradients and `to bottom` is default one for unprefixed one. For brevity, we omit the direction keyword from our serialization when it matches the default direction, but we were incorrectly trying to remove `bottom` keyword from prefixed computed values. MozReview-Commit-ID: 8UCsFE44LRX
layout/style/nsComputedDOMStyle.cpp
layout/style/test/property_database.js
layout/style/test/test_computed_style.html
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -2141,18 +2141,19 @@ 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 : 1.0f)) {
+    // 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 ");
@@ -2240,17 +2241,19 @@ 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)) {
+      // [-vendor-]radial-gradient or -moz-linear-gradient, with
+      // non-default box position, which we output here.
       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)",
@@ -656,17 +657,17 @@ if (IsCSSPropertyPrefEnabled("layout.css
     "-moz-linear-gradient(top left, red, blue)",
     "-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)",
--- a/layout/style/test/test_computed_style.html
+++ b/layout/style/test/test_computed_style.html
@@ -621,16 +621,21 @@ var noframe_container = document.getElem
       "-webkit-linear-gradient(10deg, rgb(255, 0, 0), rgb(0, 0, 255))",
       "-webkit-linear-gradient with angled legacy-gradient-line" ],
 
     // Linear gradient with box corner (needs prefixed syntax):
     [ "-webkit-linear-gradient(top left, red, blue)",
       "-webkit-linear-gradient(left top, rgb(255, 0, 0), rgb(0, 0, 255))",
       "-webkit-linear-gradient with box corner" ],
 
+    // Linear gradient with default keyword (should be serialized without keyword):
+    [ "-webkit-linear-gradient(top, red, blue)",
+      "-webkit-linear-gradient(rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with legacy default direction keyword" ],
+
     // Radial gradients (should be serialized using modern unprefixed style):
     [ "-webkit-radial-gradient(contain, red, blue)",
       "radial-gradient(closest-side, rgb(255, 0, 0), rgb(0, 0, 255))",
       "-webkit-radial-gradient with legacy 'contain' keyword" ],
   ];
 
   var p = document.createElement("p");
   var cs = getComputedStyle(p, "");