forked from mirrors/gecko-dev
2d35cff2f3
Automatic update from web-platform-tests Fix missing-values-*-keyframe These tests are not taking advantage of tools in the web-animations API. Modernized the implementation of the test and migrated to WPT. There is no reason these tests need to be pixel tests since we simply need to determine that the computed style is interpolated correctly for property values that are missing in the first or last keyframe. Bug: 1383194 Change-Id: I600eac2d31b6fc4def12f62518cf7af35225b0b4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4103740 Reviewed-by: Mustaq Ahmed <mustaq@chromium.org> Commit-Queue: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/main@{#1083190} -- wpt-commits: 8adf127d65cbca5895a4e665dcb9e763e79abc79 wpt-pr: 37485
84 lines
1.8 KiB
HTML
84 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>Missing properties in first keyframe</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
|
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect">
|
|
<meta name="assert"
|
|
content="CSS animation correctly interpolates from neutral keyframe">
|
|
<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">
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
left: 0;
|
|
background-color: green;
|
|
}
|
|
|
|
#box1 {
|
|
left: 200px;
|
|
animation: move-left 2s paused linear;
|
|
}
|
|
|
|
#box2 {
|
|
transform: translateX(200px);
|
|
animation: move-transform 2s paused linear;
|
|
}
|
|
|
|
@keyframes move-left {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
left: 0;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes move-transform {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="box" id="box1"></div>
|
|
<div class="box" id="box2"></div>
|
|
</body>
|
|
<script>
|
|
promise_test(async t => {
|
|
document.getAnimations().forEach(anim => {
|
|
anim.currentTime = 500;
|
|
});
|
|
assert_equals(getComputedStyle(box1).left, "100px");
|
|
assert_matrix_equals(
|
|
getComputedStyle(box2).transform,
|
|
'matrix(1, 0, 0, 1, 100, 0)');
|
|
}, 'Missing property values in the first keyframe are correctly ' +
|
|
'interpolated from a neutral keyframe value');
|
|
</script>
|
|
</html>
|