From 882ad4726e51b75c748e845c57b2520564e64602 Mon Sep 17 00:00:00 2001 From: Tim Ledbetter Date: Mon, 12 May 2025 16:16:22 +0100 Subject: [PATCH] LibWeb: Interpolate the `visibility` property correctly --- Libraries/LibWeb/CSS/Interpolation.cpp | 20 +++ .../animation/visibility-interpolation.txt | 140 ++++++++++++++++++ .../animation/visibility-interpolation.html | 70 +++++++++ 3 files changed, 230 insertions(+) create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.txt create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.html diff --git a/Libraries/LibWeb/CSS/Interpolation.cpp b/Libraries/LibWeb/CSS/Interpolation.cpp index 7d148e29141..0143a864716 100644 --- a/Libraries/LibWeb/CSS/Interpolation.cpp +++ b/Libraries/LibWeb/CSS/Interpolation.cpp @@ -169,6 +169,26 @@ ValueComparingRefPtr interpolate_property(DOM::Element& ele return interpolate_value(element, calculation_context, from_value, to_value, delta); } + // https://drafts.csswg.org/web-animations-1/#animating-visibility + if (property_id == PropertyID::Visibility) { + // For the visibility property, visible is interpolated as a discrete step where values of p between 0 and 1 map to visible and other values of p map to the closer endpoint. + // If neither value is visible, then discrete animation is used. + if (from->equals(to)) + return from; + + auto from_is_visible = from->to_keyword() == Keyword::Visible; + auto to_is_visible = to->to_keyword() == Keyword::Visible; + + if (from_is_visible || to_is_visible) { + if (delta <= 0) + return from; + if (delta >= 1) + return to; + return CSSKeywordValue::create(Keyword::Visible); + } + return delta >= 0.5f ? to : from; + } + if (property_id == PropertyID::Scale) return interpolate_scale(element, calculation_context, from, to, delta); diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.txt new file mode 100644 index 00000000000..ec369c381b1 --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.txt @@ -0,0 +1,140 @@ +Harness status: OK + +Found 134 tests + +128 Pass +6 Fail +Pass CSS Transitions: property from [visible] to [visible] at (-1) should be [visible] +Pass CSS Transitions: property from [visible] to [visible] at (0) should be [visible] +Pass CSS Transitions: property from [visible] to [visible] at (0.5) should be [visible] +Pass CSS Transitions: property from [visible] to [visible] at (1) should be [visible] +Pass CSS Transitions: property from [visible] to [visible] at (1.5) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [visible] at (-1) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [visible] at (0) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [visible] at (0.5) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [visible] at (1) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [visible] at (1.5) should be [visible] +Pass CSS Animations: property from [visible] to [visible] at (-1) should be [visible] +Pass CSS Animations: property from [visible] to [visible] at (0) should be [visible] +Pass CSS Animations: property from [visible] to [visible] at (0.5) should be [visible] +Pass CSS Animations: property from [visible] to [visible] at (1) should be [visible] +Pass CSS Animations: property from [visible] to [visible] at (1.5) should be [visible] +Pass Web Animations: property from [visible] to [visible] at (-1) should be [visible] +Pass Web Animations: property from [visible] to [visible] at (0) should be [visible] +Pass Web Animations: property from [visible] to [visible] at (0.5) should be [visible] +Pass Web Animations: property from [visible] to [visible] at (1) should be [visible] +Pass Web Animations: property from [visible] to [visible] at (1.5) should be [visible] +Pass CSS Transitions: property from [visible] to [hidden] at (-1) should be [visible] +Pass CSS Transitions: property from [visible] to [hidden] at (0) should be [visible] +Pass CSS Transitions: property from [visible] to [hidden] at (0.1) should be [visible] +Pass CSS Transitions: property from [visible] to [hidden] at (0.9) should be [visible] +Pass CSS Transitions: property from [visible] to [hidden] at (1) should be [hidden] +Pass CSS Transitions: property from [visible] to [hidden] at (1.5) should be [hidden] +Pass CSS Transitions with transition: all: property from [visible] to [hidden] at (-1) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [hidden] at (0) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [hidden] at (0.1) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [hidden] at (0.9) should be [visible] +Pass CSS Transitions with transition: all: property from [visible] to [hidden] at (1) should be [hidden] +Pass CSS Transitions with transition: all: property from [visible] to [hidden] at (1.5) should be [hidden] +Pass CSS Animations: property from [visible] to [hidden] at (-1) should be [visible] +Pass CSS Animations: property from [visible] to [hidden] at (0) should be [visible] +Pass CSS Animations: property from [visible] to [hidden] at (0.1) should be [visible] +Pass CSS Animations: property from [visible] to [hidden] at (0.9) should be [visible] +Pass CSS Animations: property from [visible] to [hidden] at (1) should be [hidden] +Pass CSS Animations: property from [visible] to [hidden] at (1.5) should be [hidden] +Pass Web Animations: property from [visible] to [hidden] at (-1) should be [visible] +Pass Web Animations: property from [visible] to [hidden] at (0) should be [visible] +Pass Web Animations: property from [visible] to [hidden] at (0.1) should be [visible] +Pass Web Animations: property from [visible] to [hidden] at (0.9) should be [visible] +Pass Web Animations: property from [visible] to [hidden] at (1) should be [hidden] +Pass Web Animations: property from [visible] to [hidden] at (1.5) should be [hidden] +Pass CSS Transitions: property from [hidden] to [visible] at (-1) should be [hidden] +Pass CSS Transitions: property from [hidden] to [visible] at (0) should be [hidden] +Pass CSS Transitions: property from [hidden] to [visible] at (0.1) should be [visible] +Pass CSS Transitions: property from [hidden] to [visible] at (0.9) should be [visible] +Pass CSS Transitions: property from [hidden] to [visible] at (1) should be [visible] +Pass CSS Transitions: property from [hidden] to [visible] at (1.5) should be [visible] +Pass CSS Transitions with transition: all: property from [hidden] to [visible] at (-1) should be [hidden] +Pass CSS Transitions with transition: all: property from [hidden] to [visible] at (0) should be [hidden] +Pass CSS Transitions with transition: all: property from [hidden] to [visible] at (0.1) should be [visible] +Pass CSS Transitions with transition: all: property from [hidden] to [visible] at (0.9) should be [visible] +Pass CSS Transitions with transition: all: property from [hidden] to [visible] at (1) should be [visible] +Pass CSS Transitions with transition: all: property from [hidden] to [visible] at (1.5) should be [visible] +Pass CSS Animations: property from [hidden] to [visible] at (-1) should be [hidden] +Pass CSS Animations: property from [hidden] to [visible] at (0) should be [hidden] +Pass CSS Animations: property from [hidden] to [visible] at (0.1) should be [visible] +Pass CSS Animations: property from [hidden] to [visible] at (0.9) should be [visible] +Pass CSS Animations: property from [hidden] to [visible] at (1) should be [visible] +Pass CSS Animations: property from [hidden] to [visible] at (1.5) should be [visible] +Pass Web Animations: property from [hidden] to [visible] at (-1) should be [hidden] +Pass Web Animations: property from [hidden] to [visible] at (0) should be [hidden] +Pass Web Animations: property from [hidden] to [visible] at (0.1) should be [visible] +Pass Web Animations: property from [hidden] to [visible] at (0.9) should be [visible] +Pass Web Animations: property from [hidden] to [visible] at (1) should be [visible] +Pass Web Animations: property from [hidden] to [visible] at (1.5) should be [visible] +Pass CSS Transitions: property from [collapse] to [visible] at (-1) should be [collapse] +Pass CSS Transitions: property from [collapse] to [visible] at (0) should be [collapse] +Pass CSS Transitions: property from [collapse] to [visible] at (0.1) should be [visible] +Pass CSS Transitions: property from [collapse] to [visible] at (0.9) should be [visible] +Pass CSS Transitions: property from [collapse] to [visible] at (1) should be [visible] +Pass CSS Transitions: property from [collapse] to [visible] at (1.5) should be [visible] +Pass CSS Transitions with transition: all: property from [collapse] to [visible] at (-1) should be [collapse] +Pass CSS Transitions with transition: all: property from [collapse] to [visible] at (0) should be [collapse] +Pass CSS Transitions with transition: all: property from [collapse] to [visible] at (0.1) should be [visible] +Pass CSS Transitions with transition: all: property from [collapse] to [visible] at (0.9) should be [visible] +Pass CSS Transitions with transition: all: property from [collapse] to [visible] at (1) should be [visible] +Pass CSS Transitions with transition: all: property from [collapse] to [visible] at (1.5) should be [visible] +Pass CSS Animations: property from [collapse] to [visible] at (-1) should be [collapse] +Pass CSS Animations: property from [collapse] to [visible] at (0) should be [collapse] +Pass CSS Animations: property from [collapse] to [visible] at (0.1) should be [visible] +Pass CSS Animations: property from [collapse] to [visible] at (0.9) should be [visible] +Pass CSS Animations: property from [collapse] to [visible] at (1) should be [visible] +Pass CSS Animations: property from [collapse] to [visible] at (1.5) should be [visible] +Pass Web Animations: property from [collapse] to [visible] at (-1) should be [collapse] +Pass Web Animations: property from [collapse] to [visible] at (0) should be [collapse] +Pass Web Animations: property from [collapse] to [visible] at (0.1) should be [visible] +Pass Web Animations: property from [collapse] to [visible] at (0.9) should be [visible] +Pass Web Animations: property from [collapse] to [visible] at (1) should be [visible] +Pass Web Animations: property from [collapse] to [visible] at (1.5) should be [visible] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [collapse] to [hidden] at (-0.3) should be [collapse] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [collapse] to [hidden] at (0) should be [collapse] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [collapse] to [hidden] at (0.3) should be [collapse] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [collapse] to [hidden] at (0.5) should be [hidden] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [collapse] to [hidden] at (0.6) should be [hidden] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [collapse] to [hidden] at (1) should be [hidden] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [collapse] to [hidden] at (1.5) should be [hidden] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [collapse] to [hidden] at (-0.3) should be [collapse] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [collapse] to [hidden] at (0) should be [collapse] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [collapse] to [hidden] at (0.3) should be [collapse] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [collapse] to [hidden] at (0.5) should be [hidden] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [collapse] to [hidden] at (0.6) should be [hidden] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [collapse] to [hidden] at (1) should be [hidden] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [collapse] to [hidden] at (1.5) should be [hidden] +Fail CSS Transitions: property from [collapse] to [hidden] at (-0.3) should be [hidden] +Fail CSS Transitions: property from [collapse] to [hidden] at (0) should be [hidden] +Fail CSS Transitions: property from [collapse] to [hidden] at (0.3) should be [hidden] +Pass CSS Transitions: property from [collapse] to [hidden] at (0.5) should be [hidden] +Pass CSS Transitions: property from [collapse] to [hidden] at (0.6) should be [hidden] +Pass CSS Transitions: property from [collapse] to [hidden] at (1) should be [hidden] +Pass CSS Transitions: property from [collapse] to [hidden] at (1.5) should be [hidden] +Fail CSS Transitions with transition: all: property from [collapse] to [hidden] at (-0.3) should be [hidden] +Fail CSS Transitions with transition: all: property from [collapse] to [hidden] at (0) should be [hidden] +Fail CSS Transitions with transition: all: property from [collapse] to [hidden] at (0.3) should be [hidden] +Pass CSS Transitions with transition: all: property from [collapse] to [hidden] at (0.5) should be [hidden] +Pass CSS Transitions with transition: all: property from [collapse] to [hidden] at (0.6) should be [hidden] +Pass CSS Transitions with transition: all: property from [collapse] to [hidden] at (1) should be [hidden] +Pass CSS Transitions with transition: all: property from [collapse] to [hidden] at (1.5) should be [hidden] +Pass CSS Animations: property from [collapse] to [hidden] at (-0.3) should be [collapse] +Pass CSS Animations: property from [collapse] to [hidden] at (0) should be [collapse] +Pass CSS Animations: property from [collapse] to [hidden] at (0.3) should be [collapse] +Pass CSS Animations: property from [collapse] to [hidden] at (0.5) should be [hidden] +Pass CSS Animations: property from [collapse] to [hidden] at (0.6) should be [hidden] +Pass CSS Animations: property from [collapse] to [hidden] at (1) should be [hidden] +Pass CSS Animations: property from [collapse] to [hidden] at (1.5) should be [hidden] +Pass Web Animations: property from [collapse] to [hidden] at (-0.3) should be [collapse] +Pass Web Animations: property from [collapse] to [hidden] at (0) should be [collapse] +Pass Web Animations: property from [collapse] to [hidden] at (0.3) should be [collapse] +Pass Web Animations: property from [collapse] to [hidden] at (0.5) should be [hidden] +Pass Web Animations: property from [collapse] to [hidden] at (0.6) should be [hidden] +Pass Web Animations: property from [collapse] to [hidden] at (1) should be [hidden] +Pass Web Animations: property from [collapse] to [hidden] at (1.5) should be [hidden] \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.html new file mode 100644 index 00000000000..a174a54baeb --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/CSS2/visufx/animation/visibility-interpolation.html @@ -0,0 +1,70 @@ + + +visibility interpolation + + + + + + + + + +