Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-27 23:02:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1402219 - Compute css variables with custom properties in keyframes for getKeyframes(). r=birtles

Browse Source 
MozReview-Commit-ID: 7CMnWbzzemY

--HG--
extra : rebase_source : 977a2d4af632beef45906cb0eb1077fc48ccd4ed
This commit is contained in:
Hiroyuki Ikezoe 2017-09-27 16:49:21 +09:00
parent ef1220aa96
commit 9e9a01fd49
3 changed files with 73 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
dom/animation/KeyframeEffectReadOnly.cpp
View File

@ -1255,10 +1255,30 @@ KeyframeEffectReadOnly::GetKeyframes(JSContext*& aCx,
return;
}
RefPtr<RawServoDeclarationBlock> customProperties;
// A workaround for CSS Animations in servo backend, custom properties in
// keyframe are stored in a servo's declaration block. Find the declaration
// block to resolve CSS variables in the keyframe.
// This workaround will be solved by bug 1391537.
if (isServo && isCSSAnimation) {
for (const PropertyValuePair& propertyValue : keyframe.mPropertyValues) {
if (propertyValue.mProperty ==
nsCSSPropertyID::eCSSPropertyExtra_variable) {
customProperties = propertyValue.mServoDeclarationBlock;
break;
}
}
}
JS::Rooted<JSObject*> keyframeObject(aCx, &keyframeJSValue.toObject());
for (const PropertyValuePair& propertyValue : keyframe.mPropertyValues) {
nsAutoString stringValue;
if (isServo) {
// Don't serialize the custom properties for this keyframe.
if (propertyValue.mProperty ==
nsCSSPropertyID::eCSSPropertyExtra_variable) {
continue;
}
if (propertyValue.mServoDeclarationBlock) {
const ServoStyleContext* servoStyleContext =
styleContext ? styleContext->AsServo() : nullptr;
@ -1266,7 +1286,8 @@ KeyframeEffectReadOnly::GetKeyframes(JSContext*& aCx,
propertyValue.mServoDeclarationBlock,
propertyValue.mProperty,
&stringValue,
servoStyleContext);
servoStyleContext,
customProperties);
} else {
RawServoAnimationValue* value =
mBaseStyleValuesForServo.GetWeak(propertyValue.mProperty);

49
dom/animation/test/css-animations/file_keyframeeffect-getkeyframes.html
View File

@ -136,6 +136,7 @@
:root {
--var-100px: 100px;
--end-color: rgb(255, 0, 0);
}
@keyframes anim-variables {
to { transform: translate(var(--var-100px), 0) }
@ -143,6 +144,13 @@
@keyframes anim-variables-shorthand {
to { margin: var(--var-100px) }
}
@keyframes anim-custom-property-in-keyframe {
to { --end-color: rgb(0, 255, 0); color: var(--end-color) }
}
@keyframes anim-only-custom-property-in-keyframe {
from { transform: translate(100px, 0) }
to { --not-used: 200px }
}
</style>
<body>
<script>
@ -699,6 +707,47 @@ test(function(t) {
}
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected values for ' +
'animations with CSS variables as keyframe values in a shorthand property');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim-custom-property-in-keyframe 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease",
color: "rgb(0, 0, 0)" },
{ offset: 1, computedOffset: 1, easing: "ease",
color: "rgb(0, 255, 0)" },
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected values for ' +
'animations with a CSS variable which is overriden by the value in keyframe');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim-only-custom-property-in-keyframe 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease",
transform: "translate(100px, 0px)" },
{ offset: 1, computedOffset: 1, easing: "ease",
transform: "none" },
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected values for ' +
'animations with only custom property in a keyframe');
done();
</script>
</body>

3
layout/style/ServoBindingList.h
View File

@ -391,7 +391,8 @@ SERVO_BINDING_FUNC(Servo_DeclarationBlock_GetCssText, void,
SERVO_BINDING_FUNC(Servo_DeclarationBlock_SerializeOneValue, void,
RawServoDeclarationBlockBorrowed declarations,
nsCSSPropertyID property, nsAString* buffer,
ServoStyleContextBorrowedOrNull computed_values)
ServoStyleContextBorrowedOrNull computed_values,
RawServoDeclarationBlockBorrowedOrNull custom_properties)
SERVO_BINDING_FUNC(Servo_DeclarationBlock_Count, uint32_t,
RawServoDeclarationBlockBorrowed declarations)
SERVO_BINDING_FUNC(Servo_DeclarationBlock_GetNthProperty, bool,