Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-12 12:55:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 520485, patch 1 of 5: add support for float values in nsStyleAnimation. r=dbaron

Browse Source
This commit is contained in:
Daniel Holbert 2009-10-08 18:30:49 -07:00
parent d33c6f1c4a
commit c78ecfe798
4 changed files with 77 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
layout/style/nsCSSPropList.h
View File

@ -1830,8 +1830,8 @@ CSS_PROP_DISPLAY(
mOpacity,
eCSSType_Value,
nsnull,
CSS_PROP_NO_OFFSET,
eStyleAnimType_None) // XXX bug 3935
offsetof(nsStyleDisplay, mOpacity),
eStyleAnimType_float) // XXX bug 3935
CSS_PROP_BACKENDONLY(
orphans,
orphans,
@ -2782,8 +2782,8 @@ CSS_PROP_SVG(
mFillOpacity,
eCSSType_Value,
nsnull,
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
offsetof(nsStyleSVG, mFillOpacity),
eStyleAnimType_float)
CSS_PROP_SVG(
fill-rule,
fill_rule,
@ -2826,8 +2826,8 @@ CSS_PROP_SVGRESET(
mFloodOpacity,
eCSSType_Value,
nsnull,
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
offsetof(nsStyleSVGReset, mFloodOpacity),
eStyleAnimType_float)
CSS_PROP_SVG(
image-rendering,
image_rendering,
@ -2930,8 +2930,8 @@ CSS_PROP_SVGRESET(
mStopOpacity,
eCSSType_Value,
nsnull,
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
offsetof(nsStyleSVGReset, mStopOpacity),
eStyleAnimType_float)
CSS_PROP_SVG(
stroke,
stroke,
@ -2996,8 +2996,8 @@ CSS_PROP_SVG(
mStrokeMiterlimit,
eCSSType_Value,
nsnull,
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
offsetof(nsStyleSVG, mStrokeMiterlimit),
eStyleAnimType_float)
CSS_PROP_SVG(
stroke-opacity,
stroke_opacity,
@ -3007,8 +3007,8 @@ CSS_PROP_SVG(
mStrokeOpacity,
eCSSType_Value,
nsnull,
CSS_PROP_NO_OFFSET,
eStyleAnimType_None)
offsetof(nsStyleSVG, mStrokeOpacity),
eStyleAnimType_float)
CSS_PROP_SVG(
stroke-width,
stroke_width,

3
layout/style/nsCSSProps.h
View File

@ -82,6 +82,9 @@ enum nsStyleAnimType {
// nscoord values
eStyleAnimType_nscoord,
// float values
eStyleAnimType_float,
// nscolor values
eStyleAnimType_Color,

30
layout/style/nsStyleAnimation.cpp
View File

@ -120,6 +120,13 @@ nsStyleAnimation::Add(nsStyleCoord& aDest, const nsStyleCoord& aValueToAdd,
aDest.SetPercentValue(destPct);
break;
}
case eStyleUnit_Factor: {
float destFactor = aDest.GetFactorValue();
float valueToAddFactor = aValueToAdd.GetFactorValue();
destFactor += aCount * valueToAddFactor;
aDest.SetFactorValue(destFactor);
break;
}
case eStyleUnit_Color: {
// Since nscolor doesn't allow out-of-sRGB values, by-animations
// of colors don't make much sense in our implementation.
@ -182,6 +189,12 @@ nsStyleAnimation::ComputeDistance(const nsStyleCoord& aStartValue,
aDistance = fabs(double(endPct - startPct));
break;
}
case eStyleUnit_Factor: {
float startFactor = aStartValue.GetFactorValue();
float endFactor = aEndValue.GetFactorValue();
aDistance = fabs(double(endFactor - startFactor));
break;
}
case eStyleUnit_Color: {
// http://www.w3.org/TR/smil-animation/#animateColorElement says
// that we should use Euclidean RGB cube distance. However, we
@ -262,6 +275,13 @@ nsStyleAnimation::Interpolate(const nsStyleCoord& aStartValue,
aResultValue.SetPercentValue(resultPct);
break;
}
case eStyleUnit_Factor: {
float startFactor = aStartValue.GetFactorValue();
float endFactor = aEndValue.GetFactorValue();
float resultFactor = startFactor + aPortion * (endFactor - startFactor);
aResultValue.SetFactorValue(resultFactor);
break;
}
case eStyleUnit_Color: {
double inv = 1.0 - aPortion;
nscolor startColor = aStartValue.GetColorValue();
@ -427,6 +447,12 @@ nsStyleAnimation::UncomputeValue(nsCSSProperty aProperty,
static_cast<nsCSSValue*>(aSpecifiedValue)->
SetPercentValue(aComputedValue.GetPercentValue());
break;
case eStyleUnit_Factor:
NS_ABORT_IF_FALSE(nsCSSProps::kTypeTable[aProperty] == eCSSType_Value,
"type mismatch");
static_cast<nsCSSValue*>(aSpecifiedValue)->
SetFloatValue(aComputedValue.GetFactorValue(), eCSSUnit_Number);
break;
case eStyleUnit_Color:
// colors can be alone, or part of a paint server
if (nsCSSProps::kAnimTypeTable[aProperty] == eStyleAnimType_PaintServer) {
@ -540,6 +566,10 @@ nsStyleAnimation::ExtractComputedValue(nsCSSProperty aProperty,
aComputedValue.SetCoordValue(*static_cast<const nscoord*>(
StyleDataAtOffset(styleStruct, ssOffset)));
return PR_TRUE;
case eStyleAnimType_float:
aComputedValue.SetFactorValue(*static_cast<const float*>(
StyleDataAtOffset(styleStruct, ssOffset)));
return PR_TRUE;
case eStyleAnimType_Color:
aComputedValue.SetColorValue(*static_cast<const nscolor*>(
StyleDataAtOffset(styleStruct, ssOffset)));

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

@ -53,7 +53,9 @@ var supported_properties = {
"bottom": [ test_length_transition, test_percent_transition ],
"color": [ test_color_transition ],
"fill": [ test_color_transition ],
"fill-opacity" : [ test_float_zeroToOne_transition ],
"flood-color": [ test_color_transition ],
"flood-opacity" : [ test_float_zeroToOne_transition ],
"font-size": [ test_length_transition, test_percent_transition ],
"height": [ test_length_transition, test_percent_transition ],
"left": [ test_length_transition, test_percent_transition ],
@ -69,6 +71,7 @@ var supported_properties = {
"max-width": [ test_length_transition, test_percent_transition ],
"min-height": [ test_length_transition, test_percent_transition ],
"min-width": [ test_length_transition, test_percent_transition ],
"opacity" : [ test_float_zeroToOne_transition ],
"outline-offset": [ test_length_transition ],
"outline-width": [ test_length_transition ],
"padding-bottom": [ test_length_transition, test_percent_transition ],
@ -77,8 +80,11 @@ var supported_properties = {
"padding-top": [ test_length_transition, test_percent_transition ],
"right": [ test_length_transition, test_percent_transition ],
"stop-color": [ test_color_transition ],
"stop-opacity" : [ test_float_zeroToOne_transition ],
"stroke": [ test_color_transition ],
"stroke-dashoffset": [ test_length_transition, test_percent_transition ],
"stroke-miterlimit": [ test_float_aboveOne_transition ],
"stroke-opacity" : [ test_float_zeroToOne_transition ],
"stroke-width": [ test_length_transition, test_percent_transition ],
"text-indent": [ test_length_transition, test_percent_transition ],
"top": [ test_length_transition, test_percent_transition ],
@ -202,6 +208,30 @@ function test_length_transition(prop) {
"length-valued property " + prop + ": interpolation of lengths");
}
// Test using float values in the range [0, 1] (e.g. opacity)
function test_float_zeroToOne_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty(prop, "0.3", "");
is(cs.getPropertyValue(prop), "0.3",
"float-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty(prop, "0.8", "");
is(cs.getPropertyValue(prop), "0.55",
"float-valued property " + prop + ": interpolation of floats");
}
// Test using float values in the range [1, infinity) (e.g. stroke-miterlimit)
function test_float_aboveOne_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty(prop, "1", "");
is(cs.getPropertyValue(prop), "1",
"float-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty(prop, "2.1", "");
is(cs.getPropertyValue(prop), "1.55",
"float-valued property " + prop + ": interpolation of floats");
}
function test_percent_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty(prop, "25%", "");
@ -226,11 +256,11 @@ function test_color_transition(prop) {
div.style.setProperty("-moz-transition-property", "none", "");
div.style.setProperty(prop, "rgb(255, 28, 0)", "");
is(cs.getPropertyValue(prop), "rgb(255, 28, 0)",
"length-valued property " + prop + ": computed value before transition");
"color-valued property " + prop + ": computed value before transition");
div.style.setProperty("-moz-transition-property", prop, "");
div.style.setProperty(prop, "rgb(77, 84, 128)", "");
is(cs.getPropertyValue(prop), "rgb(166, 56, 64)",
"length-valued property " + prop + ": interpolation of lengths");
"color-valued property " + prop + ": interpolation of colors");
}
</script>