mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-08 05:27:14 +09:00
LibWeb: Interpolate the content-visibility property correctly
This commit is contained in:
Tim Ledbetter
Sam Atkins
parent
882ad4726e
commit
03e34db9f8
Notes:
github-actions[bot]
2025-05-13 10:25:07 +00:00
Author: https://github.com/tcl3
Commit: 03e34db9f8
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4705
Reviewed-by: https://github.com/AtkinsSJ ✅
4 changed files with 243 additions and 2 deletions
|
|
@ -189,6 +189,28 @@ ValueComparingRefPtr<CSSStyleValue const> 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 130 tests
|
||||
|
||||
124 Pass
|
||||
6 Fail
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [hidden] at (-1) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [hidden] at (0) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [hidden] at (0.1) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [hidden] at (0.9) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [hidden] at (1) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [hidden] at (1.5) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [visible] at (-1) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [visible] at (0) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [visible] at (0.1) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [visible] at (0.9) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [visible] at (1) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <content-visibility> from [auto] to [visible] at (-0.3) should be [auto]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <content-visibility> from [auto] to [visible] at (0) should be [auto]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <content-visibility> from [auto] to [visible] at (0.3) should be [auto]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <content-visibility> from [auto] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <content-visibility> from [auto] to [visible] at (0.6) should be [visible]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <content-visibility> from [auto] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions with transition-behavior:allow-discrete: property <content-visibility> from [auto] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <content-visibility> from [auto] to [visible] at (-0.3) should be [auto]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <content-visibility> from [auto] to [visible] at (0) should be [auto]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <content-visibility> from [auto] to [visible] at (0.3) should be [auto]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <content-visibility> from [auto] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <content-visibility> from [auto] to [visible] at (0.6) should be [visible]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <content-visibility> from [auto] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <content-visibility> from [auto] to [visible] at (1.5) should be [visible]
|
||||
Fail CSS Transitions: property <content-visibility> from [auto] to [visible] at (-0.3) should be [visible]
|
||||
Fail CSS Transitions: property <content-visibility> from [auto] to [visible] at (0) should be [visible]
|
||||
Fail CSS Transitions: property <content-visibility> from [auto] to [visible] at (0.3) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [auto] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [auto] to [visible] at (0.6) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [auto] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [auto] to [visible] at (1.5) should be [visible]
|
||||
Fail CSS Transitions with transition: all: property <content-visibility> from [auto] to [visible] at (-0.3) should be [visible]
|
||||
Fail CSS Transitions with transition: all: property <content-visibility> from [auto] to [visible] at (0) should be [visible]
|
||||
Fail CSS Transitions with transition: all: property <content-visibility> from [auto] to [visible] at (0.3) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [auto] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [auto] to [visible] at (0.6) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [auto] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [auto] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [auto] to [visible] at (-0.3) should be [auto]
|
||||
Pass CSS Animations: property <content-visibility> from [auto] to [visible] at (0) should be [auto]
|
||||
Pass CSS Animations: property <content-visibility> from [auto] to [visible] at (0.3) should be [auto]
|
||||
Pass CSS Animations: property <content-visibility> from [auto] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [auto] to [visible] at (0.6) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [auto] to [visible] at (1) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [auto] to [visible] at (1.5) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [auto] to [visible] at (-0.3) should be [auto]
|
||||
Pass Web Animations: property <content-visibility> from [auto] to [visible] at (0) should be [auto]
|
||||
Pass Web Animations: property <content-visibility> from [auto] to [visible] at (0.3) should be [auto]
|
||||
Pass Web Animations: property <content-visibility> from [auto] to [visible] at (0.5) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [auto] to [visible] at (0.6) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [auto] to [visible] at (1) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [auto] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [visible] at (0) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [visible] at (0) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [visible] at (1) should be [visible]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [visible] at (0) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [visible] at (1) should be [visible]
|
||||
Pass CSS Animations: property <content-visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [visible] at (-1) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [visible] at (0) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [visible] at (0.5) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [visible] at (1) should be [visible]
|
||||
Pass Web Animations: property <content-visibility> from [visible] to [visible] at (1.5) should be [visible]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [hidden] at (-1) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [hidden] at (0) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [hidden] at (0.5) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [hidden] at (1) should be [hidden]
|
||||
Pass CSS Transitions: property <content-visibility> from [hidden] to [hidden] at (1.5) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [hidden] at (-1) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [hidden] at (0) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [hidden] at (0.5) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [hidden] at (1) should be [hidden]
|
||||
Pass CSS Transitions with transition: all: property <content-visibility> from [hidden] to [hidden] at (1.5) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [hidden] at (-1) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [hidden] at (0) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [hidden] at (0.5) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [hidden] at (1) should be [hidden]
|
||||
Pass CSS Animations: property <content-visibility> from [hidden] to [hidden] at (1.5) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [hidden] at (-1) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [hidden] at (0) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [hidden] at (0.5) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [hidden] at (1) should be [hidden]
|
||||
Pass Web Animations: property <content-visibility> from [hidden] to [hidden] at (1.5) should be [hidden]
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
const alwaysVisible = [
|
||||
{at: -1, expect: 'visible'},
|
||||
{at: 0, expect: 'visible'},
|
||||
{at: 0.1, expect: 'visible'},
|
||||
{at: 0.9, expect: 'visible'},
|
||||
{at: 1, expect: 'visible'},
|
||||
{at: 1.5, expect: 'visible'},
|
||||
];
|
||||
const alwaysHidden = [
|
||||
{at: -1, expect: 'hidden'},
|
||||
{at: 0, expect: 'hidden'},
|
||||
{at: 0.1, expect: 'hidden'},
|
||||
{at: 0.9, expect: 'hidden'},
|
||||
{at: 1, expect: 'hidden'},
|
||||
{at: 1.5, expect: 'hidden'},
|
||||
];
|
||||
|
||||
test_interpolation({
|
||||
property: 'content-visibility',
|
||||
behavior: 'allow-discrete',
|
||||
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: 'content-visibility',
|
||||
behavior: 'allow-discrete',
|
||||
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_no_interpolation({
|
||||
property: 'content-visibility',
|
||||
from: 'auto',
|
||||
to: 'visible'
|
||||
});
|
||||
|
||||
test_interpolation({
|
||||
property: 'content-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: 'content-visibility',
|
||||
from: 'hidden',
|
||||
to: 'hidden'
|
||||
}, [
|
||||
{at: -1, expect: 'hidden'},
|
||||
{at: 0, expect: 'hidden'},
|
||||
{at: 0.5, expect: 'hidden'},
|
||||
{at: 1, expect: 'hidden'},
|
||||
{at: 1.5, expect: 'hidden'},
|
||||
]);
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue