mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
0b5807bc62
The only fishy bit is the animation stuff. In particular, there are two places where we just mint the revert behavior: * When serializing web-animations keyframes (the custom properties stuff in declaration_block.rs). That codepath is already not sound and I wanted to get rid of it in bug 1501530, but what do I know. * When getting an animation value from a property declaration. At that point we no longer have the CSS rules that apply to the element to compute the right revert value handy. It'd also use the wrong style anyway, I think, given the way StyleBuilder::for_animation works. We _could_ probably get them out of somewhere, but it seems like a whole lot of code reinventing the wheel which is probably not useful, and that Blink and WebKit just cannot implement either since they don't have a rule tree, so it just doesn't seem worth the churn. The custom properties code looks a bit different in order to minimize hash lookups in the common case. FWIW, `revert` for custom properties doesn't seem very useful either, but oh well. Differential Revision: https://phabricator.services.mozilla.com/D21877 --HG-- extra : moz-landing-system : lando
29 lines
1.1 KiB
HTML
29 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Cascade: 'revert' keyword in transition</title>
|
|
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
|
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
html, body { margin: 0 }
|
|
h1 {
|
|
margin: 0;
|
|
transition: margin 10s;
|
|
transition-delay: -5s; /* So we can expect it to be half-way the transition when toggling the property */
|
|
}
|
|
</style>
|
|
<h1>This is a header that should get some margin</h1>
|
|
<script>
|
|
test(function() {
|
|
const el = document.querySelector("h1");
|
|
const cs = getComputedStyle(el);
|
|
assert_equals(cs.marginTop, "0px", "Margin before transition");
|
|
el.style.margin = "revert";
|
|
const midTransition = cs.marginTop;
|
|
assert_not_equals(midTransition, "0px", "Margin mid transition");
|
|
el.style.transition = "none";
|
|
assert_not_equals(cs.marginTop, midTransition, "Default margin");
|
|
}, "revert works with transitions");
|
|
</script>
|