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

Add support for unprefixed calc(), and prefer serializing to unprefixed form. (Bug 771678) r=bzbarsky

Browse Source 
This also converts all of the tests in layout/style/test/ to using
calc(), except that it duplicates all of the valid values and some of
the invalid values for 'width' and '-moz-column-rule-width' (which are
the two properties that intentionally have extensive calc() tests) in
property_database.js.
This commit is contained in:
L. David Baron 2012-07-13 15:06:50 -07:00
parent a0acd65307
commit 8379fbf60e
9 changed files with 728 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style/CSSCalc.h
View File

@ -256,7 +256,7 @@ template <class CalcOps>
static void
SerializeCalc(const typename CalcOps::input_type& aValue, CalcOps &aOps)
{
aOps.Append("-moz-calc(");
aOps.Append("calc(");
nsCSSUnit unit = CalcOps::GetUnit(aValue);
if (unit == eCSSUnit_Calc) {
const typename CalcOps::input_array_type *array = aValue.GetArrayValue();

9
layout/style/nsCSSParser.cpp
View File

@ -4618,7 +4618,8 @@ CSSParserImpl::ParseVariant(nsCSSValue& aValue,
}
if ((aVariantMask & VARIANT_CALC) &&
(eCSSToken_Function == tk->mType) &&
tk->mIdent.LowerCaseEqualsLiteral("-moz-calc")) {
(tk->mIdent.LowerCaseEqualsLiteral("calc") ||
tk->mIdent.LowerCaseEqualsLiteral("-moz-calc"))) {
// calc() currently allows only lengths and percents inside it.
return ParseCalc(aValue, aVariantMask & VARIANT_LP);
}
@ -5250,7 +5251,8 @@ CSSParserImpl::IsLegacyGradientLine(const nsCSSTokenType& aType,
break;
case eCSSToken_Function:
if (aId.LowerCaseEqualsLiteral("-moz-calc")) {
if (aId.LowerCaseEqualsLiteral("calc") ||
aId.LowerCaseEqualsLiteral("-moz-calc")) {
haveGradientLine = true;
break;
}
@ -6248,7 +6250,8 @@ CSSParserImpl::ParseBackgroundItem(CSSParserImpl::BackgroundParseState& aState)
tt == eCSSToken_Number ||
tt == eCSSToken_Percentage ||
(tt == eCSSToken_Function &&
mToken.mIdent.LowerCaseEqualsLiteral("-moz-calc"))) {
(mToken.mIdent.LowerCaseEqualsLiteral("calc") ||
mToken.mIdent.LowerCaseEqualsLiteral("-moz-calc")))) {
if (havePosition)
return false;
havePosition = true;

2
layout/style/nsComputedDOMStyle.cpp
View File

@ -1351,7 +1351,7 @@ SetValueToCalc(const nsStyleCoord::Calc *aCalc, nsROCSSPrimitiveValue *aValue)
nsRefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue();
nsAutoString tmp, result;
result.AppendLiteral("-moz-calc(");
result.AppendLiteral("calc(");
val->SetAppUnits(aCalc->mLength);
val->GetCssText(tmp);

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

File diff suppressed because it is too large Load Diff

38
layout/style/test/test_computed_style.html
View File

@ -136,17 +136,17 @@ var noframe_container = document.getElementById("content");
[ "0 0", "0px 0px", "unitless 0" ],
[ "0px 0px", "0px 0px", "0 with units" ],
[ "0% 0%", "0% 0%", "0%" ],
[ "-moz-calc(0px) 0", "0px 0px", "0 calc with units x" ],
[ "0 -moz-calc(0px)", "0px 0px", "0 calc with units y" ],
[ "-moz-calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units x" ],
[ "0 -moz-calc(3px - 3px)", "0px 0px", "computed 0 calc with units y" ],
[ "-moz-calc(0%) 0", "0% 0px", "0% calc x"],
[ "0 -moz-calc(0%)", "0px 0%", "0% calc y"],
[ "-moz-calc(3px + 2% - 2%) 0", "-moz-calc(3px + 0%) 0px",
[ "calc(0px) 0", "0px 0px", "0 calc with units x" ],
[ "0 calc(0px)", "0px 0px", "0 calc with units y" ],
[ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units x" ],
[ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units y" ],
[ "calc(0%) 0", "0% 0px", "0% calc x"],
[ "0 calc(0%)", "0px 0%", "0% calc y"],
[ "calc(3px + 2% - 2%) 0", "calc(3px + 0%) 0px",
"computed 0% calc x"],
[ "0 -moz-calc(3px + 2% - 2%)", "0px -moz-calc(3px + 0%)",
[ "0 calc(3px + 2% - 2%)", "0px calc(3px + 0%)",
"computed 0% calc y"],
[ "-moz-calc(3px - 5px) -moz-calc(6px - 7px)", "-2px -1px",
[ "calc(3px - 5px) calc(6px - 7px)", "-2px -1px",
"negative pixel width"],
[ "", "0% 0%", "initial value" ],
];
@ -170,18 +170,18 @@ var noframe_container = document.getElementById("content");
[ "0 0", "0px 0px", "unitless 0" ],
[ "0px 0px", "0px 0px", "0 with units" ],
[ "0% 0%", "0% 0%", "0%" ],
[ "-moz-calc(0px) 0", "0px 0px", "0 calc with units horizontal" ],
[ "0 -moz-calc(0px)", "0px 0px", "0 calc with units vertical" ],
[ "-moz-calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units horizontal" ],
[ "0 -moz-calc(3px - 3px)", "0px 0px", "computed 0 calc with units vertical" ],
[ "-moz-calc(0%) 0", "0% 0px", "0% calc horizontal"],
[ "0 -moz-calc(0%)", "0px 0%", "0% calc vertical"],
[ "-moz-calc(3px + 2% - 2%) 0", "-moz-calc(3px + 0%) 0px",
[ "calc(0px) 0", "0px 0px", "0 calc with units horizontal" ],
[ "0 calc(0px)", "0px 0px", "0 calc with units vertical" ],
[ "calc(3px - 3px) 0", "0px 0px", "computed 0 calc with units horizontal" ],
[ "0 calc(3px - 3px)", "0px 0px", "computed 0 calc with units vertical" ],
[ "calc(0%) 0", "0% 0px", "0% calc horizontal"],
[ "0 calc(0%)", "0px 0%", "0% calc vertical"],
[ "calc(3px + 2% - 2%) 0", "calc(3px + 0%) 0px",
"computed 0% calc horizontal"],
[ "0 -moz-calc(3px + 2% - 2%)", "0px -moz-calc(3px + 0%)",
[ "0 calc(3px + 2% - 2%)", "0px calc(3px + 0%)",
"computed 0% calc vertical"],
[ "-moz-calc(3px - 5px) -moz-calc(6px - 9px)",
"-moz-calc(-2px) -moz-calc(-3px)", "negative pixel width" ],
[ "calc(3px - 5px) calc(6px - 9px)",
"calc(-2px) calc(-3px)", "negative pixel width" ],
[ "", "auto auto", "initial value" ],
];

10
layout/style/test/test_flexbox_flex_shorthand.html
View File

@ -125,12 +125,12 @@ let gFlexShorthandTestcases = [
"-moz-flex-basis": "-moz-fit-content",
},
{
"-moz-flex": "-moz-calc(5px + 6px)",
"-moz-flex": "calc(5px + 6px)",
"-moz-flex-basis": "11px",
},
{
"-moz-flex": "-moz-calc(15% + 30px)",
"-moz-flex-basis": "-moz-calc(30px + 15%)",
"-moz-flex": "calc(15% + 30px)",
"-moz-flex-basis": "calc(30px + 15%)",
},
// Two Values (numeric) --> sets flex-grow, flex-shrink
@ -199,9 +199,9 @@ let gFlexShorthandTestcases = [
"-moz-flex-basis": "-moz-fit-content",
},
{
"-moz-flex": "-moz-calc(5% + 10px) 3",
"-moz-flex": "calc(5% + 10px) 3",
"-moz-flex-grow": "3",
"-moz-flex-basis": "-moz-calc(10px + 5%)",
"-moz-flex-basis": "calc(10px + 5%)",
},
// Three Values --> Sets all three subproperties

40
layout/style/test/test_transitions_per_property.html
View File

@ -537,7 +537,7 @@ function test_length_percent_calc_transition(prop) {
+ v2v + "'");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "-moz-calc(25% + 100px)", "");
div.style.setProperty(prop, "calc(25% + 100px)", "");
v1v = cs.getPropertyValue(prop);
is(any_unit_to_num(v1v) * 4, b + 4*c,
"computed value before transition for " + prop + ": '" + v1v + "'");
@ -554,17 +554,17 @@ function test_length_percent_calc_transition(prop) {
is(any_unit_to_num(v1v) * 2, c * 3,
"computed value before transition for " + prop + ": '" + v1v + "'");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "-moz-calc(50% + 50px)", "");
div.style.setProperty(prop, "calc(50% + 50px)", "");
v2v = cs.getPropertyValue(prop);
is(any_unit_to_num(v2v) * 8, 7 * a + b + 10*c,
"interpolation between length and calc() for " + prop + ": '" +
v2v + "'");
check_distance(prop, "50%", "-moz-calc(37.5% + 50px)", "200px");
check_distance(prop, "-moz-calc(25% + 100px)", "-moz-calc(37.5% + 75px)",
check_distance(prop, "50%", "calc(37.5% + 50px)", "200px");
check_distance(prop, "calc(25% + 100px)", "calc(37.5% + 75px)",
"75%");
check_distance(prop, "150px", "-moz-calc(125px + 12.5%)",
"-moz-calc(50% + 50px)");
check_distance(prop, "150px", "calc(125px + 12.5%)",
"calc(50% + 50px)");
}
function test_color_transition(prop) {
@ -839,7 +839,7 @@ function test_radius_transition(prop) {
is(cs.getPropertyValue(prop), "28px",
"radius-valued property " + prop + ": interpolation of radius with mixed units");
check_distance(prop, "6.25% 12.5%",
"-moz-calc(4.6875% + 16px) -moz-calc(9.375% + 4px)",
"calc(4.6875% + 16px) calc(9.375% + 4px)",
"64px 16px");
div.style.setProperty("transition-timing-function", FUNC_NEGATIVE, "");
@ -1241,20 +1241,20 @@ function test_background_position_size_common(prop) {
is(cs.getPropertyValue(prop), "20% 40%, 8px 12px",
"property " + prop + ": computed value before transition");
div.style.setProperty(prop, "12px 20px, 40% 16%", "");
is(cs.getPropertyValue(prop), "-moz-calc(3px + 15%) -moz-calc(5px + 30%), -moz-calc(6px + 10%) -moz-calc(9px + 4%)",
is(cs.getPropertyValue(prop), "calc(3px + 15%) calc(5px + 30%), calc(6px + 10%) calc(9px + 4%)",
"property " + prop + ": interpolation that computes to calc()");
check_distance(prop, "20% 40%, 8px 12px",
"-moz-calc(3px + 15%) -moz-calc(5px + 30%), -moz-calc(6px + 10%) -moz-calc(9px + 4%)",
"calc(3px + 15%) calc(5px + 30%), calc(6px + 10%) calc(9px + 4%)",
"12px 20px, 40% 16%");
div.style.setProperty(prop, "-moz-calc(20% + 40px) -moz-calc(40px + 40%), 8px 12%, -moz-calc(20px + 12%) -moz-calc(24px + 8%)", "");
is(cs.getPropertyValue(prop), "-moz-calc(40px + 20%) -moz-calc(40px + 40%), 8px 12%, -moz-calc(20px + 12%) -moz-calc(24px + 8%)",
div.style.setProperty(prop, "calc(20% + 40px) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)", "");
is(cs.getPropertyValue(prop), "calc(40px + 20%) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)",
"property " + prop + ": computed value before transition");
div.style.setProperty(prop, "12px 20%, -moz-calc(20%) -moz-calc(16px + 60%), -moz-calc(8px + 20%) -moz-calc(40px + 16%)", "");
is(cs.getPropertyValue(prop), "-moz-calc(33px + 15%) -moz-calc(30px + 35%), -moz-calc(6px + 5%) -moz-calc(4px + 24%), -moz-calc(17px + 14%) -moz-calc(28px + 10%)",
div.style.setProperty(prop, "12px 20%, calc(20%) calc(16px + 60%), calc(8px + 20%) calc(40px + 16%)", "");
is(cs.getPropertyValue(prop), "calc(33px + 15%) calc(30px + 35%), calc(6px + 5%) calc(4px + 24%), calc(17px + 14%) calc(28px + 10%)",
"property " + prop + ": interpolation that computes to calc()");
check_distance(prop, "-moz-calc(20% + 40px) -moz-calc(40px + 40%), 8px 12%, -moz-calc(20px + 12%) -moz-calc(24px + 8%)",
"-moz-calc(33px + 15%) -moz-calc(30px + 35%), -moz-calc(6px + 5%) -moz-calc(4px + 24%), -moz-calc(17px + 14%) -moz-calc(28px + 10%)",
"12px 20%, -moz-calc(20%) -moz-calc(16px + 60%), -moz-calc(8px + 20%) -moz-calc(40px + 16%)");
check_distance(prop, "calc(20% + 40px) calc(40px + 40%), 8px 12%, calc(20px + 12%) calc(24px + 8%)",
"calc(33px + 15%) calc(30px + 35%), calc(6px + 5%) calc(4px + 24%), calc(17px + 14%) calc(28px + 10%)",
"12px 20%, calc(20%) calc(16px + 60%), calc(8px + 20%) calc(40px + 16%)");
}
function test_transform_transition(prop) {
@ -1383,11 +1383,11 @@ function test_transform_transition(prop) {
// to 300px (width) and 50px (height) per the prerequisites in
// property_database.js
{ start: 'translateX(20%)', /* 60px */
end: 'translateX(-moz-calc(10% + 1em))', /* 30px + 20px = 50px */
expected_uncomputed: 'translateX(-moz-calc(17.5% + 0.25em))',
end: 'translateX(calc(10% + 1em))', /* 30px + 20px = 50px */
expected_uncomputed: 'translateX(calc(17.5% + 0.25em))',
expected: 'matrix(1, 0, 0, 1, 57.5, 0)' },
{ start: 'translate(-moz-calc(0.75 * 3em + 1.5 * 10%), -moz-calc(0.5 * 5em + 0.5 * 8%))', /* 90px, 52px */
end: 'rotate(90deg) translateY(20%) rotate(90deg) translateY(-moz-calc(10% + 0.5em)) rotate(180deg)', /* -10px, -15px */
{ start: 'translate(calc(0.75 * 3em + 1.5 * 10%), calc(0.5 * 5em + 0.5 * 8%))', /* 90px, 52px */
end: 'rotate(90deg) translateY(20%) rotate(90deg) translateY(calc(10% + 0.5em)) rotate(180deg)', /* -10px, -15px */
expected: 'matrix(1, 0, 0, 1, 65, 35.25)' },
// scale

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

@ -221,16 +221,16 @@ var declarations = [
"transition-timing-function: cubic-bezier(0, 0, 1, 1 ",
"transition-timing-function: cubic-bezier(0, 0, 1, 1,",
"transition-timing-function: cubic-bezier(0, 0, 1, 1, ",
"border-top-width: -moz-calc(",
"border-top-width: -moz-calc( ",
"border-top-width: -moz-calc(2em",
"border-top-width: -moz-calc(2em ",
"border-top-width: -moz-calc(2em +",
"border-top-width: -moz-calc(2em + ",
"border-top-width: -moz-calc(2em *",
"border-top-width: -moz-calc(2em * ",
"border-top-width: -moz-calc((2em)",
"border-top-width: -moz-calc((2em) ",
"border-top-width: calc(",
"border-top-width: calc( ",
"border-top-width: calc(2em",
"border-top-width: calc(2em ",
"border-top-width: calc(2em +",
"border-top-width: calc(2em + ",
"border-top-width: calc(2em *",
"border-top-width: calc(2em * ",
"border-top-width: calc((2em)",
"border-top-width: calc((2em) ",
];
var selectors = [

50
layout/style/test/test_value_computation.html
View File

@ -50,32 +50,32 @@ var gBadComputed = {
var gBadComputedNoFrame = {
// These are probably bogus tests...
"border-radius": [ "0%", "-moz-calc(-1%)", "-moz-calc(0px) -moz-calc(0pt) -moz-calc(0%) -moz-calc(0em)" ],
"border-bottom-left-radius": [ "0%", "-moz-calc(-1%)" ],
"border-bottom-right-radius": [ "0%", "-moz-calc(-1%)" ],
"border-top-left-radius": [ "0%", "-moz-calc(-1%)" ],
"border-top-right-radius": [ "0%", "-moz-calc(-1%)" ],
"-moz-margin-end": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"-moz-margin-start": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"-moz-outline-radius": [ "0%", "-moz-calc(-1%)", "-moz-calc(0px) -moz-calc(0pt) -moz-calc(0%) -moz-calc(0em)" ],
"-moz-outline-radius-bottomleft": [ "0%", "-moz-calc(-1%)" ],
"-moz-outline-radius-bottomright": [ "0%", "-moz-calc(-1%)" ],
"-moz-outline-radius-topleft": [ "0%", "-moz-calc(-1%)" ],
"-moz-outline-radius-topright": [ "0%", "-moz-calc(-1%)" ],
"-moz-padding-end": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"-moz-padding-start": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"border-radius": [ "0%", "calc(-1%)", "calc(0px) calc(0pt) calc(0%) calc(0em)" ],
"border-bottom-left-radius": [ "0%", "calc(-1%)" ],
"border-bottom-right-radius": [ "0%", "calc(-1%)" ],
"border-top-left-radius": [ "0%", "calc(-1%)" ],
"border-top-right-radius": [ "0%", "calc(-1%)" ],
"-moz-margin-end": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
"-moz-margin-start": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
"-moz-outline-radius": [ "0%", "calc(-1%)", "calc(0px) calc(0pt) calc(0%) calc(0em)" ],
"-moz-outline-radius-bottomleft": [ "0%", "calc(-1%)" ],
"-moz-outline-radius-bottomright": [ "0%", "calc(-1%)" ],
"-moz-outline-radius-topleft": [ "0%", "calc(-1%)" ],
"-moz-outline-radius-topright": [ "0%", "calc(-1%)" ],
"-moz-padding-end": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
"-moz-padding-start": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
"margin": [ "0% 0px 0em 0pt" ],
"margin-bottom": [ "0%", "-moz-calc(0% + 0px)" ],
"margin-left": [ "0%", "-moz-calc(0% + 0px)" ],
"margin-right": [ "0%", "-moz-calc(0% + 0px)" ],
"margin-top": [ "0%", "-moz-calc(0% + 0px)" ],
"min-height": [ "-moz-calc(-1%)" ],
"min-width": [ "-moz-calc(-1%)" ],
"padding": [ "0% 0px 0em 0pt", "-moz-calc(0px) -moz-calc(0em) -moz-calc(-2px) -moz-calc(-1%)" ],
"padding-bottom": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"padding-left": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"padding-right": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"padding-top": [ "0%", "-moz-calc(0% + 0px)", "-moz-calc(-1%)" ],
"margin-bottom": [ "0%", "calc(0% + 0px)" ],
"margin-left": [ "0%", "calc(0% + 0px)" ],
"margin-right": [ "0%", "calc(0% + 0px)" ],
"margin-top": [ "0%", "calc(0% + 0px)" ],
"min-height": [ "calc(-1%)" ],
"min-width": [ "calc(-1%)" ],
"padding": [ "0% 0px 0em 0pt", "calc(0px) calc(0em) calc(-2px) calc(-1%)" ],
"padding-bottom": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
"padding-left": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
"padding-right": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
"padding-top": [ "0%", "calc(0% + 0px)", "calc(-1%)" ],
};
function xfail_value(property, value, is_initial, has_frame) {