Skip to content

Commit fee955e

Browse files
committed
[@Property] CSS custom properties containing var() are not updated when the referenced property is animated
https://bugs.webkit.org/show_bug.cgi?id=250448 rdar://104080598 Reviewed by Antoine Quint. * LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/at-property-animation-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/at-property-animation.html: * Source/WebCore/style/PropertyCascade.cpp: (WebCore::Style::PropertyCascade::shouldApplyAfterAnimation): Also check for custom properties containing var() when figuring out the post-animation cascade. Canonical link: https://commits.webkit.org/258786@main
1 parent 6f437bc commit fee955e

File tree

3 files changed

+50
-2
lines changed

3 files changed

+50
-2
lines changed

LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/at-property-animation-expected.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,6 @@ PASS Transitioning from specified value
1111
FAIL Transition triggered by initial value change assert_equals: expected "150px" but got "200px"
1212
PASS No transition when changing types
1313
PASS No transition when removing @property rule
14+
PASS Unregistered properties referencing animated properties update correctly.
15+
PASS Registered properties referencing animated properties update correctly.
1416

LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/at-property-animation.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,4 +295,47 @@
295295
});
296296
}, 'No transition when removing @property rule');
297297

298+
test_with_at_property({
299+
syntax: '"<length>"',
300+
inherits: false,
301+
initialValue: '0px'
302+
}, (name) => {
303+
with_style_node(`
304+
@keyframes test {
305+
from { ${name}: 100px; }
306+
to { ${name}: 200px; }
307+
}
308+
#div {
309+
animation: test 100s -50s linear;
310+
--unregistered: var(${name});
311+
}
312+
`, () => {
313+
assert_equals(getComputedStyle(div).getPropertyValue('--unregistered'), '150px');
314+
});
315+
}, 'Unregistered properties referencing animated properties update correctly.');
316+
317+
test_with_at_property({
318+
syntax: '"<length>"',
319+
inherits: false,
320+
initialValue: '0px'
321+
}, (name) => {
322+
with_style_node(`
323+
@keyframes test {
324+
from { ${name}: 100px; }
325+
to { ${name}: 200px; }
326+
}
327+
@property --registered {
328+
syntax: "<length>";
329+
inherits: false;
330+
initialValue: 0px;
331+
}
332+
#div {
333+
animation: test 100s -50s linear;
334+
--registered: var(${name});
335+
}
336+
`, () => {
337+
assert_equals(getComputedStyle(div).getPropertyValue('--registered'), '150px');
338+
});
339+
}, 'Registered properties referencing animated properties update correctly.');
340+
298341
</script>

Source/WebCore/style/PropertyCascade.cpp

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -261,9 +261,12 @@ bool PropertyCascade::shouldApplyAfterAnimation(const StyleProperties::PropertyR
261261
}
262262

263263
// If we are animating custom properties they may affect other properties so we need to re-resolve them.
264-
if (m_animationLayer->hasCustomProperties && property.value()->isVariableReferenceValue()) {
264+
if (m_animationLayer->hasCustomProperties) {
265265
// We could check if the we are actually animating the referenced variable. Indirect cases would need to be taken into account.
266-
return true;
266+
if (customProperty && !customProperty->isResolved())
267+
return true;
268+
if (property.value()->isVariableReferenceValue())
269+
return true;
267270
}
268271

269272
// Check for 'em' units and similar property dependencies.

0 commit comments

Comments
 (0)