wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 685400 - add "to" syntax and "magic corner" feature to CSS linear gradient. r=dbaron

Browse Source 
--HG--
rename : layout/reftests/css-gradients/linear-ref.html => layout/reftests/css-gradients/linear-1-ref.html
rename : layout/reftests/css-gradients/linear.html => layout/reftests/css-gradients/linear-1b.html
rename : layout/reftests/css-gradients/linear-diagonal-1-ref.html => layout/reftests/css-gradients/linear-diagonal-1c.html
rename : layout/reftests/css-gradients/linear-diagonal-2-ref.html => layout/reftests/css-gradients/linear-diagonal-2c.html
rename : layout/reftests/css-gradients/linear-diagonal-3-ref.html => layout/reftests/css-gradients/linear-diagonal-3c.html
rename : layout/reftests/css-gradients/linear-diagonal-4-ref.html => layout/reftests/css-gradients/linear-diagonal-4c.html
rename : layout/reftests/css-gradients/linear-keywords-ref.html => layout/reftests/css-gradients/linear-keywords-1-ref.html
rename : layout/reftests/css-gradients/linear-keywords.html => layout/reftests/css-gradients/linear-keywords-1b.html
This commit is contained in:
Masatoshi Kimura 2011-10-22 21:41:11 +02:00
parent 4f0b71d3e8
commit 92268e6353
39 changed files with 300 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
layout/base/nsCSSRendering.cpp
View File

