8000 [css-transition] ensure we fill transition-property values with a cus… · WebKit/WebKit@63d1cc8 · GitHub
[go: up one dir, main page]

Skip to content

Commit 63d1cc8

Browse files
committed
[css-transition] ensure we fill transition-property values with a custom property when other transition CSS properties are used with a longer list of items
https://bugs.webkit.org/show_bug.cgi?id=250401 rdar://104073160 Reviewed by Dean Jackson. It's possible for certain CSS transition properties to specify a longer list of values than the transition-property property itself. In the case where a custom property is used, we must ensure to fill in the custom property string for the generated Animation object. * LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-property-numbers-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-transition-mismatched-property-numbers.html: Added. * Source/WebCore/platform/animation/Animation.cpp: (WebCore::Animation::Animation): (WebCore::Animation::animationsMatch const): * Source/WebCore/platform/animation/Animation.h: (WebCore::Animation::isCustomOrUnknownPropertySet const): (WebCore::Animation::isEmpty const): (WebCore::Animation::clearCustomOrUnknownProperty): (WebCore::Animation::clearAll): (WebCore::Animation::setCustomOrUnknownProperty): (WebCore::Animation::fillCustomOrUnknownProperty): * Source/WebCore/platform/animation/AnimationList.cpp: (WebCore::AnimationList::fillUnsetProperties): Canonical link: https://commits.webkit.org/258770@main
1 parent 3559f6b commit 63d1cc8

File tree

5 files changed

+53
-2
lines changed

5 files changed

+53
-2
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
PASS Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition.
3+
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
3+
<script src="/resources/testharness.js"></script>
4+
<script src="/resources/testharnessreport.js"></script>
5+
<script src="../resources/utils.js"></script>
6+
<div id="target"></div>
7+
<script>
8+
9+
test(() => {
10+
const customProperty = generate_name();
11+
CSS.registerProperty({
12+
name: customProperty,
13+
syntax: "<number>",
14+
inherits: false,
15+
initialValue: "1"
16+
});
17+
18+
// Create transitions for our custom property with
19+
// a longer list of transition-duration values.
20+
const target = document.getElementById("target");
21+
target.style.transitionProperty = customProperty;
22+
target.style.transitionDuration = "100s, 200s";
23+
24+
// Trigger a style change by getting the custom property
25+
// value from the computed style.
26+
getComputedStyle(target).getPropertyValue(customProperty);
27+
28+
// Set a new value for the custom property, which will yield a
29+
// transition.
30+
target.style.setProperty(customProperty, "2");
31+
const animations = target.getAnimations();
32+
assert_equals(animations.length, 1, "A single transition was generated");
33+
34+
const transition = animations[0];
35+
assert_class_string(transition, "CSSTransition", "A CSSTransition is running");
36+
assert_equals(transition.transitionProperty, customProperty);
37+
}, 'Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition.');
38+
39+
</script>

Source/WebCore/platform/animation/Animation.cpp

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ Animation::Animation()
4848
, m_propertySet(false)
4949
, m_timingFunctionSet(false)
5050
, m_compositeOperationSet(false)
51+
, m_customOrUnknownPropertySet(false)
5152
, m_isNone(false)
5253
, m_delayFilled(false)
5354
, m_directionFilled(false)
@@ -85,6 +86,7 @@ Animation::Animation(const Animation& o)
8586
, m_propertySet(o.m_propertySet)
8687
, m_timingFunctionSet(o.m_timingFunctionSet)
8788
, m_compositeOperationSet(o.m_compositeOperationSet)
89+
, m_customOrUnknownPropertySet(o.m_customOrUnknownPropertySet)
8890
, m_isNone(o.m_isNone)
8991
, m_delayFilled(o.m_delayFilled)
9092
, m_directionFilled(o.m_directionFilled)
@@ -122,6 +124,7 @@ bool Animation::animationsMatch(const Animation& other, bool matchProperties) co
122124
&& m_nameSet == other.m_nameSet
123125
&& m_timingFunctionSet == other.m_timingFunctionSet
124126
&& m_compositeOperationSet == other.m_compositeOperationSet
127+
&& m_customOrUnknownPropertySet == other.m_customOrUnknownPropertySet
125128
&& m_isNone == other.m_isNone;
126129

127130
if (!result)

