mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 05:39:41 +02:00
3fe6a3d038
Automatic update from web-platform-tests Let base style respond to font animations Whenever we are animating a property that affects the font, we must avoid the base computed style optimization. This is because the base style may contain em, ex (etc) units which needs to resolve against the font. Hence, set a flag when a font-affecting animation is applied. Bug: 437689 Change-Id: I8bd950a1df9c8e100c4ca2b7318b0389a2acfad0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2109694 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#752498} -- wpt-commits: d12a254011ec967f8f72ba5d380b932a2d7912e8 wpt-pr: 22331
75 lines
1.8 KiB
HTML
75 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<title>Test that non-animated style is responsive to animated properties</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations/">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
@keyframes font_size_animation {
|
|
from { font-size: 10px; }
|
|
to { font-size: 20px; }
|
|
}
|
|
@keyframes var_animation {
|
|
from { --x: 10px; }
|
|
to { --x: 20px; }
|
|
}
|
|
#targets > div {
|
|
animation-duration: 1000s;
|
|
animation-delay: -500s;
|
|
animation-timing-function: steps(2, end);
|
|
}
|
|
|
|
#target1 {
|
|
animation-name: font_size_animation;
|
|
font-size: 1px;
|
|
width: 1em;
|
|
}
|
|
#ref1 {
|
|
width: 15px;
|
|
}
|
|
|
|
#target2 {
|
|
animation-name: font_size_animation;
|
|
font-size: 1px;
|
|
width: 1ex;
|
|
}
|
|
#ref2 {
|
|
font-size: 15px;
|
|
width: 1ex;
|
|
}
|
|
|
|
#target3 {
|
|
animation-name: var_animation;
|
|
--x: 0px;
|
|
width: var(--x);
|
|
}
|
|
#ref3 {
|
|
width: 20px;
|
|
}
|
|
</style>
|
|
<div id="targets">
|
|
<div id="target1"></div>
|
|
<div id="target2"></div>
|
|
<div id="target3"></div>
|
|
</div>
|
|
<div id="refs">
|
|
<div id="ref1"></div>
|
|
<div id="ref2"></div>
|
|
<div id="ref3"></div>
|
|
</div>
|
|
<script>
|
|
|
|
// Test that the computed value of the given property is equal on
|
|
// 'target' and 'ref'.
|
|
function test_ref(target, ref, property, description) {
|
|
test(() => {
|
|
let actual = getComputedStyle(target).getPropertyValue(property);
|
|
let expected = getComputedStyle(ref).getPropertyValue(property);
|
|
assert_equals(actual, expected);
|
|
}, description);
|
|
}
|
|
|
|
test_ref(target1, ref1, 'width', 'em units respond to font-size animation');
|
|
test_ref(target2, ref2, 'width', 'ex units respond to font-size animation');
|
|
test_ref(target3, ref3, 'width', 'var() references respond to custom property animation');
|
|
|
|
</script>
|