mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
68 lines
1.7 KiB
HTML
68 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Animations: adjust value of CSS variable used in 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 anim {
|
|
from { margin-left: var(--margin-left) }
|
|
to { margin-left: calc(var(--margin-left) * 2) }
|
|
}
|
|
|
|
</style>
|
|
<div id="log"></div>
|
|
<script>
|
|
|
|
test(t => {
|
|
const div = addDiv(t);
|
|
div.style.setProperty('--margin-left', '100px');
|
|
|
|
div.style.animation = 'anim 1s linear';
|
|
const animation = div.getAnimations()[0];
|
|
animation.currentTime = 500;
|
|
|
|
assert_equals(
|
|
getComputedStyle(div).marginLeft,
|
|
'150px',
|
|
'Animated value before updating variable'
|
|
);
|
|
|
|
div.style.setProperty('--margin-left', '200px');
|
|
|
|
assert_equals(
|
|
getComputedStyle(div).marginLeft,
|
|
'300px',
|
|
'Animated value after updating variable'
|
|
);
|
|
}, 'Animations reflect changes to variables on element');
|
|
|
|
test(t => {
|
|
const parentDiv = addDiv(t);
|
|
const div = addDiv(t);
|
|
parentDiv.appendChild(div);
|
|
parentDiv.style.setProperty('--margin-left', '100px');
|
|
|
|
div.style.animation = 'anim 1s linear';
|
|
const animation = div.getAnimations()[0];
|
|
animation.currentTime = 500;
|
|
|
|
assert_equals(
|
|
getComputedStyle(div).marginLeft,
|
|
'150px',
|
|
'Animated value before updating variable'
|
|
);
|
|
|
|
parentDiv.style.setProperty('--margin-left', '200px');
|
|
|
|
assert_equals(
|
|
getComputedStyle(div).marginLeft,
|
|
'300px',
|
|
'Animated value after updating variable'
|
|
);
|
|
}, 'Animations reflect changes to variables on parent element');
|
|
|
|
|
|
</script>
|