Commit 9e135e3c authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Commit Bot

Add WPT coverage for simultaneous font-size/width/<length> animation

This is the "Keyframe Animation Inconsistency" described in the
initial StyleCascade design doc [1] (see Appendix).

This was fixed at some point during the StyleCascade work, probably
when interpolations started using the same StyleCascade instance
as the main declarations.

The test only asserts equality between the standard and custom property
cases, while ignoring absolute values, as browser disagree wildly on
what that value should be at the moment [2].

[1] https://docs.google.com/document/d/1HrmPmcQBTUMouqQQG3Kww43I5aFW9-Q9tr-DEKZk09I
[2] https://github.com/w3c/csswg-drafts/issues/3751

Change-Id: I1447aea439fe60cce1d280b0310a0983e71155b1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150432Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#759618}
parent ebc9c7d9
<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3751">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
CSS.registerProperty({
name: '--length',
syntax: '<length>',
initialValue: '0px',
inherits: false
});
</script>
<style>
@keyframes font_size_animation {
from {
font-size: 10px;
width: 10em;
--length: 10em;
}
to {
font-size: 20px;
width: 20em;
--length: 20em;
}
}
#target1 {
font-size: 1px;
animation: font_size_animation 10s -5s linear paused;
}
</style>
<div id=target1></div>
<script>
test(function() {
// At the time of writing, the correct (absolute) answer is not
// yet defined. However, whatever the correct answer is, there should
// be no difference in 'width' and a custom property registered with
// "<length>".
//
// See https://github.com/w3c/csswg-drafts/issues/3751
assert_equals(getComputedStyle(target1).getPropertyValue('width'),
getComputedStyle(target1).getPropertyValue('--length'));
}, 'Animating font-size handled identically for standard and custom properties');
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment