mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-28 11:49:44 +00:00
LibWeb: Implement the transition-behavior CSS property
This specifies whether transitions should be started for transitions whose animation behavior is discrete.
This commit is contained in:
Tim Ledbetter
Sam Atkins
parent
e57e38dafc
commit
542c3cbe51
Notes:
github-actions[bot]
2025-05-02 10:08:20 +00:00
Author: https://github.com/tcl3
Commit: 542c3cbe51
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4508
Reviewed-by: https://github.com/AtkinsSJ ✅
20 changed files with 289 additions and 47 deletions
|
|
@ -11,6 +11,7 @@
|
|||
#include <LibWeb/Animations/DocumentTimeline.h>
|
||||
#include <LibWeb/Animations/PseudoElementParsing.h>
|
||||
#include <LibWeb/CSS/CSSTransition.h>
|
||||
#include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/EasingStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
|
||||
#include <LibWeb/DOM/Document.h>
|
||||
|
|
@ -127,21 +128,23 @@ void Animatable::disassociate_with_animation(GC::Ref<Animation> animation)
|
|||
impl.associated_animations.remove_first_matching([&](auto element) { return animation == element; });
|
||||
}
|
||||
|
||||
void Animatable::add_transitioned_properties(Vector<Vector<CSS::PropertyID>> properties, CSS::StyleValueVector delays, CSS::StyleValueVector durations, CSS::StyleValueVector timing_functions)
|
||||
void Animatable::add_transitioned_properties(Vector<Vector<CSS::PropertyID>> properties, CSS::StyleValueVector delays, CSS::StyleValueVector durations, CSS::StyleValueVector timing_functions, CSS::StyleValueVector transition_behaviors)
|
||||
{
|
||||
auto& impl = ensure_impl();
|
||||
|
||||
VERIFY(properties.size() == delays.size());
|
||||
VERIFY(properties.size() == durations.size());
|
||||
VERIFY(properties.size() == timing_functions.size());
|
||||
VERIFY(properties.size() == transition_behaviors.size());
|
||||
|
||||
for (size_t i = 0; i < properties.size(); i++) {
|
||||
size_t index_of_this_transition = impl.transition_attributes.size();
|
||||
auto delay = delays[i]->is_time() ? delays[i]->as_time().time().to_milliseconds() : 0;
|
||||
auto duration = durations[i]->is_time() ? durations[i]->as_time().time().to_milliseconds() : 0;
|
||||
auto timing_function = timing_functions[i]->is_easing() ? timing_functions[i]->as_easing().function() : CSS::EasingStyleValue::CubicBezier::ease();
|
||||
auto transition_behavior = CSS::keyword_to_transition_behavior(transition_behaviors[i]->to_keyword()).value_or(CSS::TransitionBehavior::Normal);
|
||||
VERIFY(timing_functions[i]->is_easing());
|
||||
impl.transition_attributes.empend(delay, duration, timing_function);
|
||||
impl.transition_attributes.empend(delay, duration, timing_function, transition_behavior);
|
||||
|
||||
for (auto const& property : properties[i])
|
||||
impl.transition_attribute_indices.set(property, index_of_this_transition);
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ public:
|
|||
double delay;
|
||||
double duration;
|
||||
CSS::EasingStyleValue::Function timing_function;
|
||||
CSS::TransitionBehavior transition_behavior;
|
||||
};
|
||||
|
||||
virtual ~Animatable() = default;
|
||||
|
|
@ -56,7 +57,7 @@ public:
|
|||
GC::Ptr<CSS::CSSStyleDeclaration const> cached_transition_property_source() const;
|
||||
void set_cached_transition_property_source(GC::Ptr<CSS::CSSStyleDeclaration const> value);
|
||||
|
||||
void add_transitioned_properties(Vector<Vector<CSS::PropertyID>> properties, CSS::StyleValueVector delays, CSS::StyleValueVector durations, CSS::StyleValueVector timing_functions);
|
||||
void add_transitioned_properties(Vector<Vector<CSS::PropertyID>> properties, CSS::StyleValueVector delays, CSS::StyleValueVector durations, CSS::StyleValueVector timing_functions, CSS::StyleValueVector transition_behaviors);
|
||||
Optional<TransitionAttributes const&> property_transition_attributes(CSS::PropertyID) const;
|
||||
void set_transition(CSS::PropertyID, GC::Ref<CSS::CSSTransition>);
|
||||
void remove_transition(CSS::PropertyID);
|
||||
|
|
|
|||
|
|
@ -591,6 +591,10 @@
|
|||
"stroke-box",
|
||||
"view-box "
|
||||
],
|
||||
"transition-behavior": [
|
||||
"normal",
|
||||
"allow-discrete"
|
||||
],
|
||||
"unicode-bidi": [
|
||||
"bidi-override",
|
||||
"embed",
|
||||
|
|
|
|||
|
|
@ -177,13 +177,13 @@ ValueComparingRefPtr<CSSStyleValue const> interpolate_property(DOM::Element& ele
|
|||
}
|
||||
|
||||
// https://drafts.csswg.org/css-transitions/#transitionable
|
||||
bool property_values_are_transitionable(PropertyID property_id, CSSStyleValue const& old_value, CSSStyleValue const& new_value)
|
||||
bool property_values_are_transitionable(PropertyID property_id, CSSStyleValue const& old_value, CSSStyleValue const& new_value, TransitionBehavior transition_behavior)
|
||||
{
|
||||
// When comparing the before-change style and after-change style for a given property,
|
||||
// the property values are transitionable if they have an animation type that is neither not animatable nor discrete.
|
||||
|
||||
auto animation_type = animation_type_from_longhand_property(property_id);
|
||||
if (animation_type == AnimationType::None || animation_type == AnimationType::Discrete)
|
||||
if (animation_type == AnimationType::None || (transition_behavior != TransitionBehavior::AllowDiscrete && animation_type == AnimationType::Discrete))
|
||||
return false;
|
||||
|
||||
// FIXME: Even when a property is transitionable, the two values may not be. The spec uses the example of inset/non-inset shadows.
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
#pragma once
|
||||
|
||||
#include <LibWeb/CSS/CSSStyleValue.h>
|
||||
#include <LibWeb/CSS/Enums.h>
|
||||
#include <LibWeb/Forward.h>
|
||||
|
||||
namespace Web::CSS {
|
||||
|
|
@ -16,7 +17,7 @@ struct CalculationContext;
|
|||
ValueComparingRefPtr<CSSStyleValue const> interpolate_property(DOM::Element&, PropertyID, CSSStyleValue const& from, CSSStyleValue const& to, float delta);
|
||||
|
||||
// https://drafts.csswg.org/css-transitions/#transitionable
|
||||
bool property_values_are_transitionable(PropertyID, CSSStyleValue const& old_value, CSSStyleValue const& new_value);
|
||||
bool property_values_are_transitionable(PropertyID, CSSStyleValue const& old_value, CSSStyleValue const& new_value, TransitionBehavior transition_behavior);
|
||||
|
||||
NonnullRefPtr<CSSStyleValue const> interpolate_value(DOM::Element&, CalculationContext const&, CSSStyleValue const& from, CSSStyleValue const& to, float delta);
|
||||
NonnullRefPtr<CSSStyleValue const> interpolate_repeatable_list(DOM::Element&, CalculationContext const&, CSSStyleValue const& from, CSSStyleValue const& to, float delta);
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@
|
|||
"all-petite-caps",
|
||||
"all-scroll",
|
||||
"all-small-caps",
|
||||
"allow-discrete",
|
||||
"alpha",
|
||||
"alternate",
|
||||
"alternate-reverse",
|
||||
|
|
|
|||
|
|
@ -3724,7 +3724,7 @@ RefPtr<CSSStyleValue const> Parser::parse_transition_value(TokenStream<Component
|
|||
while (tokens.has_next_token()) {
|
||||
TransitionStyleValue::Transition transition;
|
||||
auto time_value_count = 0;
|
||||
|
||||
bool transition_behavior_found = false;
|
||||
while (tokens.has_next_token() && !tokens.next_token().is(Token::Type::Comma)) {
|
||||
if (auto maybe_time = parse_time(tokens); maybe_time.has_value()) {
|
||||
auto time = maybe_time.release_value();
|
||||
|
|
@ -3757,6 +3757,14 @@ RefPtr<CSSStyleValue const> Parser::parse_transition_value(TokenStream<Component
|
|||
continue;
|
||||
}
|
||||
|
||||
if (!transition_behavior_found && (tokens.peek_token().is_ident("normal"sv) || tokens.peek_token().is_ident("allow-discrete"sv))) {
|
||||
transition_behavior_found = true;
|
||||
auto ident = tokens.consume_a_token().token().ident();
|
||||
if (ident == "allow-discrete"sv)
|
||||
transition.transition_behavior = TransitionBehavior::AllowDiscrete;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (auto token = tokens.peek_token(); token.is_ident("all"sv)) {
|
||||
auto transition_keyword = parse_keyword_value(tokens);
|
||||
VERIFY(transition_keyword->to_keyword() == Keyword::All);
|
||||
|
|
@ -3775,11 +3783,11 @@ RefPtr<CSSStyleValue const> Parser::parse_transition_value(TokenStream<Component
|
|||
}
|
||||
|
||||
auto custom_ident = transition_property->custom_ident();
|
||||
if (auto property = property_id_from_string(custom_ident); property.has_value())
|
||||
if (auto property = property_id_from_string(custom_ident); property.has_value()) {
|
||||
transition.property_name = CustomIdentStyleValue::create(custom_ident);
|
||||
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
dbgln_if(CSS_PARSER_DEBUG, "Transition property has unexpected token \"{}\"", tokens.next_token().to_string());
|
||||
return {};
|
||||
|
|
|
|||
|
|
@ -2986,7 +2986,17 @@
|
|||
"transition-property",
|
||||
"transition-duration",
|
||||
"transition-timing-function",
|
||||
"transition-delay"
|
||||
"transition-delay",
|
||||
"transition-behavior"
|
||||
]
|
||||
},
|
||||
"transition-behavior": {
|
||||
"affects-layout": false,
|
||||
"animation-type": "none",
|
||||
"inherited": false,
|
||||
"initial": "normal",
|
||||
"valid-types": [
|
||||
"transition-behavior"
|
||||
]
|
||||
},
|
||||
"transition-delay": {
|
||||
|
|
|
|||
|
|
@ -913,22 +913,25 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
|
|||
set_longhand_property(CSS::PropertyID::TransitionDuration, TimeStyleValue::create(CSS::Time::make_seconds(0)));
|
||||
set_longhand_property(CSS::PropertyID::TransitionDelay, TimeStyleValue::create(CSS::Time::make_seconds(0)));
|
||||
set_longhand_property(CSS::PropertyID::TransitionTimingFunction, EasingStyleValue::create(EasingStyleValue::CubicBezier::ease()));
|
||||
set_longhand_property(CSS::PropertyID::TransitionBehavior, CSSKeywordValue::create(Keyword::Normal));
|
||||
return;
|
||||
}
|
||||
auto const& transitions = value.as_transition().transitions();
|
||||
Array<Vector<ValueComparingNonnullRefPtr<CSSStyleValue const>>, 4> transition_values;
|
||||
Array<Vector<ValueComparingNonnullRefPtr<CSSStyleValue const>>, 5> transition_values;
|
||||
for (auto const& transition : transitions) {
|
||||
transition_values[0].append(*transition.property_name);
|
||||
transition_values[1].append(transition.duration.as_style_value());
|
||||
transition_values[2].append(transition.delay.as_style_value());
|
||||
if (transition.easing)
|
||||
transition_values[3].append(*transition.easing);
|
||||
transition_values[4].append(CSSKeywordValue::create(to_keyword(transition.transition_behavior)));
|
||||
}
|
||||
|
||||
set_longhand_property(CSS::PropertyID::TransitionProperty, StyleValueList::create(move(transition_values[0]), StyleValueList::Separator::Comma));
|
||||
set_longhand_property(CSS::PropertyID::TransitionDuration, StyleValueList::create(move(transition_values[1]), StyleValueList::Separator::Comma));
|
||||
set_longhand_property(CSS::PropertyID::TransitionDelay, StyleValueList::create(move(transition_values[2]), StyleValueList::Separator::Comma));
|
||||
set_longhand_property(CSS::PropertyID::TransitionTimingFunction, StyleValueList::create(move(transition_values[3]), StyleValueList::Separator::Comma));
|
||||
set_longhand_property(CSS::PropertyID::TransitionBehavior, StyleValueList::create(move(transition_values[4]), StyleValueList::Separator::Comma));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -1371,8 +1374,11 @@ static void compute_transitioned_properties(ComputedProperties const& style, DOM
|
|||
auto timing_functions = normalize_transition_length_list(
|
||||
PropertyID::TransitionTimingFunction,
|
||||
[] { return EasingStyleValue::create(EasingStyleValue::CubicBezier::ease()); });
|
||||
auto transition_behaviors = normalize_transition_length_list(
|
||||
PropertyID::TransitionBehavior,
|
||||
[] { return CSSKeywordValue::create(Keyword::None); });
|
||||
|
||||
element.add_transitioned_properties(move(properties), move(delays), move(durations), move(timing_functions));
|
||||
element.add_transitioned_properties(move(properties), move(delays), move(durations), move(timing_functions), move(transition_behaviors));
|
||||
}
|
||||
|
||||
// https://drafts.csswg.org/css-transitions/#starting
|
||||
|
|
@ -1414,13 +1420,13 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_
|
|||
if (
|
||||
// - the element does not have a running transition for the property,
|
||||
(!has_running_transition) &&
|
||||
// - there is a matching transition-property value, and
|
||||
(matching_transition_properties.has_value()) &&
|
||||
// - the before-change style is different from the after-change style for that property, and the values for the property are transitionable,
|
||||
(!before_change_value.equals(after_change_value) && property_values_are_transitionable(property_id, before_change_value, after_change_value)) &&
|
||||
(!before_change_value.equals(after_change_value) && property_values_are_transitionable(property_id, before_change_value, after_change_value, matching_transition_properties->transition_behavior)) &&
|
||||
// - the element does not have a completed transition for the property
|
||||
// or the end value of the completed transition is different from the after-change style for the property,
|
||||
(!has_completed_transition || !existing_transition->transition_end_value()->equals(after_change_value)) &&
|
||||
// - there is a matching transition-property value, and
|
||||
(matching_transition_properties.has_value()) &&
|
||||
// - the combined duration is greater than 0s,
|
||||
(combined_duration(matching_transition_properties.value()) > 0)) {
|
||||
|
||||
|
|
@ -1480,7 +1486,7 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_
|
|||
// or if these two values are not transitionable,
|
||||
// then implementations must cancel the running transition.
|
||||
auto current_value = existing_transition->value_at_time(style_change_event_time);
|
||||
if (current_value->equals(after_change_value) || !property_values_are_transitionable(property_id, current_value, after_change_value)) {
|
||||
if (current_value->equals(after_change_value) || !property_values_are_transitionable(property_id, current_value, after_change_value, matching_transition_properties->transition_behavior)) {
|
||||
dbgln_if(CSS_TRANSITIONS_DEBUG, "Transition step 4.1");
|
||||
existing_transition->cancel();
|
||||
}
|
||||
|
|
@ -1489,7 +1495,7 @@ void StyleComputer::start_needed_transitions(ComputedProperties const& previous_
|
|||
// or if the current value of the property in the running transition is not transitionable with the value of the property in the after-change style,
|
||||
// then implementations must cancel the running transition.
|
||||
else if ((combined_duration(matching_transition_properties.value()) <= 0)
|
||||
|| !property_values_are_transitionable(property_id, current_value, after_change_value)) {
|
||||
|| !property_values_are_transitionable(property_id, current_value, after_change_value, matching_transition_properties->transition_behavior)) {
|
||||
dbgln_if(CSS_TRANSITIONS_DEBUG, "Transition step 4.2");
|
||||
existing_transition->cancel();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ String TransitionStyleValue::to_string(SerializationMode mode) const
|
|||
builder.append(", "sv);
|
||||
first = false;
|
||||
builder.appendff("{} {} {} {}", transition.property_name->to_string(mode), transition.duration, transition.easing->to_string(mode), transition.delay);
|
||||
if (transition.transition_behavior != TransitionBehavior::Normal)
|
||||
builder.appendff(" {}", CSS::to_string(transition.transition_behavior));
|
||||
}
|
||||
|
||||
return MUST(builder.to_string());
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ public:
|
|||
TimeOrCalculated duration { CSS::Time::make_seconds(0.0) };
|
||||
TimeOrCalculated delay { CSS::Time::make_seconds(0.0) };
|
||||
ValueComparingRefPtr<EasingStyleValue const> easing;
|
||||
TransitionBehavior transition_behavior { TransitionBehavior::Normal };
|
||||
|
||||
bool operator==(Transition const&) const = default;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -220,19 +220,20 @@ All properties associated with getComputedStyle(document.body):
|
|||
"217": "transform",
|
||||
"218": "transform-box",
|
||||
"219": "transform-origin",
|
||||
"220": "transition-delay",
|
||||
"221": "transition-duration",
|
||||
"222": "transition-property",
|
||||
"223": "transition-timing-function",
|
||||
"224": "translate",
|
||||
"225": "unicode-bidi",
|
||||
"226": "user-select",
|
||||
"227": "vertical-align",
|
||||
"228": "view-transition-name",
|
||||
"229": "width",
|
||||
"230": "x",
|
||||
"231": "y",
|
||||
"232": "z-index"
|
||||
"220": "transition-behavior",
|
||||
"221": "transition-delay",
|
||||
"222": "transition-duration",
|
||||
"223": "transition-property",
|
||||
"224": "transition-timing-function",
|
||||
"225": "translate",
|
||||
"226": "unicode-bidi",
|
||||
"227": "user-select",
|
||||
"228": "vertical-align",
|
||||
"229": "view-transition-name",
|
||||
"230": "width",
|
||||
"231": "x",
|
||||
"232": "y",
|
||||
"233": "z-index"
|
||||
}
|
||||
All properties associated with document.body.style by default:
|
||||
{}
|
||||
|
|
|
|||
|
|
@ -607,6 +607,8 @@ All supported properties and their default values exposed from CSSStylePropertie
|
|||
'transformOrigin': '50% 50%'
|
||||
'transform-origin': '50% 50%'
|
||||
'transition': 'all'
|
||||
'transitionBehavior': 'normal'
|
||||
'transition-behavior': 'normal'
|
||||
'transitionDelay': '0s'
|
||||
'transition-delay': '0s'
|
||||
'transitionDuration': '0s'
|
||||
|
|
|
|||
|
|
@ -218,6 +218,7 @@ top: auto
|
|||
transform: none
|
||||
transform-box: view-box
|
||||
transform-origin: 50% 50%
|
||||
transition-behavior: normal
|
||||
transition-delay: 0s
|
||||
transition-duration: 0s
|
||||
transition-property: all
|
||||
|
|
|
|||
|
|
@ -2,18 +2,17 @@ Harness status: OK
|
|||
|
||||
Found 66 tests
|
||||
|
||||
54 Pass
|
||||
12 Fail
|
||||
Fail CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (-0.3) should be [initial]
|
||||
Fail CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (0) should be [initial]
|
||||
Fail CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (0.3) should be [initial]
|
||||
66 Pass
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (-0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (0) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (0.5) should be [right]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (0.6) should be [right]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (1) should be [right]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <float> from [initial] to [right] at (1.5) should be [right]
|
||||
Fail CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (-0.3) should be [initial]
|
||||
Fail CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (0) should be [initial]
|
||||
Fail CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (-0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (0) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (0.5) should be [right]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (0.6) should be [right]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <float> from [initial] to [right] at (1) should be [right]
|
||||
|
|
@ -46,15 +45,15 @@ Pass Web Animations: property <float> from [initial] to [right] at (0.5) should
|
|||
Pass Web Animations: property <float> from [initial] to [right] at (0.6) should be [right]
|
||||
Pass Web Animations: property <float> from [initial] to [right] at (1) should be [right]
|
||||
Pass Web Animations: property <float> from [initial] to [right] at (1.5) should be [right]
|
||||
Fail CSS Transitions: property <float> from [left] to [right] at (-1) should be [left]
|
||||
Fail CSS Transitions: property <float> from [left] to [right] at (0) should be [left]
|
||||
Fail CSS Transitions: property <float> from [left] to [right] at (0.4) should be [left]
|
||||
Pass CSS Transitions: property <float> from [left] to [right] at (-1) should be [left]
|
||||
Pass CSS Transitions: property <float> from [left] to [right] at (0) should be [left]
|
||||
Pass CSS Transitions: property <float> from [left] to [right] at (0.4) should be [left]
|
||||
Pass CSS Transitions: property <float> from [left] to [right] at (0.5) should be [right]
|
||||
Pass CSS Transitions: property <float> from [left] to [right] at (1) should be [right]
|
||||
Pass CSS Transitions: property <float> from [left] to [right] at (1.5) should be [right]
|
||||
Fail CSS Transitions with transition: all: property <float> from [left] to [right] at (-1) should be [left]
|
||||
Fail CSS Transitions with transition: all: property <float> from [left] to [right] at (0) should be [left]
|
||||
Fail CSS Transitions with transition: all: property <float> from [left] to [right] at (0.4) should be [left]
|
||||
Pass CSS Transitions with transition: all: property <float> from [left] to [right] at (-1) should be [left]
|
||||
Pass CSS Transitions with transition: all: property <float> from [left] to [right] at (0) should be [left]
|
||||
Pass CSS Transitions with transition: all: property <float> from [left] to [right] at (0.4) should be [left]
|
||||
Pass CSS Transitions with transition: all: property <float> from [left] to [right] at (0.5) should be [right]
|
||||
Pass CSS Transitions with transition: all: property <float> from [left] to [right] at (1) should be [right]
|
||||
Pass CSS Transitions with transition: all: property <float> from [left] to [right] at (1.5) should be [right]
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 197 tests
|
||||
Found 198 tests
|
||||
|
||||
187 Pass
|
||||
188 Pass
|
||||
10 Fail
|
||||
Pass accent-color
|
||||
Pass border-collapse
|
||||
|
|
@ -188,6 +188,7 @@ Pass text-overflow
|
|||
Pass top
|
||||
Fail transform
|
||||
Pass transform-box
|
||||
Pass transition-behavior
|
||||
Pass transition-delay
|
||||
Pass transition-duration
|
||||
Pass transition-property
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 84 tests
|
||||
|
||||
84 Pass
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-direction> from [initial] to [column] at (-0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-direction> from [initial] to [column] at (0) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-direction> from [initial] to [column] at (0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-direction> from [initial] to [column] at (0.5) should be [column]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-direction> from [initial] to [column] at (0.6) should be [column]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-direction> from [initial] to [column] at (1) should be [column]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-direction> from [initial] to [column] at (1.5) should be [column]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-direction> from [initial] to [column] at (-0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-direction> from [initial] to [column] at (0) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-direction> from [initial] to [column] at (0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-direction> from [initial] to [column] at (0.5) should be [column]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-direction> from [initial] to [column] at (0.6) should be [column]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-direction> from [initial] to [column] at (1) should be [column]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-direction> from [initial] to [column] at (1.5) should be [column]
|
||||
Pass CSS Transitions: property <flex-direction> from [initial] to [column] at (-0.3) should be [column]
|
||||
Pass CSS Transitions: property <flex-direction> from [initial] to [column] at (0) should be [column]
|
||||
Pass CSS Transitions: property <flex-direction> from [initial] to [column] at (0.3) should be [column]
|
||||
Pass CSS Transitions: property <flex-direction> from [initial] to [column] at (0.5) should be [column]
|
||||
Pass CSS Transitions: property <flex-direction> from [initial] to [column] at (0.6) should be [column]
|
||||
Pass CSS Transitions: property <flex-direction> from [initial] to [column] at (1) should be [column]
|
||||
Pass CSS Transitions: property <flex-direction> from [initial] to [column] at (1.5) should be [column]
|
||||
Pass CSS Transitions with transition: all: property <flex-direction> from [initial] to [column] at (-0.3) should be [column]
|
||||
Pass CSS Transitions with transition: all: property <flex-direction> from [initial] to [column] at (0) should be [column]
|
||||
Pass CSS Transitions with transition: all: property <flex-direction> from [initial] to [column] at (0.3) should be [column]
|
||||
Pass CSS Transitions with transition: all: property <flex-direction> from [initial] to [column] at (0.5) should be [column]
|
||||
Pass CSS Transitions with transition: all: property <flex-direction> from [initial] to [column] at (0.6) should be [column]
|
||||
Pass CSS Transitions with transition: all: property <flex-direction> from [initial] to [column] at (1) should be [column]
|
||||
Pass CSS Transitions with transition: all: property <flex-direction> from [initial] to [column] at (1.5) should be [column]
|
||||
Pass CSS Animations: property <flex-direction> from [initial] to [column] at (-0.3) should be [initial]
|
||||
Pass CSS Animations: property <flex-direction> from [initial] to [column] at (0) should be [initial]
|
||||
Pass CSS Animations: property <flex-direction> from [initial] to [column] at (0.3) should be [initial]
|
||||
Pass CSS Animations: property <flex-direction> from [initial] to [column] at (0.5) should be [column]
|
||||
Pass CSS Animations: property <flex-direction> from [initial] to [column] at (0.6) should be [column]
|
||||
Pass CSS Animations: property <flex-direction> from [initial] to [column] at (1) should be [column]
|
||||
Pass CSS Animations: property <flex-direction> from [initial] to [column] at (1.5) should be [column]
|
||||
Pass Web Animations: property <flex-direction> from [initial] to [column] at (-0.3) should be [initial]
|
||||
Pass Web Animations: property <flex-direction> from [initial] to [column] at (0) should be [initial]
|
||||
Pass Web Animations: property <flex-direction> from [initial] to [column] at (0.3) should be [initial]
|
||||
Pass Web Animations: property <flex-direction> from [initial] to [column] at (0.5) should be [column]
|
||||
Pass Web Animations: property <flex-direction> from [initial] to [column] at (0.6) should be [column]
|
||||
Pass Web Animations: property <flex-direction> from [initial] to [column] at (1) should be [column]
|
||||
Pass Web Animations: property <flex-direction> from [initial] to [column] at (1.5) should be [column]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (-0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0.5) should be [wrap]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0.6) should be [wrap]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (1) should be [wrap]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (1.5) should be [wrap]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (-0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0.3) should be [initial]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0.5) should be [wrap]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (0.6) should be [wrap]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (1) should be [wrap]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <flex-wrap> from [initial] to [wrap] at (1.5) should be [wrap]
|
||||
Pass CSS Transitions: property <flex-wrap> from [initial] to [wrap] at (-0.3) should be [wrap]
|
||||
Pass CSS Transitions: property <flex-wrap> from [initial] to [wrap] at (0) should be [wrap]
|
||||
Pass CSS Transitions: property <flex-wrap> from [initial] to [wrap] at (0.3) should be [wrap]
|
||||
Pass CSS Transitions: property <flex-wrap> from [initial] to [wrap] at (0.5) should be [wrap]
|
||||
Pass CSS Transitions: property <flex-wrap> from [initial] to [wrap] at (0.6) should be [wrap]
|
||||
Pass CSS Transitions: property <flex-wrap> from [initial] to [wrap] at (1) should be [wrap]
|
||||
Pass CSS Transitions: property <flex-wrap> from [initial] to [wrap] at (1.5) should be [wrap]
|
||||
Pass CSS Transitions with transition: all: property <flex-wrap> from [initial] to [wrap] at (-0.3) should be [wrap]
|
||||
Pass CSS Transitions with transition: all: property <flex-wrap> from [initial] to [wrap] at (0) should be [wrap]
|
||||
Pass CSS Transitions with transition: all: property <flex-wrap> from [initial] to [wrap] at (0.3) should be [wrap]
|
||||
Pass CSS Transitions with transition: all: property <flex-wrap> from [initial] to [wrap] at (0.5) should be [wrap]
|
||||
Pass CSS Transitions with transition: all: property <flex-wrap> from [initial] to [wrap] at (0.6) should be [wrap]
|
||||
Pass CSS Transitions with transition: all: property <flex-wrap> from [initial] to [wrap] at (1) should be [wrap]
|
||||
Pass CSS Transitions with transition: all: property <flex-wrap> from [initial] to [wrap] at (1.5) should be [wrap]
|
||||
Pass CSS Animations: property <flex-wrap> from [initial] to [wrap] at (-0.3) should be [initial]
|
||||
Pass CSS Animations: property <flex-wrap> from [initial] to [wrap] at (0) should be [initial]
|
||||
Pass CSS Animations: property <flex-wrap> from [initial] to [wrap] at (0.3) should be [initial]
|
||||
Pass CSS Animations: property <flex-wrap> from [initial] to [wrap] at (0.5) should be [wrap]
|
||||
Pass CSS Animations: property <flex-wrap> from [initial] to [wrap] at (0.6) should be [wrap]
|
||||
Pass CSS Animations: property <flex-wrap> from [initial] to [wrap] at (1) should be [wrap]
|
||||
Pass CSS Animations: property <flex-wrap> from [initial] to [wrap] at (1.5) should be [wrap]
|
||||
Pass Web Animations: property <flex-wrap> from [initial] to [wrap] at (-0.3) should be [initial]
|
||||
Pass Web Animations: property <flex-wrap> from [initial] to [wrap] at (0) should be [initial]
|
||||
Pass Web Animations: property <flex-wrap> from [initial] to [wrap] at (0.3) should be [initial]
|
||||
Pass Web Animations: property <flex-wrap> from [initial] to [wrap] at (0.5) should be [wrap]
|
||||
Pass Web Animations: property <flex-wrap> from [initial] to [wrap] at (0.6) should be [wrap]
|
||||
Pass Web Animations: property <flex-wrap> from [initial] to [wrap] at (1) should be [wrap]
|
||||
Pass Web Animations: property <flex-wrap> from [initial] to [wrap] at (1.5) should be [wrap]
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 28 tests
|
||||
|
||||
22 Pass
|
||||
6 Fail
|
||||
Pass e.style['transition-behavior'] = "normal" should set the property value
|
||||
Pass Property transition-behavior value 'normal'
|
||||
Pass e.style['transition-behavior'] = "allow-discrete" should set the property value
|
||||
Pass Property transition-behavior value 'allow-discrete'
|
||||
Pass e.style['transition'] = "allow-discrete display" should set the property value
|
||||
Pass Property transition value 'allow-discrete display'
|
||||
Pass e.style['transition'] = "allow-discrete display 3s" should set the property value
|
||||
Pass Property transition value 'allow-discrete display 3s'
|
||||
Pass e.style['transition'] = "allow-discrete display 3s 1s" should set the property value
|
||||
Pass Property transition value 'allow-discrete display 3s 1s'
|
||||
Pass e.style['transition'] = "allow-discrete display 3s ease-in-out" should set the property value
|
||||
Pass Property transition value 'allow-discrete display 3s ease-in-out'
|
||||
Pass e.style['transition'] = "allow-discrete display 3s ease-in-out 1s" should set the property value
|
||||
Pass Property transition value 'allow-discrete display 3s ease-in-out 1s'
|
||||
Fail e.style['transition'] = "asdf display" should not set the property value
|
||||
Fail e.style['transition'] = "display asdf" should not set the property value
|
||||
Pass e.style['transition'] = "display allow-discrete 3s ease-in-out 1s" should set the property value
|
||||
Pass e.style['transition'] = "display 3s allow-discrete ease-in-out 1s" should set the property value
|
||||
Pass e.style['transition'] = "display 3s ease-in-out allow-discrete 1s" should set the property value
|
||||
Pass e.style['transition'] = "display 3s ease-in-out 1s allow-discrete" should set the property value
|
||||
Pass Property transition value 'display allow-discrete 3s ease-in-out 1s'
|
||||
Pass Property transition value 'display 3s allow-discrete ease-in-out 1s'
|
||||
Pass Property transition value 'display 3s ease-in-out allow-discrete 1s'
|
||||
Pass Property transition value 'display 3s ease-in-out 1s allow-discrete'
|
||||
Fail e.style['transition'] = "allow-discrete display, normal opacity, color" should set the property value
|
||||
Fail Property transition value 'allow-discrete display, normal opacity, color'
|
||||
Fail e.style['transition'] = "normal opacity, color, allow-discrete display" should set the property value
|
||||
Fail Property transition value 'normal opacity, color, allow-discrete display'
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_no_interpolation({
|
||||
property: 'flex-direction',
|
||||
from: 'initial',
|
||||
to: 'column'
|
||||
});
|
||||
|
||||
test_no_interpolation({
|
||||
property: 'flex-wrap',
|
||||
from: 'initial',
|
||||
to: 'wrap'
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/8857">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_valid_value('transition-behavior', 'normal');
|
||||
test_computed_value('transition-behavior', 'normal');
|
||||
|
||||
test_valid_value('transition-behavior', 'allow-discrete');
|
||||
test_computed_value('transition-behavior', 'allow-discrete');
|
||||
|
||||
test_valid_value('transition', 'allow-discrete display', 'display allow-discrete');
|
||||
test_computed_value('transition', 'allow-discrete display', 'display allow-discrete');
|
||||
|
||||
test_valid_value('transition', 'allow-discrete display 3s', 'display 3s allow-discrete');
|
||||
test_computed_value('transition', 'allow-discrete display 3s', 'display 3s allow-discrete');
|
||||
|
||||
test_valid_value('transition', 'allow-discrete display 3s 1s', 'display 3s 1s allow-discrete');
|
||||
test_computed_value('transition', 'allow-discrete display 3s 1s', 'display 3s 1s allow-discrete');
|
||||
|
||||
test_valid_value('transition', 'allow-discrete display 3s ease-in-out', 'display 3s ease-in-out allow-discrete');
|
||||
test_computed_value('transition', 'allow-discrete display 3s ease-in-out', 'display 3s ease-in-out allow-discrete');
|
||||
|
||||
test_valid_value('transition', 'allow-discrete display 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_computed_value('transition', 'allow-discrete display 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
|
||||
test_invalid_value('transition', 'asdf display');
|
||||
test_invalid_value('transition', 'display asdf');
|
||||
|
||||
// Putting "discrete" anywhere in the shorthand should still work
|
||||
test_valid_value('transition', 'display allow-discrete 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_valid_value('transition', 'display 3s allow-discrete ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_valid_value('transition', 'display 3s ease-in-out allow-discrete 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_valid_value('transition', 'display 3s ease-in-out 1s allow-discrete', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_computed_value('transition', 'display allow-discrete 3s ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_computed_value('transition', 'display 3s allow-discrete ease-in-out 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_computed_value('transition', 'display 3s ease-in-out allow-discrete 1s', 'display 3s ease-in-out 1s allow-discrete');
|
||||
test_computed_value('transition', 'display 3s ease-in-out 1s allow-discrete', 'display 3s ease-in-out 1s allow-discrete');
|
||||
|
||||
// Serialization with multiple shorthands, including different order
|
||||
test_valid_value('transition',
|
||||
'allow-discrete display, normal opacity, color',
|
||||
'display allow-discrete, opacity, color');
|
||||
test_computed_value('transition',
|
||||
'allow-discrete display, normal opacity, color',
|
||||
'display allow-discrete, opacity, color');
|
||||
test_valid_value('transition',
|
||||
'normal opacity, color, allow-discrete display',
|
||||
'opacity, color, display allow-discrete');
|
||||
test_computed_value('transition',
|
||||
'normal opacity, color, allow-discrete display',
|
||||
'opacity, color, display allow-discrete');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue