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
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -2142,18 +2142,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 ");
@@ -2241,17 +2242,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, "");