mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-11 12:25:53 +00:00
Bug 570326 - Add support for background-size in background shorthand property. r=dbaron
This commit is contained in:
Anthony Ricaud
parent
3b2037ac7e
commit
156073c088
@ -432,12 +432,6 @@ Declaration::GetValue(nsCSSProperty aProperty, nsAString& aValue) const
|
||||
data->ValueFor(eCSSProperty_background_size)->
|
||||
GetPairListValue();
|
||||
for (;;) {
|
||||
if (size->mXValue.GetUnit() != eCSSUnit_Auto ||
|
||||
size->mYValue.GetUnit() != eCSSUnit_Auto) {
|
||||
// Non-default background-size, so can't be serialized as shorthand.
|
||||
aValue.Truncate();
|
||||
return;
|
||||
}
|
||||
image->mValue.AppendToString(eCSSProperty_background_image, aValue);
|
||||
aValue.Append(PRUnichar(' '));
|
||||
repeat->mXValue.AppendToString(eCSSProperty_background_repeat, aValue);
|
||||
@ -450,6 +444,16 @@ Declaration::GetValue(nsCSSProperty aProperty, nsAString& aValue) const
|
||||
aValue.Append(PRUnichar(' '));
|
||||
position->mValue.AppendToString(eCSSProperty_background_position,
|
||||
aValue);
|
||||
|
||||
if (size->mXValue.GetUnit() != eCSSUnit_Auto ||
|
||||
size->mYValue.GetUnit() != eCSSUnit_Auto) {
|
||||
aValue.Append(PRUnichar(' '));
|
||||
aValue.Append(PRUnichar('/'));
|
||||
aValue.Append(PRUnichar(' '));
|
||||
size->mXValue.AppendToString(eCSSProperty_background_size, aValue);
|
||||
aValue.Append(PRUnichar(' '));
|
||||
size->mYValue.AppendToString(eCSSProperty_background_size, aValue);
|
||||
}
|
||||
|
||||
NS_ABORT_IF_FALSE(clip->mValue.GetUnit() == eCSSUnit_Enumerated &&
|
||||
origin->mValue.GetUnit() == eCSSUnit_Enumerated,
|
||||
|
||||
@ -6437,7 +6437,7 @@ CSSParserImpl::ParseBackgroundItem(CSSParserImpl::BackgroundParseState& aState)
|
||||
haveImage = false,
|
||||
haveRepeat = false,
|
||||
haveAttach = false,
|
||||
havePosition = false,
|
||||
havePositionAndSize = false,
|
||||
haveOrigin = false,
|
||||
haveSomething = false;
|
||||
|
||||
@ -6489,12 +6489,20 @@ CSSParserImpl::ParseBackgroundItem(CSSParserImpl::BackgroundParseState& aState)
|
||||
aState.mRepeat->mYValue = scratch.mYValue;
|
||||
} else if (nsCSSProps::FindKeyword(keyword,
|
||||
nsCSSProps::kBackgroundPositionKTable, dummy)) {
|
||||
if (havePosition)
|
||||
if (havePositionAndSize)
|
||||
return false;
|
||||
havePosition = true;
|
||||
havePositionAndSize = true;
|
||||
if (!ParseBackgroundPositionValues(aState.mPosition->mValue, false)) {
|
||||
return false;
|
||||
}
|
||||
if (ExpectSymbol('/', true)) {
|
||||
nsCSSValuePair scratch;
|
||||
if (!ParseBackgroundSizeValues(scratch)) {
|
||||
return false;
|
||||
}
|
||||
aState.mSize->mXValue = scratch.mXValue;
|
||||
aState.mSize->mYValue = scratch.mYValue;
|
||||
}
|
||||
} else if (nsCSSProps::FindKeyword(keyword,
|
||||
nsCSSProps::kBackgroundOriginKTable, dummy)) {
|
||||
if (haveOrigin)
|
||||
@ -6548,12 +6556,20 @@ CSSParserImpl::ParseBackgroundItem(CSSParserImpl::BackgroundParseState& aState)
|
||||
(tt == eCSSToken_Function &&
|
||||
(mToken.mIdent.LowerCaseEqualsLiteral("calc") ||
|
||||
mToken.mIdent.LowerCaseEqualsLiteral("-moz-calc")))) {
|
||||
if (havePosition)
|
||||
if (havePositionAndSize)
|
||||
return false;
|
||||
havePosition = true;
|
||||
havePositionAndSize = true;
|
||||
if (!ParseBackgroundPositionValues(aState.mPosition->mValue, false)) {
|
||||
return false;
|
||||
}
|
||||
if (ExpectSymbol('/', true)) {
|
||||
nsCSSValuePair scratch;
|
||||
if (!ParseBackgroundSizeValues(scratch)) {
|
||||
return false;
|
||||
}
|
||||
aState.mSize->mXValue = scratch.mXValue;
|
||||
aState.mSize->mYValue = scratch.mYValue;
|
||||
}
|
||||
} else {
|
||||
if (haveColor)
|
||||
return false;
|
||||
|
||||
@ -1438,7 +1438,9 @@ var gCSSProperties = {
|
||||
inherited: false,
|
||||
type: CSS_TYPE_TRUE_SHORTHAND,
|
||||
subproperties: [ "background-attachment", "background-color", "background-image", "background-position", "background-repeat", "background-clip", "background-origin", "background-size" ],
|
||||
initial_values: [ "transparent", "none", "repeat", "scroll", "0% 0%", "top left", "left top", "transparent none", "top left none", "left top none", "none left top", "none top left", "none 0% 0%", "transparent none repeat scroll top left", "left top repeat none scroll transparent" ],
|
||||
initial_values: [ "transparent", "none", "repeat", "scroll", "0% 0%", "top left", "left top", "0% 0% / auto", "top left / auto", "left top / auto", "0% 0% / auto auto",
|
||||
"transparent none", "top left none", "left top none", "none left top", "none top left", "none 0% 0%", "left top / auto none", "left top / auto auto none",
|
||||
"transparent none repeat scroll top left", "left top repeat none scroll transparent", "transparent none repeat scroll top left / auto", "left top / auto repeat none scroll transparent", "none repeat scroll 0% 0% / auto auto transparent" ],
|
||||
other_values: [
|
||||
/* without multiple backgrounds */
|
||||
"green",
|
||||
@ -1455,6 +1457,15 @@ var gCSSProperties = {
|
||||
"left",
|
||||
"50% 50%",
|
||||
"center",
|
||||
"top / 100px",
|
||||
"left / contain",
|
||||
"left / cover",
|
||||
"10px / 10%",
|
||||
"10em / calc(20px)",
|
||||
"top left / 100px 100px",
|
||||
"top left / 100px auto",
|
||||
"top left / 100px 10%",
|
||||
"top left / 100px calc(20px)",
|
||||
"bottom right scroll none transparent repeat",
|
||||
"50% transparent",
|
||||
"transparent 50%",
|
||||
@ -1473,6 +1484,7 @@ var gCSSProperties = {
|
||||
"0% top url(404.png), url(404.png) 0% top",
|
||||
"fixed repeat-y top left url(404.png), repeat-x green",
|
||||
"url(404.png), -moz-linear-gradient(20px 20px -45deg, blue, green), -moz-element(#a) black",
|
||||
"top left / contain, bottom right / cover",
|
||||
/* test cases with clip+origin in the shorthand */
|
||||
"url(404.png) green padding-box",
|
||||
"url(404.png) border-box transparent",
|
||||
|
||||
@ -123,33 +123,31 @@ is(e.style.background, "", "should not have background shorthand (clip:content-b
|
||||
e.setAttribute("style", "background: red; background-clip: content-box; background-origin: content-box;");
|
||||
isnot(e.style.background, "", "should have background shorthand (clip:content-box;origin:content-box)");
|
||||
e.setAttribute("style", "background: red; background-size: 100% 100%");
|
||||
is(e.style.background, "", "should not have background shorthand (size:100% 100%)");
|
||||
isnot(e.style.background, "", "should have background shorthand (size:100% 100%)");
|
||||
e.setAttribute("style", "background: red; background-size: 100% auto");
|
||||
is(e.style.background, "", "should not have background shorthand (size:100% auto)");
|
||||
isnot(e.style.background, "", "should have background shorthand (size:100% auto)");
|
||||
e.setAttribute("style", "background: red; background-size: auto 100%");
|
||||
is(e.style.background, "", "should not have background shorthand (size:auto 100%)");
|
||||
isnot(e.style.background, "", "should have background shorthand (size:auto 100%)");
|
||||
e.setAttribute("style", "background: red; -moz-background-inline-policy: each-box");
|
||||
isnot(e.style.background, "", "should have background shorthand (-moz-background-inline-policy not relevant)");
|
||||
|
||||
// Check that we only serialize background when the lists (of layers) for
|
||||
// the subproperties are the same length.
|
||||
// XXX Should change background-size to cover,auto,contain once
|
||||
// background-size is part of shorthand.
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
isnot(e.style.background, "", "should have background shorthand (all lists length 3)");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
is(e.style.background, "", "should not have background shorthand (background-clip too long)");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: padding-box, padding-box; background-size: auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
is(e.style.background, "", "should not have background shorthand (background-origin too short)");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png), none; background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png), none; background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
is(e.style.background, "", "should not have background shorthand (background-image too long)");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
is(e.style.background, "", "should not have background shorthand (background-attachment too short)");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px, bottom; background-repeat: repeat-x, repeat, no-repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px, bottom; background-repeat: repeat-x, repeat, no-repeat");
|
||||
is(e.style.background, "", "should not have background shorthand (background-position too long)");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat");
|
||||
is(e.style.background, "", "should not have background shorthand (background-repeat too short)");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: auto, auto, auto, auto; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
e.setAttribute("style", "background-clip: border-box, padding-box, border-box; background-origin: border-box, padding-box, padding-box; background-size: cover, auto, contain, contain; background-color: blue; background-image: url(404.png), none, url(404-2.png); background-attachment: fixed, scroll, scroll; background-position: top left, center, 30px 50px; background-repeat: repeat-x, repeat, no-repeat");
|
||||
is(e.style.background, "", "should not have background shorthand (background-size too long)");
|
||||
|
||||
// Check that we only serialize transition when the lists are the same length.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user