mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 19:04:45 +00:00
a09985ac81
This test passes both before and after the code changes in the following patch in this series. However, both tests fail if we try to expand variables in Servo_StyleSet_GetKeyframesForName. MozReview-Commit-ID: LHOsK39WDLq --HG-- extra : rebase_source : 225cfccbf439c35df943d0aed969825051354dec
59 lines
1.5 KiB
HTML
59 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Tests that animations respond to changes to variables</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../testcommon.js"></script>
|
|
<style>
|
|
:root {
|
|
--width: 100px;
|
|
}
|
|
.wider {
|
|
--width: 200px;
|
|
}
|
|
@keyframes widen {
|
|
to { margin-left: var(--width) }
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
|
|
test(() => {
|
|
const div = document.createElement('div');
|
|
document.body.append(div);
|
|
|
|
div.style.animation = 'widen step-start 100s';
|
|
assert_equals(getComputedStyle(div).marginLeft, '100px',
|
|
'Animation value before updating CSS variable');
|
|
|
|
div.classList.add('wider');
|
|
|
|
assert_equals(getComputedStyle(div).marginLeft, '200px',
|
|
'Animation value after updating CSS variable');
|
|
|
|
div.remove();
|
|
}, 'Animation reflects changes to custom properties');
|
|
|
|
test(() => {
|
|
const parent = document.createElement('div');
|
|
const child = document.createElement('div');
|
|
parent.append(child);
|
|
document.body.append(parent);
|
|
|
|
child.style.animation = 'widen step-start 100s';
|
|
assert_equals(getComputedStyle(child).marginLeft, '100px',
|
|
'Animation value before updating CSS variable');
|
|
|
|
parent.classList.add('wider');
|
|
|
|
assert_equals(getComputedStyle(child).marginLeft, '200px',
|
|
'Animation value after updating CSS variable');
|
|
|
|
parent.remove();
|
|
child.remove();
|
|
}, 'Animation reflect changes to custom properties on parent');
|
|
|
|
</script>
|
|
</body>
|