2011-06-13 15:36:13 +00:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
2020-04-23 17:23:18 +00:00
|
|
|
<title>Test of animation-play-state</title>
|
2011-06-13 15:36:13 +00:00
|
|
|
<style type="text/css" media="screen">
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#box {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0px;
|
|
|
|
|
top: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
width: 100px;
|
|
|
|
|
background-color: red;
|
|
|
|
|
margin: 0;
|
2020-04-23 17:23:18 +00:00
|
|
|
animation-duration: 500ms;
|
|
|
|
|
animation-direction: normal;
|
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
animation-name: "move1";
|
2011-06-13 15:36:13 +00:00
|
|
|
}
|
2020-04-23 17:23:18 +00:00
|
|
|
|
|
|
|
|
@keyframes move1 {
|
2020-03-18 15:59:03 +00:00
|
|
|
from { margin-left: 0px; }
|
|
|
|
|
to { margin-left: 200px; }
|
2011-06-13 15:36:13 +00:00
|
|
|
}
|
|
|
|
|
</style>
|
2020-04-23 17:23:18 +00:00
|
|
|
<script src="../resources/testharness.js"></script>
|
|
|
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
|
|
|
<script src="resources/animation-test.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="box"></div>
|
|
|
|
|
<script>
|
|
|
|
|
async_test(async t => {
|
|
|
|
|
const delay = 100;
|
2011-06-13 15:36:13 +00:00
|
|
|
|
2020-04-23 17:23:18 +00:00
|
|
|
const test = new AnimationTest({
|
|
|
|
|
target: document.getElementById("box"),
|
|
|
|
|
styleExtractor: style => parseFloat(style.marginLeft)
|
|
|
|
|
});
|
2011-06-13 15:36:13 +00:00
|
|
|
|
2020-04-23 17:23:18 +00:00
|
|
|
// Record two computed values after the specified delay each.
|
|
|
|
|
await test.recordValueAfterRunningFor(delay);
|
|
|
|
|
await test.recordValueAfterRunningFor(delay);
|
2011-06-13 15:36:13 +00:00
|
|
|
|
2020-04-23 17:23:18 +00:00
|
|
|
// We'll now pause the animation using the CSS property "animation-play-state".
|
|
|
|
|
box.style.animationPlayState = "paused";
|
2011-06-13 15:36:13 +00:00
|
|
|
|
2020-04-23 17:23:18 +00:00
|
|
|
// And now we'll record values after the specified delay each and check that those are the same.
|
|
|
|
|
const initialPausedValue = await test.valueAfterWaitingFor(delay);
|
|
|
|
|
const currentPausedValue = await test.valueAfterWaitingFor(delay);
|
|
|
|
|
assert_equals(initialPausedValue, currentPausedValue, "Values recorded while paused are the same.");
|
|
|
|
|
|
|
|
|
|
// Finally, check the values recorded earlier in the test.
|
|
|
|
|
test.checkRecordedValues();
|
|
|
|
|
|
|
|
|
|
t.done();
|
|
|
|
|
}, `Pausing an animation using the animation-play-state property stops animating styles.`);
|
|
|
|
|
</script>
|
2011-06-13 15:36:13 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
