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
32 lines
1.1 KiB
HTML
32 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Cascade: 'revert' in final keyframe of web animation</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>
|
|
<h1 id=h1></h1>
|
|
<h1 id=ref></h1>
|
|
<script>
|
|
test(function() {
|
|
let expected_lower = parseInt(getComputedStyle(ref).marginTop);
|
|
let expected_upper = expected_lower * 2;
|
|
|
|
h1.animate([
|
|
{ marginTop: `${expected_lower * 4}px` },
|
|
{ marginTop: `${expected_lower * 3}px` },
|
|
{ marginTop: `${expected_lower * 2}px` },
|
|
{ marginTop: 'revert' },
|
|
], {
|
|
duration: 4000,
|
|
delay: -3500,
|
|
}).pause();
|
|
|
|
let actual = parseInt(getComputedStyle(h1).marginTop);
|
|
|
|
// This test assumes that the UA style sheet sets a non-0px value on
|
|
// <h1> elements:
|
|
assert_not_equals(expected_lower, 0);
|
|
assert_not_equals(expected_upper, 0);
|
|
assert_between_exclusive(actual, expected_lower, expected_upper);
|
|
}, 'The revert keyword works in the final frame of a web animation');
|
|
</script>
|