mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-08 01:00:05 +00:00
LibWeb: Interpolate the visibility property correctly
This commit is contained in:
Tim Ledbetter
Sam Atkins
parent
f52df06a2a
commit
882ad4726e
Notes:
github-actions[bot]
2025-05-13 10:25:14 +00:00
Author: https://github.com/tcl3
Commit: 882ad4726e
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4705
Reviewed-by: https://github.com/AtkinsSJ ✅
3 changed files with 230 additions and 0 deletions
|
|
@ -169,6 +169,26 @@ ValueComparingRefPtr<CSSStyleValue const> interpolate_property(DOM::Element& ele
|
||||||
return interpolate_value(element, calculation_context, from_value, to_value, delta);
|
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)
|
if (property_id == PropertyID::Scale)
|
||||||
return interpolate_scale(element, calculation_context, from, to, delta);
|
return interpolate_scale(element, calculation_context, from, to, delta);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
Harness status: OK
|
||||||
|
|
||||||
|
Found 134 tests
|
||||||
|
|
||||||
|
128 Pass
|
||||||
|
6 Fail
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [visible] at (0) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [visible] at (0) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [visible] at (0) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [visible] at (0) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [visible] at (1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [visible] at (-1) should be [collapse]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [visible] at (0) should be [collapse]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [visible] at (-1) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [visible] at (0) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [visible] at (-1) should be [collapse]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [visible] at (0) should be [collapse]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [visible] at (1) should be [visible]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [visible] at (-1) should be [collapse]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [visible] at (0) should be [collapse]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [visible] at (0.1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [visible] at (0.9) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [visible] at (1) should be [visible]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [visible] at (1.5) should be [visible]
|
||||||
|
Pass CSS Transitions with transition-behavior:allow-discrete: property <visibility> from [collapse] to [hidden] at (-0.3) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition-behavior:allow-discrete: property <visibility> from [collapse] to [hidden] at (0) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition-behavior:allow-discrete: property <visibility> from [collapse] to [hidden] at (0.3) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition-behavior:allow-discrete: property <visibility> from [collapse] to [hidden] at (0.5) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition-behavior:allow-discrete: property <visibility> from [collapse] to [hidden] at (0.6) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition-behavior:allow-discrete: property <visibility> from [collapse] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition-behavior:allow-discrete: property <visibility> from [collapse] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <visibility> from [collapse] to [hidden] at (-0.3) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <visibility> from [collapse] to [hidden] at (0) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <visibility> from [collapse] to [hidden] at (0.3) should be [collapse]
|
||||||
|
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <visibility> from [collapse] to [hidden] at (0.5) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <visibility> from [collapse] to [hidden] at (0.6) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <visibility> from [collapse] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <visibility> from [collapse] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Fail CSS Transitions: property <visibility> from [collapse] to [hidden] at (-0.3) should be [hidden]
|
||||||
|
Fail CSS Transitions: property <visibility> from [collapse] to [hidden] at (0) should be [hidden]
|
||||||
|
Fail CSS Transitions: property <visibility> from [collapse] to [hidden] at (0.3) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [hidden] at (0.5) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [hidden] at (0.6) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Transitions: property <visibility> from [collapse] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Fail CSS Transitions with transition: all: property <visibility> from [collapse] to [hidden] at (-0.3) should be [hidden]
|
||||||
|
Fail CSS Transitions with transition: all: property <visibility> from [collapse] to [hidden] at (0) should be [hidden]
|
||||||
|
Fail CSS Transitions with transition: all: property <visibility> from [collapse] to [hidden] at (0.3) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [hidden] at (0.5) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [hidden] at (0.6) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Transitions with transition: all: property <visibility> from [collapse] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [hidden] at (-0.3) should be [collapse]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [hidden] at (0) should be [collapse]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [hidden] at (0.3) should be [collapse]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [hidden] at (0.5) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [hidden] at (0.6) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass CSS Animations: property <visibility> from [collapse] to [hidden] at (1.5) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [hidden] at (-0.3) should be [collapse]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [hidden] at (0) should be [collapse]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [hidden] at (0.3) should be [collapse]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [hidden] at (0.5) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [hidden] at (0.6) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [hidden] at (1) should be [hidden]
|
||||||
|
Pass Web Animations: property <visibility> from [collapse] to [hidden] at (1.5) should be [hidden]
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>visibility interpolation</title>
|
||||||
|
<link rel="help" href="https://www.w3.org/TR/CSS2/visufx.html#visibility">
|
||||||
|
<meta name="assert" content="visibility supports">
|
||||||
|
|
||||||
|
<script src="../../../../resources/testharness.js"></script>
|
||||||
|
<script src="../../../../resources/testharnessreport.js"></script>
|
||||||
|
<script src="../../../../css/support/interpolation-testcommon.js"></script>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
test_interpolation({
|
||||||
|
property: 'visibility',
|
||||||
|
from: 'visible',
|
||||||
|
to: 'visible'
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: 'visible'},
|
||||||
|
{at: 0, expect: 'visible'},
|
||||||
|
{at: 0.5, expect: 'visible'},
|
||||||
|
{at: 1, expect: 'visible'},
|
||||||
|
{at: 1.5, expect: 'visible'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'visibility',
|
||||||
|
from: 'visible',
|
||||||
|
to: 'hidden'
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: 'visible'},
|
||||||
|
{at: 0, expect: 'visible'},
|
||||||
|
{at: 0.1, expect: 'visible'},
|
||||||
|
{at: 0.9, expect: 'visible'},
|
||||||
|
{at: 1, expect: 'hidden'},
|
||||||
|
{at: 1.5, expect: 'hidden'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'visibility',
|
||||||
|
from: 'hidden',
|
||||||
|
to: 'visible'
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: 'hidden'},
|
||||||
|
{at: 0, expect: 'hidden'},
|
||||||
|
{at: 0.1, expect: 'visible'},
|
||||||
|
{at: 0.9, expect: 'visible'},
|
||||||
|
{at: 1, expect: 'visible'},
|
||||||
|
{at: 1.5, expect: 'visible'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_interpolation({
|
||||||
|
property: 'visibility',
|
||||||
|
from: 'collapse',
|
||||||
|
to: 'visible'
|
||||||
|
}, [
|
||||||
|
{at: -1, expect: 'collapse'},
|
||||||
|
{at: 0, expect: 'collapse'},
|
||||||
|
{at: 0.1, expect: 'visible'},
|
||||||
|
{at: 0.9, expect: 'visible'},
|
||||||
|
{at: 1, expect: 'visible'},
|
||||||
|
{at: 1.5, expect: 'visible'},
|
||||||
|
]);
|
||||||
|
|
||||||
|
test_no_interpolation({
|
||||||
|
property: 'visibility',
|
||||||
|
from: 'collapse',
|
||||||
|
to: 'hidden'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue