From 03e34db9f827d6b3d240a0eb8b885c97212abf95 Mon Sep 17 00:00:00 2001 From: Tim Ledbetter Date: Mon, 12 May 2025 16:18:55 +0100 Subject: [PATCH] LibWeb: Interpolate the `content-visibility` property correctly --- Libraries/LibWeb/CSS/Interpolation.cpp | 22 +++ Libraries/LibWeb/CSS/Properties.json | 3 +- .../content-visibility-interpolation.txt | 136 ++++++++++++++++++ .../content-visibility-interpolation.html | 84 +++++++++++ 4 files changed, 243 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.txt create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.html diff --git a/Libraries/LibWeb/CSS/Interpolation.cpp b/Libraries/LibWeb/CSS/Interpolation.cpp index 0143a864716..1693eb473db 100644 --- a/Libraries/LibWeb/CSS/Interpolation.cpp +++ b/Libraries/LibWeb/CSS/Interpolation.cpp @@ -189,6 +189,28 @@ ValueComparingRefPtr interpolate_property(DOM::Element& ele return delta >= 0.5f ? to : from; } + // https://drafts.csswg.org/css-contain/#content-visibility-animation + if (property_id == PropertyID::ContentVisibility) { + // In general, the content-visibility property’s animation type is discrete. + // However, similar to interpolation of visibility, during interpolation between hidden and any other content-visibility value, + // p values between 0 and 1 map to the non-hidden value. + if (from->equals(to)) + return from; + + auto from_is_hidden = from->to_keyword() == Keyword::Hidden; + auto to_is_hidden = to->to_keyword() == Keyword::Hidden || to->to_keyword() == Keyword::Auto; + + if (from_is_hidden || to_is_hidden) { + auto non_hidden_value = from_is_hidden ? to : from; + if (delta <= 0) + return from; + if (delta >= 1) + return to; + return non_hidden_value; + } + return delta >= 0.5f ? to : from; + } + if (property_id == PropertyID::Scale) return interpolate_scale(element, calculation_context, from, to, delta); diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json index 0ecc2403b02..ba1a76a3ea3 100644 --- a/Libraries/LibWeb/CSS/Properties.json +++ b/Libraries/LibWeb/CSS/Properties.json @@ -1152,8 +1152,7 @@ ] }, "content-visibility": { - "animation-type": "none", - "__comment": "FIXME: Implement animation https://drafts.csswg.org/css-contain/#content-visibility-animation", + "animation-type": "custom", "inherited": false, "initial": "visible", "valid-types": [ diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.txt new file mode 100644 index 00000000000..3379f0f6dc2 --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.txt @@ -0,0 +1,136 @@ +Harness status: OK + +Found 130 tests + +124 Pass +6 Fail +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 with transition-behavior:allow-discrete: property from [auto] to [visible] at (-0.3) should be [auto] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [auto] to [visible] at (0) should be [auto] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [auto] to [visible] at (0.3) should be [auto] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [auto] to [visible] at (0.5) should be [visible] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [auto] to [visible] at (0.6) should be [visible] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [auto] to [visible] at (1) should be [visible] +Pass CSS Transitions with transition-behavior:allow-discrete: property from [auto] to [visible] at (1.5) should be [visible] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [auto] to [visible] at (-0.3) should be [auto] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [auto] to [visible] at (0) should be [auto] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [auto] to [visible] at (0.3) should be [auto] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [auto] to [visible] at (0.5) should be [visible] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [auto] to [visible] at (0.6) should be [visible] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [auto] to [visible] at (1) should be [visible] +Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property from [auto] to [visible] at (1.5) should be [visible] +Fail CSS Transitions: property from [auto] to [visible] at (-0.3) should be [visible] +Fail CSS Transitions: property from [auto] to [visible] at (0) should be [visible] +Fail CSS Transitions: property from [auto] to [visible] at (0.3) should be [visible] +Pass CSS Transitions: property from [auto] to [visible] at (0.5) should be [visible] +Pass CSS Transitions: property from [auto] to [visible] at (0.6) should be [visible] +Pass CSS Transitions: property from [auto] to [visible] at (1) should be [visible] +Pass CSS Transitions: property from [auto] to [visible] at (1.5) should be [visible] +Fail CSS Transitions with transition: all: property from [auto] to [visible] at (-0.3) should be [visible] +Fail CSS Transitions with transition: all: property from [auto] to [visible] at (0) should be [visible] +Fail CSS Transitions with transition: all: property from [auto] to [visible] at (0.3) should be [visible] +Pass CSS Transitions with transition: all: property from [auto] to [visible] at (0.5) should be [visible] +Pass CSS Transitions with transition: all: property from [auto] to [visible] at (0.6) should be [visible] +Pass CSS Transitions with transition: all: property from [auto] to [visible] at (1) should be [visible] +Pass CSS Transitions with transition: all: property from [auto] to [visible] at (1.5) should be [visible] +Pass CSS Animations: property from [auto] to [visible] at (-0.3) should be [auto] +Pass CSS Animations: property from [auto] to [visible] at (0) should be [auto] +Pass CSS Animations: property from [auto] to [visible] at (0.3) should be [auto] +Pass CSS Animations: property from [auto] to [visible] at (0.5) should be [visible] +Pass CSS Animations: property from [auto] to [visible] at (0.6) should be [visible] +Pass CSS Animations: property from [auto] to [visible] at (1) should be [visible] +Pass CSS Animations: property from [auto] to [visible] at (1.5) should be [visible] +Pass Web Animations: property from [auto] to [visible] at (-0.3) should be [auto] +Pass Web Animations: property from [auto] to [visible] at (0) should be [auto] +Pass Web Animations: property from [auto] to [visible] at (0.3) should be [auto] +Pass Web Animations: property from [auto] to [visible] at (0.5) should be [visible] +Pass Web Animations: property from [auto] to [visible] at (0.6) should be [visible] +Pass Web Animations: property from [auto] to [visible] at (1) should be [visible] +Pass Web Animations: property from [auto] to [visible] at (1.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 (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 [hidden] to [hidden] at (-1) should be [hidden] +Pass CSS Transitions: property from [hidden] to [hidden] at (0) should be [hidden] +Pass CSS Transitions: property from [hidden] to [hidden] at (0.5) should be [hidden] +Pass CSS Transitions: property from [hidden] to [hidden] at (1) should be [hidden] +Pass CSS Transitions: property from [hidden] to [hidden] at (1.5) should be [hidden] +Pass CSS Transitions with transition: all: property from [hidden] to [hidden] at (-1) should be [hidden] +Pass CSS Transitions with transition: all: property from [hidden] to [hidden] at (0) should be [hidden] +Pass CSS Transitions with transition: all: property from [hidden] to [hidden] at (0.5) should be [hidden] +Pass CSS Transitions with transition: all: property from [hidden] to [hidden] at (1) should be [hidden] +Pass CSS Transitions with transition: all: property from [hidden] to [hidden] at (1.5) should be [hidden] +Pass CSS Animations: property from [hidden] to [hidden] at (-1) should be [hidden] +Pass CSS Animations: property from [hidden] to [hidden] at (0) should be [hidden] +Pass CSS Animations: property from [hidden] to [hidden] at (0.5) should be [hidden] +Pass CSS Animations: property from [hidden] to [hidden] at (1) should be [hidden] +Pass CSS Animations: property from [hidden] to [hidden] at (1.5) should be [hidden] +Pass Web Animations: property from [hidden] to [hidden] at (-1) should be [hidden] +Pass Web Animations: property from [hidden] to [hidden] at (0) should be [hidden] +Pass Web Animations: property from [hidden] to [hidden] at (0.5) should be [hidden] +Pass Web Animations: property from [hidden] to [hidden] at (1) should be [hidden] +Pass Web Animations: property from [hidden] to [hidden] at (1.5) should be [hidden] \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.html new file mode 100644 index 00000000000..487c8527f1f --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/content-visibility/content-visibility-interpolation.html @@ -0,0 +1,84 @@ + + + + + + + + +