Bug 1357117 part 3: Serialize -webkit-linear-gradient() expressions using the (less-expressive) -webkit-linear-gradient syntax, instead of -moz-linear-gradient. r=heycam

Specifically:
* This patch uses a flag added in a prior patch to let us use the author's
  chosen prefix (-webkit or -moz) when serializing.  (We treat the -moz version
  as a special case, because that makes it more straightforward to unsupport
  -moz if/when we can.)
* This patch makes us share the linear-gradient() side-or-corner serialization
  codepath when serializing points for -webkit-linear-gradient. (The
  alternative is the -moz-linear-gradient codepath, which defaults to
  serializing with percent values 0%/100% for sides & corners -- and raw
  percentages are invalid in -webkit-linear-gradient(), so we can't share that
  codepath.) Notably, we have to skip the "to " token that the
  linear-gradient() codepath would normally print out -- that was a late
  addition to the spec and so it only exists in the unprefixed modern syntax.
  (Instead, -webkit-linear-gradient syntax is implicitly "from" the given
  point).


MozReview-Commit-ID: 9Oqo8nG1XDU

--HG--
extra : rebase_source : b15218d9cd97d3371e89365fc472d0bcd2672861

layout/style/nsCSSValue.cpp

@@ -1761,7 +1761,11 @@ nsCSSValue::AppendToString(nsCSSPropertyID aProperty, nsAString& aResult,
     nsCSSValueGradient* gradient = GetGradientValue();
 
     if (gradient->mIsLegacySyntax) {
-      aResult.AppendLiteral("-moz-");
+      if (gradient->mIsMozLegacySyntax) {
+        aResult.AppendLiteral("-moz-");
+      } else {
+        aResult.AppendLiteral("-webkit-");
+      }
     }
     if (gradient->mIsRepeating) {
       aResult.AppendLiteral("repeating-");
@@ -1813,16 +1817,17 @@ nsCSSValue::AppendToString(nsCSSPropertyID aProperty, nsAString& aResult,
         needSep = true;
       }
     }
-    if (!gradient->mIsRadial && !gradient->mIsLegacySyntax) {
+    if (!gradient->mIsRadial &&
+        !(gradient->mIsLegacySyntax && gradient->mIsMozLegacySyntax)) {
       if (gradient->mBgPos.mXValue.GetUnit() != eCSSUnit_None ||
           gradient->mBgPos.mYValue.GetUnit() != eCSSUnit_None) {
         MOZ_ASSERT(gradient->mAngle.GetUnit() == eCSSUnit_None);
         MOZ_ASSERT(gradient->mBgPos.mXValue.GetUnit() == eCSSUnit_Enumerated &&
                    gradient->mBgPos.mYValue.GetUnit() == eCSSUnit_Enumerated,
                    "unexpected unit");
-        // XXXdholbert Note: this AppendLiteral call will become conditional
-        // in a later patch in this series.
-        aResult.AppendLiteral("to ");
+        if (!gradient->mIsLegacySyntax) {
+          aResult.AppendLiteral("to ");
+        }
         bool didAppendX = false;
         if (!(gradient->mBgPos.mXValue.GetIntValue() & NS_STYLE_IMAGELAYER_POSITION_CENTER)) {
           gradient->mBgPos.mXValue.AppendToString(eCSSProperty_background_position_x,

layout/style/nsComputedDOMStyle.cpp

@@ -2019,6 +2019,13 @@ AppendCSSGradientToBoxPosition(const nsStyleGradient* aGradient,
                                nsAString&             aString,
                                bool&                  aNeedSep)
 {
+  // This function only supports box position keywords. Make sure we're not
+  // calling it with inputs that would have coordinates that aren't
+  // 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();
 
@@ -2028,9 +2035,11 @@ AppendCSSGradientToBoxPosition(const nsStyleGradient* aGradient,
   }
   NS_ASSERTION(yValue != 0.5f || xValue != 0.5f, "invalid box position");
 
-  // XXXdholbert Note: this AppendLiteral call will become conditional in a
-  // later patch in this series.
-  aString.AppendLiteral("to ");
+  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 ");
+  }
 
   if (yValue == 0.0f) {
     aString.AppendLiteral("top");
@@ -2064,7 +2073,11 @@ nsComputedDOMStyle::GetCSSGradientString(const nsStyleGradient* aGradient,
   if (!aGradient->mLegacySyntax) {
     aString.Truncate();
   } else {
-    aString.AssignLiteral("-moz-");
+    if (aGradient->mMozLegacySyntax) {
+      aString.AssignLiteral("-moz-");
+    } else {
+      aString.AssignLiteral("-webkit-");
+    }
   }
   if (aGradient->mRepeating) {
     aString.AppendLiteral("repeating-");
@@ -2107,7 +2120,9 @@ nsComputedDOMStyle::GetCSSGradientString(const nsStyleGradient* aGradient,
   }
   if (aGradient->mBgPosX.GetUnit() != eStyleUnit_None) {
     MOZ_ASSERT(aGradient->mBgPosY.GetUnit() != eStyleUnit_None);
-    if (!isRadial && !aGradient->mLegacySyntax) {
+    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 ||

layout/style/test/test_computed_style.html

@@ -530,6 +530,52 @@ var noframe_container = document.getElementById("content");
   p.remove();
 })();
 
+(function test_bug_1357117() {
+  // Test that vendor-prefixed gradient styles round-trip with the same prefix,
+  // or with no prefix.
+  var backgroundImages = [
+    // [ specified style,
+    //   expected computed style,
+    //   descriptionOfTestcase ],
+    // Linear gradient with legacy-gradient-line (needs prefixed syntax):
+    [ "-moz-linear-gradient(10deg, red, blue)",
+      "-moz-linear-gradient(10deg, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-moz-linear-gradient with angled legacy-gradient-line" ],
+    [ "-webkit-linear-gradient(10deg, red, blue)",
+      "-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):
+    [ "-moz-linear-gradient(top left, red, blue)",
+      "-moz-linear-gradient(0% 0%, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-moz-linear-gradient with box corner" ],
+    [ "-webkit-linear-gradient(top left, red, blue)",
+      "-webkit-linear-gradient(top left, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-webkit-linear-gradient with box corner" ],
+
+    // Radial gradients (should be serialized using modern unprefixed style):
+    [ "-moz-radial-gradient(contain, red, blue)",
+      "radial-gradient(closest-side, rgb(255, 0, 0), rgb(0, 0, 255))",
+      "-moz-radial-gradient with legacy 'contain' keyword" ],
+    [ "-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, "");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(cs.backgroundImage, test[1],
+       "computed value of prefixed gradient expression (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
 </script>
 </pre>
 </body>

layout/style/test/test_specified_value_serialization.html

@@ -106,6 +106,56 @@
   p.remove();
 })();
 
+(function test_bug_1357117() {
+  // Test that vendor-prefixed gradient styles round-trip with the same prefix,
+  // or with no prefix.
+  var backgroundImages = [
+    // [ specified style,
+    //   expected serialization,
+    //   descriptionOfTestcase ],
+    // Linear gradient with legacy-gradient-line (needs prefixed syntax):
+    [ "-moz-linear-gradient(10deg, red, blue)",
+      "-moz-linear-gradient(10deg, red, blue)",
+      "-moz-linear-gradient with angled legacy-gradient-line" ],
+    [ "-webkit-linear-gradient(10deg, red, blue)",
+      "-webkit-linear-gradient(10deg, red, blue)",
+      "-webkit-linear-gradient with angled legacy-gradient-line" ],
+
+    // Linear gradient with box corner (needs prefixed syntax):
+    [ "-moz-linear-gradient(top left, red, blue)",
+      "-moz-linear-gradient(left top , red, blue)",
+      //                            ^
+      // (NOTE: our -moz-linear-gradient serialization inserts an extra space
+      // before the first comma in some cases. This is ugly but fine,
+      // particularly given bug 1337655).
+      "-moz-linear-gradient with box corner" ],
+    [ "-webkit-linear-gradient(top left, red, blue)",
+      "-webkit-linear-gradient(left top, red, blue)",
+      "-webkit-linear-gradient with box corner" ],
+
+    // Radial gradients (should be serialized using modern unprefixed style):
+    [ "-moz-radial-gradient(contain, red, blue)",
+      "radial-gradient(closest-side, red, blue)",
+      "-moz-radial-gradient with legacy 'contain' keyword" ],
+    [ "-webkit-radial-gradient(contain, red, blue)",
+      "radial-gradient(closest-side, red, blue)",
+      "-webkit-radial-gradient with legacy 'contain' keyword" ],
+  ];
+
+  var frame_container = document.getElementById("display");
+  var p = document.createElement("p");
+  frame_container.appendChild(p);
+
+  for (var i = 0; i < backgroundImages.length; ++i) {
+    var test = backgroundImages[i];
+    p.style.backgroundImage = test[0];
+    is(p.style.backgroundImage, test[1],
+       "serialization value of prefixed gradient expression (" + test[2] + ")");
+  }
+
+  p.remove();
+})();
+
 </script>
 </pre>
 </body>