Simon Wülker
184be89658
Automatic update from web-platform-tests Add web platform test Signed-off-by: Simon Wülker <simon.wuelker@arcor.de> -- Update test Signed-off-by: Simon Wülker <simon.wuelker@arcor.de> -- wpt-commits: 0d065e96158670e0e77b75af2358f05f2b041159, fa633138c6347f2403421d8b6f851e6ed416ce09 wpt-pr: 58663
51 lines
1.7 KiB
HTML
51 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Missing properties in middle keyframes</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations/#keyframes">
|
|
<link rel="author" title="Simon Wülker" href="simon.wuelker@arcor.de">
|
|
<meta name="assert" content="CSS animation correctly when some keyframes don't declare all properties">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<style type="text/css" media="screen">
|
|
@keyframes move-left {
|
|
0% {
|
|
margin-left: 0px;
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
// We evaluate the state of the animation here
|
|
}
|
|
75% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
margin-left: 100px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box" id="box1"></div>
|
|
<script>
|
|
promise_test(async t => {
|
|
box1.style.animation = "move-left 1s -10s linear 0.5 normal forwards paused";
|
|
assert_equals(getComputedStyle(box1).opacity, "0.5");
|
|
assert_equals(getComputedStyle(box1).marginLeft, "50px");
|
|
}, "Animation interpolates correctly when some keyframes don't declare all values");
|
|
</script>
|
|
</body>
|
|
</html>
|