Tests/LibWeb: Import a test from wpt/css-animation
This commit is contained in:
Lucas CHOLLET
Andreas Kling
parent
43c30e4f7b
commit
d268df747f
Notes:
github-actions[bot]
2024-12-30 10:05:48 +00:00
Author: https://github.com/LucasChollet Commit: https://github.com/LadybirdBrowser/ladybird/commit/d268df747f5 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3066
3 changed files with 488 additions and 0 deletions
|
|
@ -0,0 +1,14 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 8 tests
|
||||
|
||||
4 Pass
|
||||
4 Fail
|
||||
Fail Setting a null effect on a running animation fires an animationend event
|
||||
Pass Replacing an animation's effect with an effect that targets a different property should update both properties
|
||||
Pass Replacing an animation's effect with a shorter one that should have already finished, the animation finishes immediately
|
||||
Pass A play-pending animation's effect whose effect is replaced still exits the pending state
|
||||
Fail CSS animation events are dispatched at the original element even after setting an effect with a different target element
|
||||
Pass After replacing a finished animation's effect with a longer one it fires an animationstart event
|
||||
Fail Setting animation-composition sets the composite property on the effect
|
||||
Fail Replacing the effect of a CSSAnimation causes subsequent changes to corresponding animation-* properties to be ignored
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSAnimation.effect</title>
|
||||
<meta name="timeout" content="long">
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from {
|
||||
margin-left: 0px;
|
||||
}
|
||||
to {
|
||||
margin-left: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 100s';
|
||||
|
||||
const watcher = new EventWatcher(t, div, [ 'animationend',
|
||||
'animationcancel' ],
|
||||
fastEventsTimeout);
|
||||
const animation = div.getAnimations()[0];
|
||||
await animation.ready;
|
||||
|
||||
animation.currentTime = 50 * MS_PER_SEC;
|
||||
animation.effect = null;
|
||||
assert_equals(animation.playState, 'finished');
|
||||
assert_equals(getComputedStyle(div).marginLeft, '0px');
|
||||
await watcher.wait_for('animationend');
|
||||
}, 'Setting a null effect on a running animation fires an animationend event');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
await animation.ready;
|
||||
|
||||
animation.currentTime = 50 * MS_PER_SEC;
|
||||
animation.effect = new KeyframeEffect(div,
|
||||
{ left: [ '0px' , '100px'] },
|
||||
100 * MS_PER_SEC);
|
||||
assert_equals(getComputedStyle(div).marginLeft, '0px');
|
||||
assert_equals(getComputedStyle(div).left, '50px');
|
||||
}, 'Replacing an animation\'s effect with an effect that targets a different ' +
|
||||
'property should update both properties');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
await animation.ready;
|
||||
|
||||
animation.currentTime = 50 * MS_PER_SEC;
|
||||
animation.effect = new KeyframeEffect(div,
|
||||
{ left: [ '0px' , '100px'] },
|
||||
20 * MS_PER_SEC);
|
||||
assert_equals(animation.playState, 'finished');
|
||||
}, 'Replacing an animation\'s effect with a shorter one that should have ' +
|
||||
'already finished, the animation finishes immediately');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_true(animation.pending);
|
||||
|
||||
animation.effect = new KeyframeEffect(div,
|
||||
{ left: [ '0px' , '100px'] },
|
||||
100 * MS_PER_SEC);
|
||||
assert_true(animation.pending);
|
||||
|
||||
await animation.ready;
|
||||
|
||||
assert_false(animation.pending);
|
||||
}, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
|
||||
'the pending state');
|
||||
|
||||
promise_test(async t => {
|
||||
const div1 = addDiv(t);
|
||||
const div2 = addDiv(t);
|
||||
|
||||
const watcher1 = new EventWatcher(t, div1, 'animationstart',
|
||||
fastEventsTimeout);
|
||||
// Watch |div2| as well to ensure it does *not* get events.
|
||||
const watcher2 = new EventWatcher(t, div2, 'animationstart');
|
||||
|
||||
div1.style.animation = 'anim 100s';
|
||||
|
||||
const animation = div1.getAnimations()[0];
|
||||
animation.effect = new KeyframeEffect(div2,
|
||||
{ left: [ '0px', '100px' ] },
|
||||
100 * MS_PER_SEC);
|
||||
|
||||
await watcher1.wait_for('animationstart');
|
||||
|
||||
assert_equals(animation.effect.target, div2);
|
||||
|
||||
// Then wait a couple of frames and check that no event was dispatched.
|
||||
await waitForAnimationFrames(2);
|
||||
}, 'CSS animation events are dispatched at the original element even after'
|
||||
+ ' setting an effect with a different target element');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
const watcher = new EventWatcher(t, div, [ 'animationstart',
|
||||
'animationend',
|
||||
'animationcancel' ],
|
||||
fastEventsTimeout);
|
||||
div.style.animation = 'anim 100s';
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.finish();
|
||||
|
||||
await watcher.wait_for([ 'animationstart', 'animationend' ]);
|
||||
// Set a longer effect
|
||||
animation.effect = new KeyframeEffect(div,
|
||||
{ left: [ '0px', '100px' ] },
|
||||
200 * MS_PER_SEC);
|
||||
await watcher.wait_for('animationstart');
|
||||
}, 'After replacing a finished animation\'s effect with a longer one ' +
|
||||
'it fires an animationstart event');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 100s';
|
||||
div.style.animationComposition = 'add';
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(animation.effect.composite, 'add');
|
||||
}, 'Setting animation-composition sets the composite property on the effect');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// Create custom keyframes so we can tweak them
|
||||
const stylesheet = document.styleSheets[0];
|
||||
const keyframes = '@keyframes anim-custom { to { left: 100px } }';
|
||||
const ruleIndex = stylesheet.insertRule(keyframes, 0);
|
||||
const keyframesRule = stylesheet.cssRules[ruleIndex];
|
||||
|
||||
t.add_cleanup(function() {
|
||||
stylesheet.deleteRule(ruleIndex);
|
||||
});
|
||||
|
||||
div.style.animation = 'anim-custom 100s';
|
||||
|
||||
// Replace the effect
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.effect = new KeyframeEffect(
|
||||
div,
|
||||
{ left: '200px' },
|
||||
200 * MS_PER_SEC
|
||||
);
|
||||
|
||||
// Update the timing properties
|
||||
div.style.animationDuration = '4s';
|
||||
div.style.animationIterationCount = '6';
|
||||
div.style.animationDirection = 'reverse';
|
||||
div.style.animationDelay = '8s';
|
||||
div.style.animationFillMode = 'both';
|
||||
div.style.animationPlayState = 'paused';
|
||||
div.style.animationComposition = 'add';
|
||||
|
||||
// Update the keyframes
|
||||
keyframesRule.deleteRule(0);
|
||||
keyframesRule.appendRule('to { left: 300px }');
|
||||
|
||||
// Check nothing (except the play state) changed
|
||||
assert_equals(
|
||||
animation.effect.getTiming().duration,
|
||||
200 * MS_PER_SEC,
|
||||
'duration should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().iterations,
|
||||
1,
|
||||
'iterations should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().direction,
|
||||
'normal',
|
||||
'direction should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().delay,
|
||||
0,
|
||||
'delay should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().fill,
|
||||
'auto',
|
||||
'fill should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getKeyframes()[0].left,
|
||||
'200px',
|
||||
'keyframes should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.composite,
|
||||
'replace',
|
||||
'composite should be the value set by the API'
|
||||
);
|
||||
|
||||
// Unlike the other properties animation-play-state maps to the Animation
|
||||
// not the KeyframeEffect so it should be overridden.
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'play state should be the value set by style'
|
||||
);
|
||||
}, 'Replacing the effect of a CSSAnimation causes subsequent changes to'
|
||||
+ ' corresponding animation-* properties to be ignored');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,249 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
* http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Use this variable if you specify duration or some other properties
|
||||
* for script animation.
|
||||
* E.g., div.animate({ opacity: [0, 1] }, 100 * MS_PER_SEC);
|
||||
*
|
||||
* NOTE: Creating animations with short duration may cause intermittent
|
||||
* failures in asynchronous test. For example, the short duration animation
|
||||
* might be finished when animation.ready has been fulfilled because of slow
|
||||
* platforms or busyness of the main thread.
|
||||
* Setting short duration to cancel its animation does not matter but
|
||||
* if you don't want to cancel the animation, consider using longer duration.
|
||||
*/
|
||||
const MS_PER_SEC = 1000;
|
||||
|
||||
/* The recommended minimum precision to use for time values[1].
|
||||
*
|
||||
* [1] https://drafts.csswg.org/web-animations/#precision-of-time-values
|
||||
*/
|
||||
var TIME_PRECISION = 0.0005; // ms
|
||||
|
||||
/*
|
||||
* Allow implementations to substitute an alternative method for comparing
|
||||
* times based on their precision requirements.
|
||||
*/
|
||||
function assert_times_equal(actual, expected, description) {
|
||||
assert_approx_equals(actual, expected, TIME_PRECISION * 2, description);
|
||||
}
|
||||
|
||||
/*
|
||||
* Compare a time value based on its precision requirements with a fixed value.
|
||||
*/
|
||||
function assert_time_equals_literal(actual, expected, description) {
|
||||
assert_approx_equals(actual, expected, TIME_PRECISION, description);
|
||||
}
|
||||
|
||||
/*
|
||||
* Compare two keyframes
|
||||
*/
|
||||
function assert_frames_equal(actual, expected, name) {
|
||||
// TODO: Make this skip the 'composite' member when it is not specified in
|
||||
// `expected` or when the implementation does not support it.
|
||||
assert_array_equals(
|
||||
Object.keys(actual).sort(),
|
||||
Object.keys(expected).sort(),
|
||||
`properties on ${name} should match`
|
||||
);
|
||||
|
||||
// Iterates sorted keys to ensure stable failures.
|
||||
for (const prop of Object.keys(actual).sort()) {
|
||||
if (
|
||||
// 'offset' can be null
|
||||
(prop === 'offset' && typeof actual[prop] === 'number') ||
|
||||
prop === 'computedOffset'
|
||||
) {
|
||||
assert_approx_equals(
|
||||
actual[prop],
|
||||
expected[prop],
|
||||
0.00001,
|
||||
"value for '" + prop + "' on " + name
|
||||
);
|
||||
} else {
|
||||
assert_equals(
|
||||
actual[prop],
|
||||
expected[prop],
|
||||
`value for '${prop}' on ${name} should match`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Compare two lists of keyframes
|
||||
*/
|
||||
function assert_frame_lists_equal(actual, expected) {
|
||||
assert_equals(
|
||||
actual.length,
|
||||
expected.length,
|
||||
'Number of keyframes should match'
|
||||
);
|
||||
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
assert_frames_equal(actual[i], expected[i], `Keyframe #${i}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends an element to the document body.
|
||||
*
|
||||
* @param t The testharness.js Test object. If provided, this will be used
|
||||
* to register a cleanup callback to remove the div when the test
|
||||
* finishes.
|
||||
*
|
||||
* @param name A string specifying the element name.
|
||||
*
|
||||
* @param attrs A dictionary object with attribute names and values to set on
|
||||
* the div.
|
||||
*/
|
||||
function addElement(t, name, attrs) {
|
||||
var element = document.createElement(name);
|
||||
if (attrs) {
|
||||
for (var attrName in attrs) {
|
||||
element.setAttribute(attrName, attrs[attrName]);
|
||||
}
|
||||
}
|
||||
document.body.appendChild(element);
|
||||
if (t && typeof t.add_cleanup === 'function') {
|
||||
t.add_cleanup(() => element.remove());
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends a div to the document body.
|
||||
*
|
||||
* @param t The testharness.js Test object. If provided, this will be used
|
||||
* to register a cleanup callback to remove the div when the test
|
||||
* finishes.
|
||||
*
|
||||
* @param attrs A dictionary object with attribute names and values to set on
|
||||
* the div.
|
||||
*/
|
||||
function addDiv(t, attrs) {
|
||||
return addElement(t, "div", attrs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends a style div to the document head.
|
||||
*
|
||||
* @param t The testharness.js Test object. If provided, this will be used
|
||||
* to register a cleanup callback to remove the style element
|
||||
* when the test finishes.
|
||||
*
|
||||
* @param rules A dictionary object with selector names and rules to set on
|
||||
* the style sheet.
|
||||
*/
|
||||
function addStyle(t, rules) {
|
||||
var extraStyle = document.createElement('style');
|
||||
document.head.appendChild(extraStyle);
|
||||
if (rules) {
|
||||
var sheet = extraStyle.sheet;
|
||||
for (var selector in rules) {
|
||||
sheet.insertRule(selector + '{' + rules[selector] + '}',
|
||||
sheet.cssRules.length);
|
||||
}
|
||||
}
|
||||
|
||||
if (t && typeof t.add_cleanup === 'function') {
|
||||
t.add_cleanup(function() {
|
||||
extraStyle.remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Promise wrapper for requestAnimationFrame.
|
||||
*/
|
||||
function waitForFrame() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
window.requestAnimationFrame(resolve);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Waits for a requestAnimationFrame callback in the next refresh driver tick.
|
||||
*/
|
||||
function waitForNextFrame() {
|
||||
const timeAtStart = document.timeline.currentTime;
|
||||
return new Promise(resolve => {
|
||||
window.requestAnimationFrame(() => {
|
||||
if (timeAtStart === document.timeline.currentTime) {
|
||||
window.requestAnimationFrame(resolve);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Promise that is resolved after the given number of consecutive
|
||||
* animation frames have occured (using requestAnimationFrame callbacks).
|
||||
*
|
||||
* @param frameCount The number of animation frames.
|
||||
* @param onFrame An optional function to be processed in each animation frame.
|
||||
*/
|
||||
function waitForAnimationFrames(frameCount, onFrame) {
|
||||
const timeAtStart = document.timeline.currentTime;
|
||||
return new Promise(function(resolve, reject) {
|
||||
function handleFrame() {
|
||||
if (onFrame && typeof onFrame === 'function') {
|
||||
onFrame();
|
||||
}
|
||||
if (timeAtStart != document.timeline.currentTime &&
|
||||
--frameCount <= 0) {
|
||||
resolve();
|
||||
} else {
|
||||
window.requestAnimationFrame(handleFrame); // wait another frame
|
||||
}
|
||||
}
|
||||
window.requestAnimationFrame(handleFrame);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Timeout function used for tests with EventWatchers when all animation events
|
||||
* should be received on the next animation frame. If two frames pass before
|
||||
* receiving the expected events, then we can immediate fail the test.
|
||||
*/
|
||||
function fastEventsTimeout() {
|
||||
return waitForAnimationFrames(2);
|
||||
};
|
||||
|
||||
/**
|
||||
* Timeout function used for tests with EventWatchers. The client agent has no
|
||||
* strict requirement for how long it takes to resolve the ready promise. Once
|
||||
* the promise is resolved a secondary timeout promise is armed that may have
|
||||
* a tight deadline measured in animation frames.
|
||||
*/
|
||||
function armTimeoutWhenReady(animation, timeoutPromise) {
|
||||
return () => {
|
||||
if (animation.pending)
|
||||
return animation.ready.then(() => { return timeoutPromise(); });
|
||||
else
|
||||
return timeoutPromise();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper that takes a sequence of N animations and returns:
|
||||
*
|
||||
* Promise.all([animations[0].ready, animations[1].ready, ... animations[N-1].ready]);
|
||||
*/
|
||||
function waitForAllAnimations(animations) {
|
||||
return Promise.all(animations.map(animation => animation.ready));
|
||||
}
|
||||
|
||||
/**
|
||||
* Flush the computed style for the given element. This is useful, for example,
|
||||
* when we are testing a transition and need the initial value of a property
|
||||
* to be computed so that when we synchronouslyet set it to a different value
|
||||
* we actually get a transition instead of that being the initial value.
|
||||
*/
|
||||
function flushComputedStyle(elem) {
|
||||
var cs = getComputedStyle(elem);
|
||||
cs.marginLeft;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue