mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Update web-platform-tests to revision 6aef6676d2f95c29de17666cc70d61b517939fbf
This commit is contained in:
WPT Sync Bot
parent
cd0e7e7ebb
commit
3ebfea9f10
250 changed files with 2846 additions and 702 deletions
|
|
@ -0,0 +1,329 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>AnimationEffect.getComputedTiming() for CSS transitions</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<style>
|
||||
|
||||
.animated-div {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
// --------------------
|
||||
// delay
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay');
|
||||
}, 'delay of a new tranisition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, 10000,
|
||||
'Initial value of delay');
|
||||
}, 'Positive delay of a new transition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s -5s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, -5000,
|
||||
'Initial value of delay');
|
||||
}, 'Negative delay of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// endDelay
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().endDelay, 0,
|
||||
'Initial value of endDelay');
|
||||
}, 'endDelay of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// fill
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().fill, 'backwards', 'Fill backwards');
|
||||
}, 'fill of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// iterationStart
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterationStart, 0,
|
||||
'Initial value of iterationStart');
|
||||
}, 'iterationStart of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// iterations
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterations, 1,
|
||||
'Initial value of iterations');
|
||||
}, 'iterations of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// duration
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().duration, 10000,
|
||||
'Initial value of duration');
|
||||
}, 'duration of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// direction
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class : 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().direction, 'normal',
|
||||
'Initial value of direction');
|
||||
}, 'direction of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// easing
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().easing, 'linear',
|
||||
'Initial value of easing');
|
||||
}, 'easing of a new transition');
|
||||
|
||||
|
||||
// ------------------------------
|
||||
// endTime
|
||||
// = max(start delay + active duration + end delay, 0)
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 100s -5s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
const answer = 100000 - 5000; // ms
|
||||
assert_equals(effect.getComputedTiming().endTime, answer,
|
||||
'Initial value of endTime');
|
||||
}, 'endTime of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// activeDuration
|
||||
// = iteration duration * iteration count(==1)
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 100s -5s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().activeDuration, 100000,
|
||||
'Initial value of activeDuration');
|
||||
}, 'activeDuration of a new transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// localTime
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 100s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().localTime, 0,
|
||||
'Initial value of localTime');
|
||||
}, 'localTime of a new transition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 100s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const anim = div.getAnimations()[0];
|
||||
anim.currentTime = 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'current localTime after setting currentTime');
|
||||
}, 'localTime is always equal to currentTime');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 100s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const anim = div.getAnimations()[0];
|
||||
anim.playbackRate = 2; // 2 times faster
|
||||
|
||||
await anim.ready;
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'localTime is equal to currentTime');
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'localTime is equal to currentTime');
|
||||
}, 'localTime reflects playbackRate immediately');
|
||||
|
||||
|
||||
// --------------------
|
||||
// progress
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10.5s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().progress, 0.0,
|
||||
'Initial value of progress');
|
||||
}, 'progress of a new transition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10.5s 2s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().progress, 0.0,
|
||||
'Initial value of progress');
|
||||
}, 'progress of a new transition with positive delay in before phase');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10.5s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const anim = div.getAnimations()[0];
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().progress, null,
|
||||
'finished progress');
|
||||
}, 'progress of a finished transition');
|
||||
|
||||
|
||||
// --------------------
|
||||
// currentIteration
|
||||
// --------------------
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
}, 'currentIteration of a new transition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s 2s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
}, 'currentIteration of a new transition with positive delay in before phase');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
div.style.transition = 'margin-left 10s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '10px';
|
||||
|
||||
const anim = div.getAnimations()[0];
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, null,
|
||||
'finished currentIteration');
|
||||
}, 'currentIteration of a finished transition');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSPseudoElement.getAnimations() for CSS transitions</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<style>
|
||||
.init::before {
|
||||
content: '';
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
opacity: 0;
|
||||
transition: all 100s;
|
||||
}
|
||||
.change::before {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { class: 'init' });
|
||||
getComputedStyle(div).width;
|
||||
div.classList.add('change');
|
||||
|
||||
// Sanity checks
|
||||
assert_equals(document.getAnimations().length, 3,
|
||||
'Got expected number of animations on document');
|
||||
const pseudoTarget = document.getAnimations()[0].effect.target;
|
||||
assert_class_string(pseudoTarget, 'CSSPseudoElement',
|
||||
'Got pseudo-element target');
|
||||
|
||||
// Check animations returned from the pseudo element are in correct order
|
||||
const anims = pseudoTarget.getAnimations();
|
||||
assert_equals(anims.length, 3,
|
||||
'Got expected number of animations on pseudo-element');
|
||||
assert_equals(anims[0].transitionProperty, 'height');
|
||||
assert_equals(anims[1].transitionProperty, 'opacity');
|
||||
assert_equals(anims[2].transitionProperty, 'width');
|
||||
}, 'getAnimations sorts simultaneous transitions by name');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Canceling a CSS transition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
await waitForFrame();
|
||||
|
||||
assert_not_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
'transform style is animated before canceling');
|
||||
transition.cancel();
|
||||
assert_equals(getComputedStyle(div).marginLeft, div.style.marginLeft,
|
||||
'transform style is no longer animated after canceling');
|
||||
}, 'Animated style is cleared after canceling a running CSS transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
transition.cancel();
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
'margin-left style is not animated after canceling');
|
||||
transition.play();
|
||||
assert_equals(getComputedStyle(div).marginLeft, '0px',
|
||||
'margin-left style is animated after re-starting transition');
|
||||
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running',
|
||||
'Transition succeeds in running after being re-started');
|
||||
}, 'After canceling a transition, it can still be re-used');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
transition.finish();
|
||||
transition.cancel();
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
'margin-left style is not animated after canceling');
|
||||
transition.play();
|
||||
assert_equals(getComputedStyle(div).marginLeft, '0px',
|
||||
'margin-left style is animated after re-starting transition');
|
||||
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running',
|
||||
'Transition succeeds in running after being re-started');
|
||||
}, 'After canceling a finished transition, it can still be re-used');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
transition.cancel();
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
'margin-left style is not animated after canceling');
|
||||
|
||||
// Trigger a change to a transition property and check that this
|
||||
// doesn't cause the animation to become live again
|
||||
div.style.transitionDuration = '200s';
|
||||
getComputedStyle(div).marginLeft;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
'margin-left style is still not animated after updating'
|
||||
+ ' transition-duration');
|
||||
assert_equals(transition.playState, 'idle',
|
||||
'Transition is still idle after updating transition-duration');
|
||||
}, 'After canceling a transition, updating transition properties doesn\'t make'
|
||||
+ ' it live again');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.display = 'none';
|
||||
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px');
|
||||
}, 'Setting display:none on an element cancels its transitions');
|
||||
|
||||
promise_test(async t => {
|
||||
const parentDiv = addDiv(t);
|
||||
const childDiv = document.createElement('div');
|
||||
parentDiv.appendChild(childDiv);
|
||||
childDiv.setAttribute('style', 'margin-left: 0px');
|
||||
|
||||
getComputedStyle(childDiv).marginLeft;
|
||||
|
||||
childDiv.style.transition = 'margin-left 100s';
|
||||
childDiv.style.marginLeft = '1000px';
|
||||
|
||||
const transition = childDiv.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running');
|
||||
parentDiv.style.display = 'none';
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(childDiv).marginLeft, '1000px');
|
||||
}, 'Setting display:none cancels transitions on a child element');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running');
|
||||
// Set an unrecognized property value
|
||||
div.style.transitionProperty = 'none';
|
||||
getComputedStyle(div).marginLeft;
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px');
|
||||
}, 'Removing a property from transition-property cancels transitions on that '+
|
||||
'property');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.transition = 'margin-left 10s -10s'; // combined duration is zero
|
||||
|
||||
// Note that simply setting the combined duration to zero is not enough to
|
||||
// cancel the transition. We must also update the end value so that the,
|
||||
// "the end value of the running transition is not equal to the value of the
|
||||
// property in the after-change style" condition is true.
|
||||
//
|
||||
// (And note that the zero combined duration is not strictly necessary to
|
||||
// cancel the original transition--but it does ensure another transition is
|
||||
// not generated in its place.)
|
||||
|
||||
div.style.marginLeft = '2000px';
|
||||
getComputedStyle(div).marginLeft;
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(div).marginLeft, '2000px');
|
||||
}, 'Setting zero combined duration');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.marginLeft = '2000px';
|
||||
getComputedStyle(div).marginLeft;
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(transition.playState, 'idle');
|
||||
}, 'Changing style to another interpolable value cancels the original ' +
|
||||
'transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.marginLeft = 'auto';
|
||||
getComputedStyle(div).marginLeft;
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(div.getAnimations().length, 0,
|
||||
'There should be no transitions');
|
||||
assert_equals(transition.playState, 'idle');
|
||||
}, 'An after-change style value can\'t be interpolated');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '1000px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.marginLeft = '0px';
|
||||
getComputedStyle(div).marginLeft;
|
||||
await waitForFrame();
|
||||
|
||||
assert_equals(transition.playState, 'idle');
|
||||
}, 'Reversing a running transition cancels the original transition');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSTransition.currentTime</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
'use strict';
|
||||
|
||||
const marginLeft = div => parseFloat(getComputedStyle(div).marginLeft);
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(
|
||||
animation.currentTime,
|
||||
0,
|
||||
'currentTime should initially be zero'
|
||||
);
|
||||
|
||||
await animation.ready;
|
||||
|
||||
const seekTime = 150 * MS_PER_SEC;
|
||||
animation.currentTime = seekTime;
|
||||
|
||||
assert_time_equals_literal(
|
||||
animation.currentTime,
|
||||
seekTime,
|
||||
'currentTime is updated'
|
||||
);
|
||||
assert_equals(getComputedStyle(div).marginLeft, '150px');
|
||||
}, 'currentTime can be used to seek a CSS transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
const eventWatcher = new EventWatcher(t, div, 'transitionend');
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
await animation.ready;
|
||||
|
||||
const marginLeft = () => parseFloat(getComputedStyle(div).marginLeft);
|
||||
assert_equals(marginLeft(div), 100);
|
||||
|
||||
animation.currentTime = 100 * MS_PER_SEC;
|
||||
assert_equals(marginLeft(div), 100);
|
||||
|
||||
animation.currentTime = 150 * MS_PER_SEC;
|
||||
assert_equals(marginLeft(div), 150);
|
||||
|
||||
animation.currentTime = 200 * MS_PER_SEC;
|
||||
await eventWatcher.wait_for('transitionend');
|
||||
assert_equals(marginLeft(div), 200);
|
||||
}, 'Skipping forwards through transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
const eventWatcher = new EventWatcher(t, div, 'transitionend');
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
await animation.ready;
|
||||
|
||||
// Unlike in the case of CSS animations, we cannot skip to the end and skip
|
||||
// backwards since when we reach the end the transition effect is removed and
|
||||
// changes to the Animation object no longer affect the element. For
|
||||
// this reason we only skip forwards as far as the 50% through point.
|
||||
|
||||
animation.currentTime = 150 * MS_PER_SEC;
|
||||
assert_equals(marginLeft(div), 150);
|
||||
|
||||
animation.currentTime = 100 * MS_PER_SEC;
|
||||
assert_equals(marginLeft(div), 100);
|
||||
}, 'Skipping backwards through transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
const animation = div.getAnimations()[0];
|
||||
|
||||
await animation.ready;
|
||||
|
||||
assert_throws(
|
||||
new TypeError(),
|
||||
() => {
|
||||
animation.currentTime = null;
|
||||
},
|
||||
'Expect TypeError exception on trying to set Animation.currentTime to null'
|
||||
);
|
||||
}, 'Setting currentTime to null on a CSS transition throws');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSTransition.effect</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src='support/helper.js'></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
|
||||
div.style.transition = 'left 100s';
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
|
||||
transition.effect = null;
|
||||
|
||||
assert_equals(transition.transitionProperty, 'left');
|
||||
}, 'After setting a transition\'s effect to null, it still reports the'
|
||||
+ ' original transition property');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
|
||||
div.style.transition = 'left 100s';
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
transition.effect = null;
|
||||
assert_equals(transition.playState, 'finished');
|
||||
}, 'After setting a transition\'s effect to null, it becomes finished');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
|
||||
div.style.transition = 'left 100s';
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
transition.effect = null;
|
||||
assert_equals(getComputedStyle(div).left, '100px');
|
||||
}, 'After setting a transition\'s effect to null, style is updated');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
div.style.width = '0px';
|
||||
|
||||
div.style.transition = 'left 100s';
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
await transition.ready;
|
||||
|
||||
transition.currentTime = 50 * MS_PER_SEC;
|
||||
transition.effect = new KeyframeEffect(div,
|
||||
{ left: [ '0px' , '100px'] },
|
||||
20 * MS_PER_SEC);
|
||||
|
||||
assert_equals(transition.playState, 'finished');
|
||||
}, 'After setting a new keyframe effect with a shorter duration,'
|
||||
+ ' the transition becomes finished');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
div.style.width = '0px';
|
||||
|
||||
div.style.transition = 'left 100s';
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
transition.effect = new KeyframeEffect(div,
|
||||
{ marginLeft: [ '0px' , '100px'] },
|
||||
100 * MS_PER_SEC);
|
||||
assert_equals(transition.transitionProperty, 'left');
|
||||
}, 'After setting a new keyframe effect targeting different properties,'
|
||||
+ ' the transition continues to report the original transition property');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
div.style.width = '0px';
|
||||
|
||||
div.style.transition = 'left 100s';
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
const transition = div.getAnimations()[0];
|
||||
assert_true(transition.pending);
|
||||
|
||||
transition.effect = new KeyframeEffect(div,
|
||||
{ marginLeft: [ '0px' , '100px'] },
|
||||
100 * MS_PER_SEC);
|
||||
assert_equals(transition.transitionProperty, 'left');
|
||||
assert_true(transition.pending);
|
||||
|
||||
// As a sanity check, check that the transition actually exits the
|
||||
// pending state.
|
||||
await transition.ready;
|
||||
assert_false(transition.pending);
|
||||
}, 'After setting a new keyframe effect on a play-pending transition,'
|
||||
+ ' the transition remains pending');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSTransition.finished</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<style>
|
||||
|
||||
.animated-div {
|
||||
margin-left: 100px;
|
||||
transition: margin-left 100s linear 100s;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
'use strict';
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { class: 'animated-div' });
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
const animation = div.getAnimations()[0];
|
||||
|
||||
animation.finish();
|
||||
await animation.finished;
|
||||
|
||||
animation.play();
|
||||
const marginLeft = parseFloat(getComputedStyle(div).marginLeft);
|
||||
assert_equals(
|
||||
marginLeft,
|
||||
100,
|
||||
'Replaying a finished transition should update the target element\'s style'
|
||||
);
|
||||
}, 'Restarting a finished transition rewinds playback');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSTransition.ready</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// Set up pending transition
|
||||
div.style.transform = 'translate(0px)';
|
||||
getComputedStyle(div).transform;
|
||||
div.style.transition = 'transform 100s';
|
||||
div.style.transform = 'translate(10px)';
|
||||
getComputedStyle(div).transform;
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_true(animation.pending, 'Animation is initially pending');
|
||||
const readyPromise = animation.ready;
|
||||
|
||||
// Now remove transform from transition-property and flush styles
|
||||
div.style.transitionProperty = 'none';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
|
||||
try {
|
||||
await readyPromise;
|
||||
assert_unreached('ready promise was fulfilled');
|
||||
} catch (err) {
|
||||
assert_equals(err.name, 'AbortError',
|
||||
'ready promise is rejected with AbortError');
|
||||
assert_equals(animation.playState, 'idle',
|
||||
'Animation is idle after transition was canceled');
|
||||
}
|
||||
}, 'ready promise is rejected when a transition is canceled by updating'
|
||||
+ ' transition-property');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// Set up pending transition
|
||||
div.style.marginLeft = '0px';
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.transition = 'margin-left 100s';
|
||||
div.style.marginLeft = '100px';
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_true(animation.pending, 'Animation is initially pending');
|
||||
const readyPromise = animation.ready;
|
||||
|
||||
// Update the transition to animate to something not-interpolable
|
||||
div.style.marginLeft = 'auto';
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
try {
|
||||
await readyPromise;
|
||||
assert_unreached('ready promise was fulfilled');
|
||||
} catch (err) {
|
||||
assert_equals(err.name, 'AbortError',
|
||||
'ready promise is rejected with AbortError');
|
||||
assert_equals(animation.playState, 'idle',
|
||||
'Animation is idle after transition was canceled');
|
||||
}
|
||||
}, 'ready promise is rejected when a transition is canceled by changing'
|
||||
+ ' the transition property to something not interpolable');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSTransition.startTime</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
const animation = div.getAnimations()[0];
|
||||
|
||||
assert_equals(animation.startTime, null, 'startTime is unresolved');
|
||||
}, 'The start time of a newly-created transition is unresolved');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
div.style.top = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.left = '100px';
|
||||
div.style.top = '100px';
|
||||
|
||||
let animations = div.getAnimations();
|
||||
assert_equals(animations.length, 2);
|
||||
await waitForAllAnimations(animations);
|
||||
|
||||
assert_equals(animations[0].startTime, animations[1].startTime,
|
||||
'CSS transitions started together have the same start time');
|
||||
|
||||
await waitForFrame();
|
||||
|
||||
div.style.backgroundColor = 'green';
|
||||
|
||||
animations = div.getAnimations();
|
||||
assert_equals(animations.length, 3);
|
||||
await waitForAllAnimations(animations);
|
||||
|
||||
assert_less_than(animations[1].startTime, animations[2].startTime,
|
||||
'A CSS transition added in a later frame has a later start time');
|
||||
}, 'The start time of transitions is based on when they are generated');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
const animation = div.getAnimations()[0];
|
||||
|
||||
const timelineTime = animation.timeline.currentTime;
|
||||
animation.startTime = timelineTime;
|
||||
|
||||
assert_times_equal(
|
||||
animation.startTime,
|
||||
timelineTime,
|
||||
'Check setting of startTime actually works'
|
||||
);
|
||||
}, 'The start time of a transition can be set');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
const animation = div.getAnimations()[0];
|
||||
|
||||
await animation.ready;
|
||||
|
||||
const timelineTime = animation.timeline.currentTime;
|
||||
const marginLeft = () => parseFloat(getComputedStyle(div).marginLeft);
|
||||
|
||||
animation.startTime = timelineTime - 100 * MS_PER_SEC;
|
||||
assert_equals(marginLeft(), 100);
|
||||
|
||||
animation.startTime = timelineTime - 150 * MS_PER_SEC;
|
||||
assert_equals(marginLeft(), 150);
|
||||
}, 'The start time can be set to seek a transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, {
|
||||
style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
|
||||
});
|
||||
const eventWatcher = new EventWatcher(t, div, [
|
||||
'transitionstart',
|
||||
'transitionend',
|
||||
]);
|
||||
getComputedStyle(div).marginLeft;
|
||||
div.style.marginLeft = '200px';
|
||||
const animation = div.getAnimations()[0];
|
||||
|
||||
await animation.ready;
|
||||
|
||||
const timelineTime = animation.timeline.currentTime;
|
||||
|
||||
animation.startTime = timelineTime - 100 * MS_PER_SEC;
|
||||
await eventWatcher.wait_for('transitionstart');
|
||||
|
||||
animation.startTime = timelineTime - 200 * MS_PER_SEC;
|
||||
await eventWatcher.wait_for('transitionend');
|
||||
}, 'Seeking a transition using start time dispatches transition events');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSTransition.transitionProperty</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#dom-csstransition-transitionproperty">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.left = '100px';
|
||||
|
||||
assert_equals(
|
||||
div.getAnimations()[0].transitionProperty,
|
||||
'left',
|
||||
'The transitionProperty for the returned transition corresponds to the'
|
||||
+ ' specific property being transitioned'
|
||||
);
|
||||
}, 'CSSTransition.transitionProperty');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Document.getAnimations() for CSS transitions</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'getAnimations returns an empty sequence for a document'
|
||||
+ ' with no animations');
|
||||
}, 'getAnimations for non-animated content');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// Add a couple of transitions
|
||||
div.style.left = '0px';
|
||||
div.style.top = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.left = '100px';
|
||||
div.style.top = '100px';
|
||||
assert_equals(document.getAnimations().length, 2,
|
||||
'getAnimations returns two running CSS Transitions');
|
||||
|
||||
// Remove both
|
||||
div.style.transitionProperty = 'none';
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'getAnimations returns no running CSS Transitions');
|
||||
}, 'getAnimations for CSS Transitions');
|
||||
|
||||
test(t => {
|
||||
addStyle(t, { '.init::after': 'content: ""; width: 0px; ' +
|
||||
'transition: all 100s;',
|
||||
'.init::before': 'content: ""; width: 0px; ' +
|
||||
'transition: all 10s;',
|
||||
'.change::after': 'width: 100px;',
|
||||
'.change::before': 'width: 100px;' });
|
||||
// create two divs with these arrangement:
|
||||
// parent
|
||||
// ::before,
|
||||
// ::after
|
||||
// |
|
||||
// child
|
||||
const parent = addDiv(t);
|
||||
const child = addDiv(t);
|
||||
parent.appendChild(child);
|
||||
|
||||
parent.style.left = '0px';
|
||||
parent.style.transition = 'left 10s';
|
||||
parent.classList.add('init');
|
||||
child.style.left = '0px';
|
||||
child.style.transition = 'left 10s';
|
||||
getComputedStyle(parent).left;
|
||||
|
||||
parent.style.left = '100px';
|
||||
parent.classList.add('change');
|
||||
child.style.left = '100px';
|
||||
|
||||
const anims = document.getAnimations();
|
||||
assert_equals(anims.length, 4,
|
||||
'CSS transition on both pseudo-elements and elements ' +
|
||||
'are returned');
|
||||
assert_equals(anims[0].effect.target, parent,
|
||||
'The animation targeting the parent element comes first');
|
||||
assert_equals(anims[1].effect.target.type, '::before',
|
||||
'The animation targeting the ::before element comes second');
|
||||
assert_equals(anims[2].effect.target.type, '::after',
|
||||
'The animation targeting the ::after element comes third');
|
||||
assert_equals(anims[3].effect.target, child,
|
||||
'The animation targeting the child element comes last');
|
||||
}, 'CSS Transitions targetting (pseudo-)elements should have correct order ' +
|
||||
'after sorting');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
|
||||
getComputedStyle(div).left;
|
||||
|
||||
div.style.left = '100px';
|
||||
const animations = div.getAnimations();
|
||||
assert_equals(animations.length, 1, 'Got transition');
|
||||
await animations[0].finished;
|
||||
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'No animations returned');
|
||||
}, 'Transitions are not returned after they have finished');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Element.getAnimations() for CSS transitions</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#animation-composite-order">
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
div.style.top = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.left = '100px';
|
||||
div.style.top = '100px';
|
||||
|
||||
assert_equals(div.getAnimations().length, 2);
|
||||
}, 'getAnimations returns one Animation per transitioning property');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
|
||||
|
||||
getComputedStyle(div).left;
|
||||
div.style.left = '100px';
|
||||
|
||||
assert_class_string(div.getAnimations()[0], 'CSSTransition',
|
||||
'Interface of returned animation is CSSTransition');
|
||||
}, 'getAnimations returns CSSTransition objects for CSS Transitions');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
getComputedStyle(div).left;
|
||||
div.style.transition = 'all 0.01s';
|
||||
div.style.left = '100px';
|
||||
const animation = div.getAnimations()[0];
|
||||
|
||||
await animation.finished;
|
||||
|
||||
assert_equals(div.getAnimations().length, 0);
|
||||
}, 'getAnimations does not return finished CSS Transitions');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// animation-duration is not animatable
|
||||
div.style.animationDuration = '10s';
|
||||
getComputedStyle(div).animationDuration;
|
||||
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.animationDuration = '100s';
|
||||
|
||||
assert_equals(div.getAnimations().length, 0);
|
||||
}, 'getAnimations does not return a transition for a non-animatable property');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.setProperty('-vendor-unsupported', '0px', '');
|
||||
getComputedStyle(div).transitionProperty;
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.setProperty('-vendor-unsupported', '100px', '');
|
||||
|
||||
assert_equals(div.getAnimations().length, 0);
|
||||
}, 'getAnimations does not return a transition for an unsupposed property');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { style: 'transform: translate(0px); ' +
|
||||
'opacity: 0; ' +
|
||||
'border-width: 0px; ' + // Shorthand
|
||||
'border-style: solid' });
|
||||
getComputedStyle(div).transform;
|
||||
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.transform = 'translate(100px)';
|
||||
div.style.opacity = '1';
|
||||
div.style.borderWidth = '1px';
|
||||
|
||||
const animations = div.getAnimations();
|
||||
assert_equals(animations.length, 6,
|
||||
'Generated expected number of transitions');
|
||||
assert_equals(animations[0].transitionProperty, 'border-bottom-width');
|
||||
assert_equals(animations[1].transitionProperty, 'border-left-width');
|
||||
assert_equals(animations[2].transitionProperty, 'border-right-width');
|
||||
assert_equals(animations[3].transitionProperty, 'border-top-width');
|
||||
assert_equals(animations[4].transitionProperty, 'opacity');
|
||||
assert_equals(animations[5].transitionProperty, 'transform');
|
||||
}, 'getAnimations sorts simultaneous transitions by name');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t, { style: 'transform: translate(0px); ' +
|
||||
'opacity: 0' });
|
||||
getComputedStyle(div).transform;
|
||||
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.transform = 'translate(100px)';
|
||||
assert_equals(div.getAnimations().length, 1,
|
||||
'Initially there is only one (transform) transition');
|
||||
div.style.opacity = '1';
|
||||
assert_equals(div.getAnimations().length, 2,
|
||||
'Then a second (opacity) transition is added');
|
||||
|
||||
const animations = div.getAnimations();
|
||||
assert_equals(animations[0].transitionProperty, 'transform');
|
||||
assert_equals(animations[1].transitionProperty, 'opacity');
|
||||
}, 'getAnimations sorts transitions by when they were generated');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect.getKeyframes() for CSS transitions</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--var-100px: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const getKeyframes = e => {
|
||||
return e.getAnimations()[0].effect.getKeyframes();
|
||||
};
|
||||
|
||||
const assert_frames_equal = (a, b, name) => {
|
||||
assert_equals(
|
||||
Object.keys(a).sort().toString(),
|
||||
Object.keys(b).sort().toString(),
|
||||
`properties on ${name}`
|
||||
);
|
||||
for (const p in a) {
|
||||
assert_equals(a[p], b[p], `value for '${p}' on ${name}`);
|
||||
}
|
||||
};
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
div.style.transition = 'left 100s';
|
||||
div.style.left = '100px';
|
||||
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, 'number of frames');
|
||||
|
||||
const expected = [
|
||||
{ offset: 0,
|
||||
computedOffset: 0,
|
||||
easing: 'ease',
|
||||
composite: 'auto',
|
||||
left: '0px',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
computedOffset: 1,
|
||||
easing: 'linear',
|
||||
composite: 'auto',
|
||||
left: '100px',
|
||||
},
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
|
||||
}
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
|
||||
+ ' transition');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
div.style.transition = 'left 100s steps(2,end)';
|
||||
div.style.left = '100px';
|
||||
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, 'number of frames');
|
||||
|
||||
const expected = [
|
||||
{
|
||||
offset: 0,
|
||||
computedOffset: 0,
|
||||
easing: 'steps(2)',
|
||||
composite: 'auto',
|
||||
left: '0px',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
computedOffset: 1,
|
||||
easing: 'linear',
|
||||
composite: 'auto',
|
||||
left: '100px',
|
||||
},
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
|
||||
}
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
|
||||
+ ' transition with a non-default easing function');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
div.style.transition = 'left 100s';
|
||||
div.style.left = 'var(--var-100px)';
|
||||
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
// CSS transition endpoints are based on the computed value so we
|
||||
// shouldn't see the variable reference
|
||||
const expected = [
|
||||
{
|
||||
offset: 0,
|
||||
computedOffset: 0,
|
||||
easing: 'ease',
|
||||
composite: 'auto',
|
||||
left: '0px',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
computedOffset: 1,
|
||||
easing: 'linear',
|
||||
composite: 'auto',
|
||||
left: '100px',
|
||||
},
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
|
||||
}
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a'
|
||||
+ ' transition with a CSS variable endpoint');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSSTransition.effect.target</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
div.style.transition = 'left 100s';
|
||||
div.style.left = '100px';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(animation.effect.target, div,
|
||||
'Animation.target is the animatable div');
|
||||
}, 'Returned CSS transitions have the correct Animation.target');
|
||||
|
||||
test(t => {
|
||||
addStyle(t, { '.init::after': 'content: ""; width: 0px; height: 0px; ' +
|
||||
'transition: all 10s;',
|
||||
'.change::after': 'width: 100px; height: 100px;' });
|
||||
const div = addDiv(t, { class: 'init' });
|
||||
getComputedStyle(div).width;
|
||||
div.classList.add('change');
|
||||
|
||||
const anims = document.getAnimations();
|
||||
assert_equals(anims.length, 2,
|
||||
'Got transitions running on ::after pseudo element');
|
||||
assert_equals(anims[0].effect.target, anims[1].effect.target,
|
||||
'Both transitions return the same target object');
|
||||
}, 'effect.target should return the same CSSPseudoElement object each time');
|
||||
|
||||
test(t => {
|
||||
addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;',
|
||||
'.change::after': 'width: 100px;' });
|
||||
const div = addDiv(t, { class: 'init' });
|
||||
getComputedStyle(div).width;
|
||||
div.classList.add('change');
|
||||
const pseudoTarget = document.getAnimations()[0].effect.target;
|
||||
const effect = new KeyframeEffect(pseudoTarget,
|
||||
{ background: ["blue", "red"] },
|
||||
3000);
|
||||
const newAnim = new Animation(effect, document.timeline);
|
||||
newAnim.play();
|
||||
|
||||
const anims = document.getAnimations();
|
||||
assert_equals(anims.length, 2,
|
||||
'Got animations running on ::after pseudo element');
|
||||
assert_not_equals(anims[0], newAnim,
|
||||
'The scriped-generated animation appears last');
|
||||
assert_equals(newAnim.effect.target, pseudoTarget,
|
||||
'The effect.target of the scripted-generated animation is ' +
|
||||
'the same as the one from the argument of ' +
|
||||
'KeyframeEffect constructor');
|
||||
assert_equals(anims[0].effect.target, newAnim.effect.target,
|
||||
'Both the transition and the scripted-generated animation ' +
|
||||
'return the same target object');
|
||||
}, 'effect.target from the script-generated animation should return the same ' +
|
||||
'CSSPseudoElement object as that from the CSS generated transition');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,409 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS transition event dispatch</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#event-dispatch">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/helper.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const setupTransition = (t, transitionStyle) => {
|
||||
const div = addDiv(t, { style: 'transition: ' + transitionStyle });
|
||||
const watcher = new EventWatcher(t, div, [ 'transitionrun',
|
||||
'transitionstart',
|
||||
'transitionend',
|
||||
'transitioncancel' ]);
|
||||
getComputedStyle(div).marginLeft;
|
||||
|
||||
div.style.marginLeft = '100px';
|
||||
const transition = div.getAnimations()[0];
|
||||
|
||||
return { transition, watcher, div };
|
||||
};
|
||||
|
||||
// On the next frame (i.e. when events are queued), whether or not the
|
||||
// transition is still pending depends on the implementation.
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
const evt = await watcher.wait_for('transitionrun');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Idle -> Pending or Before');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
// Force the transition to leave the idle phase
|
||||
transition.startTime = document.timeline.currentTime;
|
||||
const evt = await watcher.wait_for('transitionrun');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Idle -> Before');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
// Seek to Active phase.
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
transition.pause();
|
||||
const events = await watcher.wait_for(['transitionrun', 'transitionstart'], {
|
||||
record: 'all',
|
||||
});
|
||||
assert_equals(events[0].elapsedTime, 0.0);
|
||||
assert_equals(events[1].elapsedTime, 0.0);
|
||||
}, 'Idle or Pending -> Active');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
// Seek to After phase.
|
||||
transition.finish();
|
||||
const events = await watcher.wait_for(
|
||||
['transitionrun', 'transitionstart', 'transitionend'],
|
||||
{
|
||||
record: 'all',
|
||||
}
|
||||
);
|
||||
assert_equals(events[0].elapsedTime, 0.0);
|
||||
assert_equals(events[1].elapsedTime, 0.0);
|
||||
assert_equals(events[2].elapsedTime, 100.0);
|
||||
}, 'Idle or Pending -> After');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
await Promise.all([ watcher.wait_for('transitionrun'), transition.ready ]);
|
||||
|
||||
// Make idle
|
||||
div.style.display = 'none';
|
||||
getComputedStyle(div).marginLeft;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Before -> Idle (display: none)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
await Promise.all([ watcher.wait_for('transitionrun'), transition.ready ]);
|
||||
|
||||
// Make idle
|
||||
transition.timeline = null;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Before -> Idle (Animation.timeline = null)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
await Promise.all([ watcher.wait_for('transitionrun'), transition.ready ]);
|
||||
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
const evt = await watcher.wait_for('transitionstart');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Before -> Active');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
await Promise.all([ watcher.wait_for('transitionrun'), transition.ready ]);
|
||||
// Seek to After phase.
|
||||
transition.currentTime = 200 * MS_PER_SEC;
|
||||
const events = await watcher.wait_for(['transitionstart', 'transitionend'], {
|
||||
record: 'all',
|
||||
});
|
||||
|
||||
assert_equals(events[0].elapsedTime, 0.0);
|
||||
assert_equals(events[1].elapsedTime, 100.0);
|
||||
}, 'Before -> After');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } = setupTransition(t, 'margin-left 100s');
|
||||
|
||||
// Seek to Active start position.
|
||||
transition.pause();
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Make idle
|
||||
div.style.display = 'none';
|
||||
getComputedStyle(div).marginLeft;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Active -> Idle, no delay (display: none)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s');
|
||||
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Make idle
|
||||
transition.currentTime = 0;
|
||||
transition.timeline = null;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Active -> Idle, no delay (Animation.timeline = null)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
// Pause so the currentTime is fixed and we can accurately compare the event
|
||||
// time in transition cancel events.
|
||||
transition.pause();
|
||||
|
||||
// Seek to Active phase.
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Make idle
|
||||
div.style.display = 'none';
|
||||
getComputedStyle(div).marginLeft;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Active -> Idle, with positive delay (display: none)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
// Seek to Active phase.
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Make idle
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
transition.timeline = null;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Active -> Idle, with positive delay (Animation.timeline = null)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } =
|
||||
setupTransition(t, 'margin-left 100s -50s');
|
||||
|
||||
// Pause so the currentTime is fixed and we can accurately compare the event
|
||||
// time in transition cancel events.
|
||||
transition.pause();
|
||||
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Make idle
|
||||
div.style.display = 'none';
|
||||
getComputedStyle(div).marginLeft;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 50.0);
|
||||
}, 'Active -> Idle, with negative delay (display: none)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s -50s');
|
||||
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Make idle
|
||||
transition.currentTime = 50 * MS_PER_SEC;
|
||||
transition.timeline = null;
|
||||
const evt = await watcher.wait_for('transitioncancel');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Active -> Idle, with negative delay (Animation.timeline = null)');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
// Seek to Active phase.
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Seek to Before phase.
|
||||
transition.currentTime = 0;
|
||||
const evt = await watcher.wait_for('transitionend');
|
||||
assert_equals(evt.elapsedTime, 0.0);
|
||||
}, 'Active -> Before');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
// Seek to Active phase.
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Seek to After phase.
|
||||
transition.currentTime = 200 * MS_PER_SEC;
|
||||
const evt = await watcher.wait_for('transitionend');
|
||||
assert_equals(evt.elapsedTime, 100.0);
|
||||
}, 'Active -> After');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
// Seek to After phase.
|
||||
transition.finish();
|
||||
await watcher.wait_for([ 'transitionrun',
|
||||
'transitionstart',
|
||||
'transitionend' ]);
|
||||
|
||||
// Seek to Before phase.
|
||||
transition.currentTime = 0;
|
||||
const events = await watcher.wait_for(['transitionstart', 'transitionend'], {
|
||||
record: 'all',
|
||||
});
|
||||
|
||||
assert_equals(events[0].elapsedTime, 100.0);
|
||||
assert_equals(events[1].elapsedTime, 0.0);
|
||||
}, 'After -> Before');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
// Seek to After phase.
|
||||
transition.finish();
|
||||
await watcher.wait_for([ 'transitionrun',
|
||||
'transitionstart',
|
||||
'transitionend' ]);
|
||||
|
||||
// Seek to Active phase.
|
||||
transition.currentTime = 100 * MS_PER_SEC;
|
||||
const evt = await watcher.wait_for('transitionstart');
|
||||
assert_equals(evt.elapsedTime, 100.0);
|
||||
}, 'After -> Active');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s -50s');
|
||||
|
||||
const events = await watcher.wait_for(['transitionrun', 'transitionstart'], {
|
||||
record: 'all',
|
||||
});
|
||||
|
||||
assert_equals(events[0].elapsedTime, 50.0);
|
||||
assert_equals(events[1].elapsedTime, 50.0);
|
||||
transition.finish();
|
||||
|
||||
const evt = await watcher.wait_for('transitionend');
|
||||
assert_equals(evt.elapsedTime, 100.0);
|
||||
}, 'Calculating the interval start and end time with negative start delay.');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } = setupTransition(
|
||||
t,
|
||||
'margin-left 100s 100s'
|
||||
);
|
||||
|
||||
await watcher.wait_for('transitionrun');
|
||||
|
||||
// We can't set the end delay via generated effect timing
|
||||
// because mutating CSS transitions is not specced yet.
|
||||
transition.effect = new KeyframeEffect(
|
||||
div,
|
||||
{ marginleft: ['0px', '100px'] },
|
||||
{
|
||||
duration: 100 * MS_PER_SEC,
|
||||
endDelay: -50 * MS_PER_SEC,
|
||||
}
|
||||
);
|
||||
// Seek to Before and play.
|
||||
transition.cancel();
|
||||
transition.play();
|
||||
const events = await watcher.wait_for(
|
||||
['transitioncancel', 'transitionrun', 'transitionstart'],
|
||||
{ record: 'all' }
|
||||
);
|
||||
assert_equals(events[2].elapsedTime, 0.0);
|
||||
|
||||
// Seek to After phase.
|
||||
transition.finish();
|
||||
const evt = await watcher.wait_for('transitionend');
|
||||
assert_equals(evt.elapsedTime, 50.0);
|
||||
}, 'Calculating the interval start and end time with negative end delay.');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
await watcher.wait_for('transitionrun');
|
||||
|
||||
// Make idle
|
||||
div.style.display = 'none';
|
||||
getComputedStyle(div).marginLeft;
|
||||
await watcher.wait_for('transitioncancel');
|
||||
|
||||
transition.cancel();
|
||||
// Then wait a couple of frames and check that no event was dispatched
|
||||
await waitForAnimationFrames(2);
|
||||
}, 'Call Animation.cancel after canceling transition.');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
await watcher.wait_for('transitionrun');
|
||||
|
||||
// Make idle
|
||||
transition.cancel();
|
||||
transition.play();
|
||||
await watcher.wait_for([ 'transitioncancel',
|
||||
'transitionrun' ]);
|
||||
}, 'Restart transition after canceling transition immediately');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } =
|
||||
setupTransition(t, 'margin-left 100s 100s');
|
||||
|
||||
await watcher.wait_for('transitionrun');
|
||||
|
||||
// Make idle
|
||||
div.style.display = 'none';
|
||||
getComputedStyle(div).marginLeft;
|
||||
transition.play();
|
||||
transition.cancel();
|
||||
await watcher.wait_for('transitioncancel');
|
||||
|
||||
// Then wait a couple of frames and check that no event was dispatched
|
||||
await waitForAnimationFrames(2);
|
||||
}, 'Call Animation.cancel after restarting transition immediately');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher } = setupTransition(t, 'margin-left 100s');
|
||||
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
// Make idle
|
||||
transition.timeline = null;
|
||||
await watcher.wait_for('transitioncancel');
|
||||
|
||||
transition.timeline = document.timeline;
|
||||
transition.play();
|
||||
|
||||
await watcher.wait_for(['transitionrun', 'transitionstart']);
|
||||
}, 'Set timeline and play transition after clear the timeline');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } =
|
||||
setupTransition(t, 'margin-left 100s');
|
||||
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
transition.cancel();
|
||||
await watcher.wait_for('transitioncancel');
|
||||
|
||||
// Make After phase
|
||||
transition.effect = null;
|
||||
|
||||
// Then wait a couple of frames and check that no event was dispatched
|
||||
await waitForAnimationFrames(2);
|
||||
}, 'Set null target effect after canceling the transition');
|
||||
|
||||
promise_test(async t => {
|
||||
const { transition, watcher, div } = setupTransition(t, 'margin-left 100s');
|
||||
|
||||
await watcher.wait_for([ 'transitionrun', 'transitionstart' ]);
|
||||
|
||||
transition.effect = null;
|
||||
await watcher.wait_for('transitionend');
|
||||
|
||||
transition.cancel();
|
||||
|
||||
// Then wait a couple of frames and check that no event was dispatched
|
||||
await waitForAnimationFrames(2);
|
||||
}, 'Cancel the transition after clearing the target effect');
|
||||
|
||||
</script>
|
||||
|
|
@ -94,6 +94,8 @@ root.domFixture = function(selector) {
|
|||
}
|
||||
};
|
||||
|
||||
root.MS_PER_SEC = 1000;
|
||||
|
||||
/*
|
||||
* The recommended minimum precision to use for time values.
|
||||
*
|
||||
|
|
@ -108,7 +110,14 @@ const TIME_PRECISION = 0.0005; // ms
|
|||
*/
|
||||
root.assert_times_equal = function(actual, expected, description) {
|
||||
assert_approx_equals(actual, expected, TIME_PRECISION, description);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* Compare a time value based on its precision requirements with a fixed value.
|
||||
*/
|
||||
root.assert_time_equals_literal = (actual, expected, description) => {
|
||||
assert_approx_equals(actual, expected, TIME_PRECISION, description);
|
||||
};
|
||||
|
||||
/**
|
||||
* Assert that CSSTransition event, |evt|, has the expected property values
|
||||
|
|
@ -119,7 +128,7 @@ root.assert_end_events_equal = function(evt, propertyName, elapsedTime,
|
|||
assert_equals(evt.propertyName, propertyName);
|
||||
assert_times_equal(evt.elapsedTime, elapsedTime);
|
||||
assert_equals(evt.pseudoElement, pseudoElement);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Assert that array of simultaneous CSSTransition events, |evts|, have the
|
||||
|
|
@ -194,6 +203,76 @@ root.addDiv = function(t, attrs) {
|
|||
});
|
||||
}
|
||||
return div;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
root.addStyle = (t, rules) => {
|
||||
const extraStyle = document.createElement('style');
|
||||
document.head.appendChild(extraStyle);
|
||||
if (rules) {
|
||||
const sheet = extraStyle.sheet;
|
||||
for (const selector in rules) {
|
||||
sheet.insertRule(selector + '{' + rules[selector] + '}',
|
||||
sheet.cssRules.length);
|
||||
}
|
||||
}
|
||||
|
||||
if (t && typeof t.add_cleanup === 'function') {
|
||||
t.add_cleanup(() => {
|
||||
extraStyle.remove();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Promise wrapper for requestAnimationFrame.
|
||||
*/
|
||||
root.waitForFrame = () => {
|
||||
return new Promise(resolve => {
|
||||
window.requestAnimationFrame(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.
|
||||
*/
|
||||
root.waitForAnimationFrames = (frameCount, onFrame) => {
|
||||
const timeAtStart = document.timeline.currentTime;
|
||||
return new Promise(resolve => {
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Wrapper that takes a sequence of N animations and returns:
|
||||
*
|
||||
* Promise.all([animations[0].ready, animations[1].ready, ... animations[N-1].ready]);
|
||||
*/
|
||||
root.waitForAllAnimations = animations =>
|
||||
Promise.all(animations.map(animation => animation.ready));
|
||||
|
||||
})(window);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue