Euclid Ye
a1993f4507
Automatic update from web-platform-tests Add step-position animation test for `jump-*` keywords Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com> -- Add new test to `WEB_FEATURES` Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com> -- Use scripted test instead of reftest Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com> -- Use plain `width` instead of `@property --width` Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com> -- wpt-commits: 131814298305bcdfe24bb81b9755ff6299400816, 481586f3e2bd4a5629106e6fa53704c4e2ca51b9, 8b1643db7e3be27f108623225b1e46617b9d3c36, d494a7633c191018d62a6030c57452918012b26a wpt-pr: 58352
48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Animations Test: animation-timing-function steps(3, jump-both)</title>
|
|
<link rel="author" title="Euclid Ye" href="mailto:yezhizhenjiakang@gmail.com">
|
|
<link rel="help" href="https://github.com/servo/servo/issues/43060">
|
|
<link rel="help" href="https://drafts.csswg.org/css-easing/#typedef-step-position">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
|
|
<style>
|
|
@keyframes step-anim {
|
|
0% {
|
|
width: 0px;
|
|
}
|
|
|
|
100% {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.test {
|
|
width: 10px;
|
|
height: 20px;
|
|
background: green;
|
|
margin-bottom: 5px;
|
|
animation: step-anim 3s steps(3, jump-both) paused;
|
|
animation-delay: calc(var(--at) * -1s);
|
|
}
|
|
</style>
|
|
|
|
<div class="test" style="--at: 0.0" data-expected-width="25"></div>
|
|
<div class="test" style="--at: 0.9" data-expected-width="25"></div>
|
|
|
|
<div class="test" style="--at: 1.0" data-expected-width="50"></div>
|
|
<div class="test" style="--at: 1.9" data-expected-width="50"></div>
|
|
|
|
|
|
<div class="test" style="--at: 2.0" data-expected-width="75"></div>
|
|
<div class="test" style="--at: 2.9" data-expected-width="75"></div>
|
|
|
|
<div class="test" style="--at: 3.0" data-expected-width="10"></div>
|
|
|
|
|
|
<script>
|
|
checkLayout(".test");
|
|
</script>
|