Claire Chambers
ec0f7f59ff
Automatic update from web-platform-tests Adjust css/css-display/animations/display-interpolation to spec Display animations involving display: none and discrete transitions on the parameter are now specified in CSS-Animations-2 and CSS-Display-4. This CL retrofits the old expectations to fit the new specified behavior. Bug: 520730008 Change-Id: Ife8bb783930196ea1584a3d23fa8e7d01db0ef37 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7923573 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Claire Chambers <clchambers@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1647161} -- wpt-commits: adafb8baf375820cff9515f7e4915795f3f4fee8 wpt-pr: 60649
56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<meta name="assert" content="display: none is animatable with a non-none underlying value">
|
|
<title>display interpolation</title>
|
|
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#display-prop">
|
|
<link rel="help" href="https://www.w3.org/TR/css-animations-2/#owning-element-section">
|
|
<meta name="assert" content="display supports animation">
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/interpolation-testcommon.js"></script>
|
|
|
|
<body>
|
|
<script>
|
|
/* none -> non-none: not allowed, since animations/transitions can't start when display is none. */
|
|
test_not_animatable({
|
|
property: 'display',
|
|
behavior: 'allow-discrete',
|
|
from: 'none',
|
|
to: 'flex',
|
|
underlying: 'none',
|
|
target_names: ['CSS Transitions']
|
|
});
|
|
/* non-none -> none: allowed. Value will remain non-none until transition finishes */
|
|
test_interpolation({
|
|
property: 'display',
|
|
behavior: 'allow-discrete',
|
|
from: 'flex',
|
|
to: 'none',
|
|
underlying: 'flex',
|
|
target_names: ['CSS Transitions']
|
|
}, [
|
|
{ at: -1, expect: "flex" },
|
|
{ at: 0, expect: "flex" },
|
|
{ at: 0.3, expect: "flex" },
|
|
{ at: 0.5, expect: "flex" },
|
|
{ at: 0.7, expect: "flex" }, /* prefers the non-none value */
|
|
{ at: 1, expect: "none" },
|
|
]);
|
|
test_interpolation({
|
|
property: 'display',
|
|
from: 'none',
|
|
to: 'flex',
|
|
underlying: 'block',
|
|
target_names: ['CSS Animations', 'Web Animations']
|
|
}, [
|
|
{ at: -1, expect: "none" },
|
|
{ at: 0, expect: "none" },
|
|
{ at: 0.3, expect: "flex" }, /* prefers the non-none value */
|
|
{ at: 0.5, expect: "flex" },
|
|
{ at: 1, expect: "flex" },
|
|
{ at: 2, expect: "flex" }
|
|
]);
|
|
</script>
|
|
</body>
|