mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 11:45:37 +00:00
9e5f85edc2
Differential Revision: https://phabricator.services.mozilla.com/D25003 --HG-- extra : rebase_source : 999373f16c816cdd0dd64b1cc3f9f3f30bb12003 extra : amend_source : 829c0fc25afc55d50b70aebc1f3b9f0e8f06c458
43 lines
888 B
HTML
43 lines
888 B
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<style>
|
|
@keyframes anim {
|
|
from { margin-left: 10em; }
|
|
to { margin-left: 10em; }
|
|
}
|
|
#target::marker {
|
|
content: 'marker';
|
|
}
|
|
#target.anim::marker {
|
|
animation: anim 100s infinite;
|
|
font-size: 10px;
|
|
}
|
|
#target.bigger-font::marker {
|
|
font-size: 20px;
|
|
}
|
|
#target {
|
|
display: list-item;
|
|
margin-left: 200px;
|
|
}
|
|
</style>
|
|
<div id="target"></div>
|
|
<script>
|
|
addEventListener('DOMContentLoaded', () => {
|
|
var target = document.getElementById('target');
|
|
|
|
// Start an animation on pseudo element.
|
|
target.classList.add('anim');
|
|
|
|
requestAnimationFrame(() => {
|
|
// The animation on pseudo element should be updated
|
|
// when the target element classes are modified.
|
|
target.classList.add('bigger-font');
|
|
|
|
requestAnimationFrame(() => {
|
|
document.documentElement.classList.remove('reftest-wait');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</html>
|