Source/WebCore/platform/animation/Animation.h

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ class Animation : public RefCounted<Animation> {
4949
bool isPropertySet() const { return m_propertySet; }
5050
bool isTimingFunctionSet() const { return m_timingFunctionSet; }
5151
bool isCompositeOperationSet() const { return m_compositeOperationSet; }
52+
bool isCustomOrUnknownPropertySet() const { return m_customOrUnknownPropertySet; }
5253

5354
// Flags this to be the special "none" animation (animation-name: none)
5455
bool isNoneAnimation() const { return m_isNone; }
@@ -62,7 +63,7 @@ class Animation : public RefCounted<Animation> {
6263
return !m_directionSet && !m_durationSet && !m_fillModeSet
6364
&& !m_nameSet && !m_playStateSet && !m_iterationCountSet
6465
&& !m_delaySet && !m_timingFunctionSet && !m_propertySet
65-
&& !m_isNone && !m_compositeOperationSet;
66+
&& !m_isNone && !m_compositeOperationSet && !m_customOrUnknownPropertySet;
6667
}
6768

6869
bool isEmptyOrZeroDuration() const
@@ -80,6 +81,7 @@ class Animation : public RefCounted<Animation> {
8081
void clearProperty() { m_propertySet = false; m_propertyFilled = false; }
8182
void clearTimingFunction() { m_timingFunctionSet = false; m_timingFunctionFilled = false; }
8283
void clearCompositeOperation() { m_compositeOperationSet = false; m_compositeOperationFilled = false; }
84+
void clearCustomOrUnknownProperty() { m_customOrUnknownPropertySet = false; }
8385

8486
void clearAll()
8587
{
@@ -93,6 +95,7 @@ class Animation : public RefCounted<Animation> {
9395
clearProperty();
9496
clearTimingFunction();
9597
clearCompositeOperation();
98+
clearCustomOrUnknownProperty();
9699
}
97100

98101
double delay() const { return m_delay; }
@@ -154,7 +157,7 @@ class Animation : public RefCounted<Animation> {
154157
}
155158
void setPlayState(AnimationPlayState d) { m_playState = static_cast<unsigned>(d); m_playStateSet = true; }
156159
void setProperty(TransitionProperty t) { m_property = t; m_propertySet = true; }
157-
void setCustomOrUnknownProperty(const String& property) { m_customOrUnknownProperty = property; }
160+
void setCustomOrUnknownProperty(const String& property) { m_customOrUnknownProperty = property; m_customOrUnknownPropertySet = true; }
158161
void setTimingFunction(RefPtr<Timin D742 gFunction>&& function) { m_timingFunction = WTFMove(function); m_timingFunctionSet = true; }
159162
void setDefaultTimingFunctionForKeyframes(RefPtr<TimingFunction>&& function) { m_defaultTimingFunctionForKeyframes = WTFMove(function); }
160163

@@ -169,6 +172,7 @@ class Animation : public RefCounted<Animation> {
169172
void fillProperty(TransitionProperty property) { setProperty(property); m_propertyFilled = true; }
170173
void fillTimingFunction(RefPtr<TimingFunction>&& timingFunction) { setTimingFunction(WTFMove(timingFunction)); m_timingFunctionFilled = true; }
171174
void fillCompositeOperation(CompositeOperation compositeOperation) { setCompositeOperation(compositeOperation); m_compositeOperationFilled = true; }
175+
void fillCustomOrUnknownProperty(const String& property) { setCustomOrUnknownProperty(property); }
172176

173177
bool isDelayFilled() const { return m_delayFilled; }
174178
bool isDirectionFilled() const { return m_directionFilled; }
@@ -226,6 +230,7 @@ class Animation : public RefCounted<Animation> {
226230
bool m_propertySet : 1;
227231
bool m_timingFunctionSet : 1;
228232
bool m_compositeOperationSet : 1;
233+
bool m_customOrUnknownPropertySet : 1;
229234

230235
bool m_isNone : 1;
231236

Source/WebCore/platform/animation/AnimationList.cpp

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ void AnimationList::fillUnsetProperties()
5858
FILL_UNSET_PROPERTY(isTimingFunctionSet, timingFunction, fillTimingFunction);
5959
FILL_UNSET_PROPERTY(isPropertySet, property, fillProperty);
6060
FILL_UNSET_PROPERTY(isCompositeOperationSet, compositeOperation, fillCompositeOperation);
61+
FILL_UNSET_PROPERTY(isCustomOrUnknownPropertySet, customOrUnknownProperty, fillCustomOrUnknownProperty);
6162
}
6263

6364
bool AnimationList::operator==(const AnimationList& other) const

0 commit comments

Comments
 (0)
0