mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
6577b4717e
Automatic update from web-platform-tests Fix the test descriptions in animation-fill-mode-001/003-manual.html The css animation color's gradual changes in the tests only include the two colors, yellow and green, not blue. When the gradual color change is finished, the color goes back to blue. The test descriptions could confuse the tester running this test cases, this patch changes it. -- wpt-commits: d89f2fcb5a3848ab24801b1f3fcc144b785869fa wpt-pr: 19967 Differential Revision: https://phabricator.services.mozilla.com/D53526
45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Animations Test: animation-fill-mode - backwards</title>
|
|
<link rel="author" title="Intel" href="http://www.intel.com">
|
|
<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-07 -->
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-name">
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-duration">
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-delay">
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode">
|
|
<meta name="flags" content="animated">
|
|
<meta name="assert" content="When animation-fill-mode is set to backwards,
|
|
animation-delay is set a positive time offset,
|
|
and animation-direction is 'normal' or 'alternate-reverse',
|
|
animation will apply the from or 0% keyframe
|
|
that will start the first iteration.">
|
|
<style>
|
|
div {
|
|
animation-name: sample;
|
|
animation-duration: 5s;
|
|
animation-delay: 5s;
|
|
animation-fill-mode: backwards;
|
|
|
|
background-color: blue;
|
|
height: 100px;
|
|
width: 100px;
|
|
position: relative;
|
|
}
|
|
@keyframes sample {
|
|
from {
|
|
background-color: yellow;
|
|
}
|
|
to {
|
|
background-color: green;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<p>
|
|
Test passes if there is a filled color square with 'Filler Text',
|
|
whose color gradually changes in the order: YELLOW to GREEN.
|
|
After the animation is finished, the color goes back to BLUE.
|
|
</p>
|
|
<div>Filler Text</div>
|
|
</body>
|
|
|