mirror of
https://github.com/servo/servo.git
synced 2025-06-26 18:14:34 +01:00
42 lines
1.3 KiB
HTML
42 lines
1.3 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>Changing the underlying value of an animated property with implicit keyframes</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations/">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/testcommon.js"></script>
|
|
<style>
|
|
|
|
@keyframes implicit-from {
|
|
to { margin-left: 100px }
|
|
}
|
|
|
|
@keyframes implicit-to {
|
|
from { margin-left: 100px }
|
|
}
|
|
|
|
</style>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
const implicit_keyframe_test = (animationName, offset) => {
|
|
test(t => {
|
|
const div = addDiv(t);
|
|
|
|
// Set up animation to be paused and be at its mid-way point through easing.
|
|
div.style.animation = `${animationName} 10s paused steps(2, start)`;
|
|
const animation = div.getAnimations()[0];
|
|
|
|
assert_equals(getComputedStyle(div).marginLeft, "50px", "Computed style before changing the underlying style");
|
|
|
|
// Change the underlying value.
|
|
div.style.marginLeft = "200px";
|
|
assert_equals(getComputedStyle(div).marginLeft, "150px", "Computed style after changing the underlying style");
|
|
}, `Changing the underlying value of an animated property with an implicit ${offset}% keyframe`);
|
|
};
|
|
|
|
implicit_keyframe_test("implicit-from", "0");
|
|
implicit_keyframe_test("implicit-to", "100");
|
|
|
|
</script>
|