mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-01 13:49:16 +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);
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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