mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
696be4b62a
Automatic update from web-platform-tests Support 'revert' in @keyframes Implementing the base functionality for this is just a matter of resolving the CSSRevertValue using the StyleCascade. However, the existence of the base computed style optimization makes things more complicated, as we can't use this optimization if 'revert' exists in a keyframe. (We don't even match selectors when that optimization is in use, so we wouldn't know what to revert to). In order to fix that, it's necessary to know if an ongoing animation contains a 'revert' or not, and if so disable the optimization in that case. This CL also adds a ConversionChecker for 'revert', which covers the (very) edge case of an extension dynamically changing what is reverted to in the user origin. In MaybeConvertCustomPropertyDeclaration, it was difficult to get the necessary behavior for RuntimeEnabledFeatures::CSSCascadeEnabled() while also leaving the non-cascade path intact. Therefore I re- implemented that function as a "top-level branch" on CSSCascadeEnabled(), which leads to some duplication. Hopefully that's OK since we're anyway going to remove the non-cascade path soon. Bug: 579788, 1068515 Change-Id: I8cbe267b75658ace3f566638bb6ecf10027bdcf9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132249 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#758578} -- wpt-commits: 82072a4112db895f0351f409b0944ec61cd9669d wpt-pr: 22696
34 lines
1.1 KiB
HTML
34 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Cascade: 'revert' in keyframe animations on identical elements</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default">
|
|
<link rel="help" href="https://crbug.com/1065387">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
@keyframes test {
|
|
from { margin-top: revert; }
|
|
to { margin-top: 100px; }
|
|
}
|
|
.anim {
|
|
margin-top: 0px;
|
|
animation: test linear 1s paused;
|
|
}
|
|
</style>
|
|
<h1 class="anim"></h1>
|
|
<h1 class="anim"></h1>
|
|
<h1 class="anim"></h1>
|
|
<h1 id=ref></h1>
|
|
<script>
|
|
test(function() {
|
|
// This querySelectorAll includes #ref, but that's OK.
|
|
let targets = document.querySelectorAll('h1');
|
|
for (let t of targets) {
|
|
let actual = getComputedStyle(t).marginTop;
|
|
let expected = getComputedStyle(ref).marginTop;
|
|
// This test assumes that the UA style sheet sets a non-0px value on
|
|
// <h1> elements:
|
|
assert_not_equals(expected, '0px');
|
|
assert_equals(actual, expected);
|
|
}
|
|
}, 'A @keyframe animation with revert works when applied to multiple identical elements');
|
|
</script>
|