@ -1804,6 +1804,13 @@ ComputeLinearGradientLine(nsPresContext* aPresContext,
gfxPoint center(aBoxSize.width/2, aBoxSize.height/2);
*aLineEnd = ComputeGradientLineEndFromAngle(center, angle, aBoxSize);
*aLineStart = gfxPoint(aBoxSize.width, aBoxSize.height) - *aLineEnd;
} else if (aGradient->mToCorner) {
float xSign = aGradient->mBgPosX.GetPercentValue() * 2 - 1;
float ySign = 1 - aGradient->mBgPosY.GetPercentValue() * 2;
double angle = atan2(ySign * aBoxSize.width, xSign * aBoxSize.height);
gfxPoint center(aBoxSize.width/2, aBoxSize.height/2);
*aLineEnd = ComputeGradientLineEndFromAngle(center, angle, aBoxSize);
*aLineStart = gfxPoint(aBoxSize.width, aBoxSize.height) - *aLineEnd;
} else {
PRInt32 appUnitsPerPixel = aPresContext->AppUnitsPerDevPixel();
*aLineStart = gfxPoint(

0
layout/reftests/css-gradients/linear-ref.html → layout/reftests/css-gradients/linear-1-ref.html
View File

1
layout/reftests/css-gradients/linear-1a.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(to right, red 0%, #7777FF 50%, rgb(100, 200, 0) 100%) no-repeat; width: 300px; height: 300px;"><br></div>

0
layout/reftests/css-gradients/linear.html → layout/reftests/css-gradients/linear-1b.html
View File

2
layout/reftests/css-gradients/linear-diagonal-1-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(top left, white, black) no-repeat; width: 300px; height: 300px;"></div>
<div style="background: -moz-linear-gradient(to bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div>

1
layout/reftests/css-gradients/linear-diagonal-1c.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(top left, white, black) no-repeat; width: 300px; height: 300px;"></div>

2
layout/reftests/css-gradients/linear-diagonal-2-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(top right, white, black) no-repeat; width: 300px; height: 300px;"></div>
<div style="background: -moz-linear-gradient(to bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div>

1
layout/reftests/css-gradients/linear-diagonal-2c.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(top right, white, black) no-repeat; width: 300px; height: 300px;"></div>

2
layout/reftests/css-gradients/linear-diagonal-3-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div>
<div style="background: -moz-linear-gradient(to top left, white, black) no-repeat; width: 300px; height: 300px;"></div>

1
layout/reftests/css-gradients/linear-diagonal-3c.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div>

2
layout/reftests/css-gradients/linear-diagonal-4-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div>
<div style="background: -moz-linear-gradient(to top right, white, black) no-repeat; width: 300px; height: 300px;"></div>

1
layout/reftests/css-gradients/linear-diagonal-4c.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div>

2
layout/reftests/css-gradients/linear-diagonal-5-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(bottom right 135deg, white 75%, black); width: 400px; height: 400px;"></div>
<div style="background: -moz-linear-gradient(to top left, white 75%, black); width: 400px; height: 400px;"></div>

2
layout/reftests/css-gradients/linear-diagonal-6-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(bottom left 45deg, white 75%, black); width: 400px; height: 400px;"></div>
<div style="background: -moz-linear-gradient(to top right, white 75%, black); width: 400px; height: 400px;"></div>

2
layout/reftests/css-gradients/linear-diagonal-7-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(top left -45deg, white 75%, black); width: 400px; height: 400px;"></div>
<div style="background: -moz-linear-gradient(to bottom right, white 75%, black); width: 400px; height: 400px;"></div>

2
layout/reftests/css-gradients/linear-diagonal-8-ref.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(top right -135deg, white 75%, black); width: 400px; height: 400px;"></div>
<div style="background: -moz-linear-gradient(to bottom left, white 75%, black); width: 400px; height: 400px;"></div>

20
layout/reftests/css-gradients/linear-diagonal-9-ref.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<style>
.x { width: 200px; height: 100px; display: inline-block; }
.a { background: -moz-linear-gradient(top -90deg, blue, white, red); }
.e { background: -moz-linear-gradient(top right -2.03444394rad, blue, white, red); }
.g { background: -moz-linear-gradient(right 180deg, blue, white, red); }
.i { background: -moz-linear-gradient(bottom right 2.03444394rad, blue, white, red); }
.k { background: -moz-linear-gradient(bottom 90deg, blue, white, red); }
.m { background: -moz-linear-gradient(bottom left 1.10714872rad, blue, white, red); }
.o { background: -moz-linear-gradient(left 0deg, blue, white, red); }
.q { background: -moz-linear-gradient(top left -1.10714872rad, blue, white, red); }
</style>
<div class="x a"></div>
<div class="x e"></div>
<div class="x g"></div>
<div class="x i"></div>
<div class="x k"></div>
<div class="x m"></div>
<div class="x o"></div>
<div class="x q"></div>

20
layout/reftests/css-gradients/linear-diagonal-9a.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<style>
.x { width: 200px; height: 100px; display: inline-block; }
.a { background: -moz-linear-gradient(to bottom, blue, white, red); }
.e { background: -moz-linear-gradient(to bottom left, blue, white, red); }
.g { background: -moz-linear-gradient(to left, blue, white, red); }
.i { background: -moz-linear-gradient(to top left, blue, white, red); }
.k { background: -moz-linear-gradient(to top, blue, white, red); }
.m { background: -moz-linear-gradient(to top right, blue, white, red); }
.o { background: -moz-linear-gradient(to right, blue, white, red); }
.q { background: -moz-linear-gradient(to bottom right, blue, white, red); }
</style>
<div class="x a"></div>
<div class="x e"></div>
<div class="x g"></div>
<div class="x i"></div>
<div class="x k"></div>
<div class="x m"></div>
<div class="x o"></div>
<div class="x q"></div>

0
layout/reftests/css-gradients/linear-keywords-ref.html → layout/reftests/css-gradients/linear-keywords-1-ref.html
View File

1
layout/reftests/css-gradients/linear-keywords-1a.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(to right bottom, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div>

0
layout/reftests/css-gradients/linear-keywords.html → layout/reftests/css-gradients/linear-keywords-1b.html
View File

2
layout/reftests/css-gradients/linear-onestopposition-1-ref.html
View File

@ -5,7 +5,7 @@
div {
width: 200px;
height: 200px;
background-image: -moz-linear-gradient(left, blue 0%, blue 25%, orange 25%, orange 100%);
background-image: -moz-linear-gradient(to right, blue 0%, blue 25%, orange 25%, orange 100%);
}
</style>

2
layout/reftests/css-gradients/linear-position-1-ref.html
View File

@ -1,2 +1,2 @@
<body style="margin:0;">
<div style="background: -moz-linear-gradient(left, white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div>
<div style="background: -moz-linear-gradient(to right, white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div>

1
layout/reftests/css-gradients/linear-vertical-1e.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(to bottom, white, black) no-repeat; width: 300px; height: 300px;"></div>

2
layout/reftests/css-gradients/nostops.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(left top) no-repeat; width: 300px; height: 300px;"><br></div>
<div style="background: -moz-linear-gradient(to right bottom) no-repeat; width: 300px; height: 300px;"><br></div>

2
layout/reftests/css-gradients/onestop.html
View File

@ -1 +1 @@
<div style="background: -moz-linear-gradient(left top, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>
<div style="background: -moz-linear-gradient(to right bottom, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>

14
layout/reftests/css-gradients/reftest.list
View File

@ -1,19 +1,26 @@
fails-if(Android) == linear.html linear-ref.html
fails-if(Android) == linear-keywords.html linear-keywords-ref.html
fails-if(Android) == linear-1a.html linear-1-ref.html
fails-if(Android) == linear-1b.html linear-1-ref.html
fails-if(Android) == linear-keywords-1a.html linear-keywords-1-ref.html
fails-if(Android) == linear-keywords-1b.html linear-keywords-1-ref.html
fails-if(Android) == linear-percent.html linear-percent-ref.html
fails-if(Android) == linear-mix.html linear-mix-ref.html
== linear-diagonal-1a.html linear-diagonal-1-ref.html
== linear-diagonal-1b.html linear-diagonal-1-ref.html
== linear-diagonal-1c.html linear-diagonal-1-ref.html
== linear-diagonal-2a.html linear-diagonal-2-ref.html
== linear-diagonal-2b.html linear-diagonal-2-ref.html
== linear-diagonal-2c.html linear-diagonal-2-ref.html
== linear-diagonal-3a.html linear-diagonal-3-ref.html
== linear-diagonal-3b.html linear-diagonal-3-ref.html
== linear-diagonal-3c.html linear-diagonal-3-ref.html
== linear-diagonal-4a.html linear-diagonal-4-ref.html
== linear-diagonal-4b.html linear-diagonal-4-ref.html
== linear-diagonal-4c.html linear-diagonal-4-ref.html
== linear-diagonal-5a.html linear-diagonal-5-ref.html
== linear-diagonal-6a.html linear-diagonal-6-ref.html
== linear-diagonal-7a.html linear-diagonal-7-ref.html
== linear-diagonal-8a.html linear-diagonal-8-ref.html
== linear-diagonal-9a.html linear-diagonal-9-ref.html
== linear-position-1a.html linear-position-1-ref.html
== linear-repeat-1a.html linear-repeat-1-ref.html
fails-if(d2d) == linear-repeat-1b.html linear-repeat-1-ref.html # bug 582236
@ -33,6 +40,7 @@ fails-if(Android) == linear-vertical-1a.html linear-vertical-1-ref.html
fails-if(Android) == linear-vertical-1b.html linear-vertical-1-ref.html
fails-if(Android) == linear-vertical-1c.html linear-vertical-1-ref.html
fails-if(Android) == linear-vertical-1d.html linear-vertical-1-ref.html
fails-if(Android) == linear-vertical-1e.html linear-vertical-1-ref.html
== linear-viewport.html linear-viewport-ref.html
== linear-zero-length-1a.html linear-zero-length-1-ref.html
== linear-zero-length-1b.html linear-zero-length-1-ref.html
@ -65,6 +73,8 @@ fails-if(d2d) == repeating-linear-1b.html repeating-linear-1-ref.html
fails-if(cocoaWidget) == twostops-1c.html twostops-1-ref.html # bug 524173
== twostops-1d.html twostops-1-ref.html
== twostops-1e.html twostops-1-ref.html
== twostops-1f.html twostops-1-ref.html
== twostops-1g.html twostops-1-ref.html
# from http://www.xanthir.com/:4bhipd by way of http://a-ja.net/newgrad.html
fails-if(Android) == aja-linear-1a.html aja-linear-1-ref.html

2
layout/reftests/css-gradients/repeating-linear-onestopposition-1.html
View File

@ -5,7 +5,7 @@
div {
width: 200px;
height: 200px;
background-image: -moz-repeating-linear-gradient(left, blue 25%, orange 25%);
background-image: -moz-repeating-linear-gradient(to right, blue 25%, orange 25%);
}
</style>

1
layout/reftests/css-gradients/twostops-1f.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(to bottom, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div>

1
layout/reftests/css-gradients/twostops-1g.html Normal file
View File

@ -0,0 +1 @@
<div style="background: -moz-linear-gradient(to top, #ff0000 50%, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>

84
layout/style/nsCSSParser.cpp
View File

@ -471,7 +471,8 @@ protected:
bool ParseValueList(nsCSSProperty aPropID); // a single value prop-id
bool ParseBackgroundPosition();
bool ParseBoxPositionValues(nsCSSValuePair& aOut, bool aAcceptsInherit);
bool ParseBoxPositionValues(nsCSSValuePair& aOut, bool aAcceptsInherit,
bool aAllowExplicitCenter = true);
bool ParseBackgroundSize();
bool ParseBackgroundSizeValues(nsCSSValuePair& aOut);
bool ParseBorderColor();
@ -4904,7 +4905,9 @@ CSSParserImpl::ParseColorStop(nsCSSValueGradient* aGradient)
// : radial-gradient( <gradient-line>? <gradient-shape-size>?
// <color-stops> ')'
//
// <gradient-line> : [<bg-position> || <angle>] ,
// <gradient-line> : [ to [left | right] || [top | bottom] ] ,
// | <legacy-gradient-line>
// <legacy-gradient-line> : [ <bg-position> || <angle>] ,
//
// <gradient-shape-size> : [<gradient-shape> || <gradient-size>] ,
// <gradient-shape> : circle | ellipse
@ -4933,8 +4936,19 @@ CSSParserImpl::ParseGradient(nsCSSValue& aValue, bool aIsRadial,
if (!GetToken(true)) {
return false;
}
bool toCorner = false;
if (mToken.mType == eCSSToken_Ident &&
mToken.mIdent.LowerCaseEqualsLiteral("to")) {
toCorner = true;
if (!GetToken(true)) {
return false;
}
}
nsCSSTokenType ty = mToken.mType;
nsString id = mToken.mIdent;
cssGradient->mIsToCorner = toCorner;
UngetToken();
bool haveGradientLine = false;
@ -4975,26 +4989,59 @@ CSSParserImpl::ParseGradient(nsCSSValue& aValue, bool aIsRadial,
}
if (haveGradientLine) {
bool haveAngle =
ParseVariant(cssGradient->mAngle, VARIANT_ANGLE, nsnull);
// if we got an angle, we might now have a comma, ending the gradient-line
if (!haveAngle || !ExpectSymbol(',', true)) {
if (!ParseBoxPositionValues(cssGradient->mBgPos, false)) {
if (toCorner) {
// "to" syntax only allows box position keywords
if (ty != eCSSToken_Ident) {
SkipUntil(')');
return false;
}
if (!ExpectSymbol(',', true) &&
// if we didn't already get an angle, we might have one now,
// otherwise it's an error
(haveAngle ||
!ParseVariant(cssGradient->mAngle, VARIANT_ANGLE, nsnull) ||
// now we better have a comma
!ExpectSymbol(',', true))) {
// "to" syntax doesn't allow explicit "center"
if (!ParseBoxPositionValues(cssGradient->mBgPos, false, false)) {
SkipUntil(')');
return false;
}
const nsCSSValue& xValue = cssGradient->mBgPos.mXValue;
const nsCSSValue& yValue = cssGradient->mBgPos.mYValue;
if (xValue.GetUnit() != eCSSUnit_Enumerated ||
!(xValue.GetIntValue() & (NS_STYLE_BG_POSITION_LEFT |
NS_STYLE_BG_POSITION_CENTER |
NS_STYLE_BG_POSITION_RIGHT)) ||
yValue.GetUnit() != eCSSUnit_Enumerated ||
!(yValue.GetIntValue() & (NS_STYLE_BG_POSITION_TOP |
NS_STYLE_BG_POSITION_CENTER |
NS_STYLE_BG_POSITION_BOTTOM))) {
SkipUntil(')');
return false;
}
if (!ExpectSymbol(',', true)) {
SkipUntil(')');
return false;
}
} else {
bool haveAngle =
ParseVariant(cssGradient->mAngle, VARIANT_ANGLE, nsnull);
// 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
(haveAngle ||
!ParseVariant(cssGradient->mAngle, VARIANT_ANGLE, nsnull) ||
// now we better have a comma
!ExpectSymbol(',', true))) {
SkipUntil(')');
return false;
}
}
}
}
@ -6022,10 +6069,12 @@ CSSParserImpl::ParseBackgroundPosition()
*
* @param aOut The nsCSSValuePair in which to place the result.
* @param aAcceptsInherit If true, 'inherit' and 'initial' are legal values
* @param aAllowExplicitCenter If true, 'center' is a legal value
* @return Whether or not the operation succeeded.
*/
bool CSSParserImpl::ParseBoxPositionValues(nsCSSValuePair &aOut,
bool aAcceptsInherit)
bool aAcceptsInherit,
bool aAllowExplicitCenter)
{
// First try a percentage or a length value
nsCSSValue &xValue = aOut.mXValue,
@ -6096,7 +6145,8 @@ bool CSSParserImpl::ParseBoxPositionValues(nsCSSValuePair &aOut,
// Check for bad input. Bad input consists of no matching keywords,
// or pairs of x keywords or pairs of y keywords.
if ((mask == 0) || (mask == (BG_TOP | BG_BOTTOM)) ||
(mask == (BG_LEFT | BG_RIGHT))) {
(mask == (BG_LEFT | BG_RIGHT)) ||
(!aAllowExplicitCenter && (mask & BG_CENTER))) {
return false;
}

19
layout/style/nsCSSValue.cpp
View File

@ -957,7 +957,23 @@ nsCSSValue::AppendToString(nsCSSProperty aProperty, nsAString& aResult) const
aResult.AppendLiteral("-moz-linear-gradient(");
}
if (gradient->mBgPos.mXValue.GetUnit() != eCSSUnit_None ||
if (gradient->mIsToCorner) {
aResult.AppendLiteral("to");
NS_ABORT_IF_FALSE(gradient->mBgPos.mXValue.GetUnit() == eCSSUnit_Enumerated &&
gradient->mBgPos.mYValue.GetUnit() == eCSSUnit_Enumerated,
"unexpected unit");
if (!(gradient->mBgPos.mXValue.GetIntValue() & NS_STYLE_BG_POSITION_CENTER)) {
aResult.AppendLiteral(" ");
gradient->mBgPos.mXValue.AppendToString(eCSSProperty_background_position,
aResult);
}
if (!(gradient->mBgPos.mYValue.GetIntValue() & NS_STYLE_BG_POSITION_CENTER)) {
aResult.AppendLiteral(" ");
gradient->mBgPos.mYValue.AppendToString(eCSSProperty_background_position,
aResult);
}
aResult.AppendLiteral(", ");
} else if (gradient->mBgPos.mXValue.GetUnit() != eCSSUnit_None ||
gradient->mBgPos.mYValue.GetUnit() != eCSSUnit_None ||
gradient->mAngle.GetUnit() != eCSSUnit_None) {
if (gradient->mBgPos.mXValue.GetUnit() != eCSSUnit_None) {
@ -1439,6 +1455,7 @@ nsCSSValueGradient::nsCSSValueGradient(bool aIsRadial,
bool aIsRepeating)
: mIsRadial(aIsRadial),
mIsRepeating(aIsRepeating),
mIsToCorner(false),
mBgPos(eCSSUnit_None),
mAngle(eCSSUnit_None),
mRadialShape(eCSSUnit_None),

2
layout/style/nsCSSValue.h
View File

@ -1032,6 +1032,7 @@ struct nsCSSValueGradient {
// true if gradient is radial, false if it is linear
bool mIsRadial;
bool mIsRepeating;
bool mIsToCorner;
// line position and angle
nsCSSValuePair mBgPos;
nsCSSValue mAngle;
@ -1046,6 +1047,7 @@ struct nsCSSValueGradient {
{
if (mIsRadial != aOther.mIsRadial ||
mIsRepeating != aOther.mIsRepeating ||
mIsToCorner != aOther.mIsToCorner ||
mBgPos != aOther.mBgPos ||
mAngle != aOther.mAngle ||
mRadialShape != aOther.mRadialShape ||

57
layout/style/nsComputedDOMStyle.cpp
View File

@ -1405,6 +1405,41 @@ AppendCSSGradientLength(const nsStyleCoord& aValue,
aString.Append(tokenString);
}
static void
AppendCSSGradientToBoxPosition(const nsStyleGradient* aGradient,
nsAString& aString,
bool& aNeedSep)
{
float xValue = aGradient->mBgPosX.GetPercentValue();
float yValue = aGradient->mBgPosY.GetPercentValue();
if (yValue == 1.0f && xValue == 0.5f) {
// omit "to bottom"
return;
}
NS_ASSERTION(yValue != 0.5f || xValue != 0.5f, "invalid box position");
aString.AppendLiteral("to");
if (yValue == 0.0f) {
aString.AppendLiteral(" top");
} else if (yValue == 1.0f) {
aString.AppendLiteral(" bottom");
} else if (yValue != 0.5f) { // do not write "center" keyword
NS_NOTREACHED("invalid box position");
}
if (xValue == 0.0f) {
aString.AppendLiteral(" left");
} else if (xValue == 1.0f) {
aString.AppendLiteral(" right");
} else if (xValue != 0.5f) { // do not write "center" keyword
NS_NOTREACHED("invalid box position");
}
aNeedSep = true;
}
void
nsComputedDOMStyle::GetCSSGradientString(const nsStyleGradient* aGradient,
nsAString& aString)
@ -1425,16 +1460,20 @@ nsComputedDOMStyle::GetCSSGradientString(const nsStyleGradient* aGradient,
nsAutoString tokenString;
nsROCSSPrimitiveValue *tmpVal = GetROCSSPrimitiveValue();
if (aGradient->mBgPosX.mUnit != eStyleUnit_None) {
AppendCSSGradientLength(aGradient->mBgPosX, tmpVal, aString);
needSep = true;
}
if (aGradient->mBgPosY.mUnit != eStyleUnit_None) {
if (needSep) {
aString.AppendLiteral(" ");
if (aGradient->mToCorner) {
AppendCSSGradientToBoxPosition(aGradient, aString, needSep);
} else {
if (aGradient->mBgPosX.mUnit != eStyleUnit_None) {
AppendCSSGradientLength(aGradient->mBgPosX, tmpVal, aString);
needSep = true;
}
if (aGradient->mBgPosY.mUnit != eStyleUnit_None) {
if (needSep) {
aString.AppendLiteral(" ");
}
AppendCSSGradientLength(aGradient->mBgPosY, tmpVal, aString);
needSep = true;
}
AppendCSSGradientLength(aGradient->mBgPosY, tmpVal, aString);
needSep = true;
}
if (aGradient->mAngle.mUnit != eStyleUnit_None) {
if (needSep) {

2
layout/style/nsRuleNode.cpp
View File

@ -865,6 +865,8 @@ static void SetGradient(const nsCSSValue& aValue, nsPresContext* aPresContext,
"bad unit for linear size");
aResult.mShape = NS_STYLE_GRADIENT_SHAPE_LINEAR;
aResult.mSize = NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER;
aResult.mToCorner = gradient->mIsToCorner;
}
// bg-position

2
layout/style/nsStyleStruct.cpp
View File

@ -1351,6 +1351,7 @@ nsStyleGradient::operator==(const nsStyleGradient& aOther) const
if (mShape != aOther.mShape ||
mSize != aOther.mSize ||
mRepeating != aOther.mRepeating ||
mToCorner != aOther.mToCorner ||
mBgPosX != aOther.mBgPosX ||
mBgPosY != aOther.mBgPosY ||
mAngle != aOther.mAngle)
@ -1372,6 +1373,7 @@ nsStyleGradient::nsStyleGradient(void)
: mShape(NS_STYLE_GRADIENT_SHAPE_LINEAR)
, mSize(NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER)
, mRepeating(false)
, mToCorner(false)
{
}

1
layout/style/nsStyleStruct.h
View File

@ -158,6 +158,7 @@ public:
PRUint8 mSize; // NS_STYLE_GRADIENT_SIZE_*;
// not used (must be FARTHEST_CORNER) for linear shape
bool mRepeating;
bool mToCorner;
nsStyleCoord mBgPosX; // percent, coord, calc, none
nsStyleCoord mBgPosY; // percent, coord, calc, none

72
layout/style/test/property_database.js
View File

@ -1191,6 +1191,19 @@ var gCSSProperties = {
"-moz-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
"-moz-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
"-moz-linear-gradient(to top, red, blue)",
"-moz-linear-gradient(to bottom, red, blue)",
"-moz-linear-gradient(to left, red, blue)",
"-moz-linear-gradient(to right, red, blue)",
"-moz-linear-gradient(to top left, red, blue)",
"-moz-linear-gradient(to top right, red, blue)",
"-moz-linear-gradient(to bottom left, red, blue)",
"-moz-linear-gradient(to bottom right, red, blue)",
"-moz-linear-gradient(to left top, red, blue)",
"-moz-linear-gradient(to left bottom, red, blue)",
"-moz-linear-gradient(to right top, red, blue)",
"-moz-linear-gradient(to right bottom, red, blue)",
"-moz-linear-gradient(top left, red, blue)",
"-moz-linear-gradient(0 0, red, blue)",
"-moz-linear-gradient(20% bottom, red, blue)",
@ -1269,6 +1282,19 @@ var gCSSProperties = {
"-moz-repeating-linear-gradient(#ffff00, #ef3, rgba(10, 20, 30, 0.4))",
"-moz-repeating-linear-gradient(rgba(10, 20, 30, 0.4), #ffff00, #ef3)",
"-moz-repeating-linear-gradient(to top, red, blue)",
"-moz-repeating-linear-gradient(to bottom, red, blue)",
"-moz-repeating-linear-gradient(to left, red, blue)",
"-moz-repeating-linear-gradient(to right, red, blue)",
"-moz-repeating-linear-gradient(to top left, red, blue)",
"-moz-repeating-linear-gradient(to top right, red, blue)",
"-moz-repeating-linear-gradient(to bottom left, red, blue)",
"-moz-repeating-linear-gradient(to bottom right, red, blue)",
"-moz-repeating-linear-gradient(to left top, red, blue)",
"-moz-repeating-linear-gradient(to left bottom, red, blue)",
"-moz-repeating-linear-gradient(to right top, red, blue)",
"-moz-repeating-linear-gradient(to right bottom, red, blue)",
"-moz-repeating-linear-gradient(top left, red, blue)",
"-moz-repeating-linear-gradient(0 0, red, blue)",
"-moz-repeating-linear-gradient(20% bottom, red, blue)",
@ -1398,6 +1424,28 @@ var gCSSProperties = {
"-moz-radial-gradient(contain contain, red, blue)",
"-moz-radial-gradient(ellipse circle, red, blue)",
"-moz-linear-gradient(to 0 0, red, blue)",
"-moz-linear-gradient(to 20% bottom, red, blue)",
"-moz-linear-gradient(to center 20%, red, blue)",
"-moz-linear-gradient(to left 35px, red, blue)",
"-moz-linear-gradient(to 10% 10em, red, blue)",
"-moz-linear-gradient(to 44px top, red, blue)",
"-moz-linear-gradient(to top left 45deg, red, blue)",
"-moz-linear-gradient(to 20% bottom -300deg, red, blue)",
"-moz-linear-gradient(to center 20% 1.95929rad, red, blue)",
"-moz-linear-gradient(to left 35px 30grad, red, blue)",
"-moz-linear-gradient(to 10% 10em 99999deg, red, blue)",
"-moz-linear-gradient(to 44px top -33deg, red, blue)",
"-moz-linear-gradient(to -33deg, red, blue)",
"-moz-linear-gradient(to 30grad left 35px, red, blue)",
"-moz-linear-gradient(to 10deg 20px, red, blue)",
"-moz-linear-gradient(to .414rad bottom, red, blue)",
"-moz-linear-gradient(to top top, red, blue)",
"-moz-linear-gradient(to bottom bottom, red, blue)",
"-moz-linear-gradient(to left left, red, blue)",
"-moz-linear-gradient(to right right, red, blue)",
"-moz-repeating-linear-gradient(10px 10px, 20px, 30px 30px, 40px, blue 0, red 100%)",
"-moz-repeating-radial-gradient(20px 20px, 10px 10px, from(green), to(#ff00ff))",
"-moz-repeating-radial-gradient(10px 10px, 20%, 40px 40px, 10px, from(green), to(#ff00ff))",
@ -1408,7 +1456,29 @@ var gCSSProperties = {
"-moz-repeating-linear-gradient(left left, top top, blue 0)",
"-moz-repeating-linear-gradient(inherit, 10px 10px, blue 0)",
"-moz-repeating-linear-gradient(left left blue red)",
"-moz-repeating-linear-gradient()" ]
"-moz-repeating-linear-gradient()",
"-moz-repeating-linear-gradient(to 0 0, red, blue)",
"-moz-repeating-linear-gradient(to 20% bottom, red, blue)",
"-moz-repeating-linear-gradient(to center 20%, red, blue)",
"-moz-repeating-linear-gradient(to left 35px, red, blue)",
"-moz-repeating-linear-gradient(to 10% 10em, red, blue)",
"-moz-repeating-linear-gradient(to 44px top, red, blue)",
"-moz-repeating-linear-gradient(to top left 45deg, red, blue)",
"-moz-repeating-linear-gradient(to 20% bottom -300deg, red, blue)",
"-moz-repeating-linear-gradient(to center 20% 1.95929rad, red, blue)",
"-moz-repeating-linear-gradient(to left 35px 30grad, red, blue)",
"-moz-repeating-linear-gradient(to 10% 10em 99999deg, red, blue)",
"-moz-repeating-linear-gradient(to 44px top -33deg, red, blue)",
"-moz-repeating-linear-gradient(to -33deg, red, blue)",
"-moz-repeating-linear-gradient(to 30grad left 35px, red, blue)",
"-moz-repeating-linear-gradient(to 10deg 20px, red, blue)",
"-moz-repeating-linear-gradient(to .414rad bottom, red, blue)",
"-moz-repeating-linear-gradient(to top top, red, blue)",
"-moz-repeating-linear-gradient(to bottom bottom, red, blue)",
"-moz-repeating-linear-gradient(to left left, red, blue)",
"-moz-repeating-linear-gradient(to right right, red, blue)" ]
},
"background-origin": {
domProp: "backgroundOrigin",

8
layout/style/test/test_unclosed_parentheses.html
View File

@ -54,6 +54,14 @@ var declarations = [
"background-image: -moz-linear-gradient(red, yellow, blue",
"background-image: -moz-linear-gradient(red 1px, yellow 5px, blue 10px",
"background-image: -moz-linear-gradient(red, yellow, rgb(0, 0, 255)",
"background-image: -moz-linear-gradient(to",
"background-image: -moz-linear-gradient(to top",
"background-image: -moz-linear-gradient(to top left",
"background-image: -moz-linear-gradient(to top left,",
"background-image: -moz-repeating-linear-gradient(to top left, red, blue",
"background-image: -moz-linear-gradient(to top left, red, yellow, blue",
"background-image: -moz-linear-gradient(to top left, red 1px, yellow 5px, blue 10px",
"background-image: -moz-linear-gradient(to top left, red, yellow, rgb(0, 0, 255)",
"background-image: -moz-repeating-linear-gradient(top left, red, blue",
"background-image: -moz-linear-gradient(top left, red, yellow, blue",
"background-image: -moz-linear-gradient(top left, red 1px, yellow 5px, blue 10px",