Skip to content

Commit

Permalink
Add tests for filling effects
Browse files Browse the repository at this point in the history 
Differential Revision: https://phabricator.services.mozilla.com/D13932

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1488122
gecko-commit: 872ccfbcfe6f7abab6aa425f00d28188d0b8cbc5
gecko-integration-branch: autoland
gecko-reviewers: hiro
  • Loading branch information
@birtles @moz-wptsync-bot
birtles authored and moz-wptsync-bot committed Dec 7, 2018
1 parent 6a51887 commit b513fa9
Showing 1 changed file with 377 additions and 0 deletions.
377 changes: 377 additions & 0 deletions web-animations/animation-model/keyframe-effects/effect-value-context-filling.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,377 @@
<!doctype html>
<meta charset=utf-8>
<title>The effect value of a keyframe effect: Forwards-filling animations whose
values depend on their context (target element)</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-computed-keyframes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';

test(t => {
const div = createDiv(t);
div.style.fontSize = '10px';
const animation = div.animate(
[{ marginLeft: '10em' }, { marginLeft: '20em' }],
{ duration: 1000, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value before updating font-size'
);

div.style.fontSize = '20px';

assert_equals(
getComputedStyle(div).marginLeft,
'400px',
'Effect value after updating font-size'
);
}, 'Filling effect values reflect changes to font-size on element');

test(t => {
const parentDiv = createDiv(t);
const div = createDiv(t);
parentDiv.appendChild(div);
parentDiv.style.fontSize = '10px';

const animation = div.animate(
[{ marginLeft: '10em' }, { marginLeft: '20em' }],
{ duration: 1000, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value before updating font-size on parent element'
);

parentDiv.style.fontSize = '20px';

assert_equals(
getComputedStyle(div).marginLeft,
'400px',
'Effect value after updating font-size on parent element'
);
}, 'Filling effect values reflect changes to font-size on parent element');

test(t => {
const div = createDiv(t);
div.style.setProperty('--target', '100px');
const animation = div.animate(
[{ marginLeft: '0px' }, { marginLeft: 'var(--target)' }],
{ duration: 1000, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'100px',
'Effect value before updating variable'
);

div.style.setProperty('--target', '200px');

assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value after updating variable'
);
}, 'Filling effect values reflect changes to variables on element');

test(t => {
const parentDiv = createDiv(t);
const div = createDiv(t);
parentDiv.appendChild(div);

parentDiv.style.setProperty('--target', '10em');
parentDiv.style.fontSize = '10px';

const animation = div.animate(
[{ marginLeft: '0px' }, { marginLeft: 'calc(var(--target) * 2)' }],
{ duration: 1000, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value before updating variable'
);

parentDiv.style.setProperty('--target', '20em');

assert_equals(
getComputedStyle(div).marginLeft,
'400px',
'Effect value after updating variable'
);
}, 'Filling effect values reflect changes to variables on parent element');

test(t => {
const div = createDiv(t);
const animation = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px' }],
{ duration: 1000, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value before updating the animation'
);

animation.effect.setKeyframes([
{ marginLeft: '100px' },
{ marginLeft: '300px' },
]);

assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value after updating the animation'
);
}, 'Filling effect values reflect changes to the the animation\'s keyframes');

test(t => {
const div = createDiv(t);
div.style.marginLeft = '100px';
const animation = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px' }],
{ duration: 1000, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value before updating the animation'
);

animation.effect.composite = 'add';

assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value after updating the composite mode'
);
}, 'Filling effect values reflect changes to the the animation\'s composite mode');

test(t => {
const div = createDiv(t);
const animation = div.animate(
[{ marginLeft: '0px' }, { marginLeft: '100px' }],
{ duration: 1000, iterations: 2, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'100px',
'Effect value before updating the animation'
);

animation.effect.iterationComposite = 'accumulate';

assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value after updating the iteration composite mode'
);
}, 'Filling effect values reflect changes to the the animation\'s iteration composite mode');

test(t => {
const div = createDiv(t);
div.style.marginLeft = '100px';
const animation = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px' }],
{ duration: 1000, fill: 'forwards', composite: 'add' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value before updating underlying value'
);

div.style.marginLeft = '200px';

assert_equals(
getComputedStyle(div).marginLeft,
'400px',
'Effect value after updating underlying value'
);
}, 'Filling effect values reflect changes to the base value when using'
+ ' additive animation');

test(t => {
const div = createDiv(t);
div.style.marginLeft = '100px';
const animation = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px', composite: 'add' }],
{ duration: 1000, fill: 'forwards' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value before updating underlying value'
);

div.style.marginLeft = '200px';

assert_equals(
getComputedStyle(div).marginLeft,
'400px',
'Effect value after updating underlying value'
);
}, 'Filling effect values reflect changes to the base value when using'
+ ' additive animation on a single keyframe');

test(t => {
const div = createDiv(t);
div.style.marginLeft = '0px';
const animation = div.animate([{ marginLeft: '100px', offset: 0 }], {
duration: 1000,
fill: 'forwards',
});
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'0px',
'Effect value before updating underlying value'
);

div.style.marginLeft = '200px';

assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value after updating underlying value'
);
}, 'Filling effect values reflect changes to the base value when using'
+ ' the fill value is an implicit keyframe');

test(t => {
const parentDiv = createDiv(t);
const div = createDiv(t);
parentDiv.appendChild(div);
parentDiv.style.fontSize = '10px';
div.style.marginLeft = '10em';
// Computed underlying margin-left is 100px

const animation = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px' }],
{ duration: 1000, fill: 'forwards', composite: 'add' }
);
animation.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value before updating font-size on parent'
);

parentDiv.style.fontSize = '20px';
// Computed underlying margin-left is now 200px

assert_equals(
getComputedStyle(div).marginLeft,
'400px',
'Effect value after updating font-size on parent'
);
}, 'Filling effect values reflect changes to the base value via a'
+ ' parent element');

test(t => {
const div = createDiv(t);
const animationA = div.animate(
[{ marginLeft: '0px' }, { marginLeft: '100px' }],
{ duration: 2000, fill: 'forwards', easing: 'step-end' }
);
const animationB = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px' }],
{ duration: 1000, fill: 'forwards', composite: 'add' }
);
animationB.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value before updating underyling animation'
);

// Go to end of the underlying animation so that it jumps to 100px
animationA.finish();

assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value after updating underlying animation'
);
}, 'Filling effect values reflect changes to underlying animations');

test(t => {
const parentDiv = createDiv(t);
const div = createDiv(t);
parentDiv.appendChild(div);

parentDiv.style.fontSize = '10px';

const animationA = div.animate(
[{ marginLeft: '0px' }, { marginLeft: '10em' }],
{ duration: 2000, fill: 'forwards', easing: 'step-start' }
);
const animationB = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px' }],
{ duration: 1000, fill: 'forwards', composite: 'add' }
);
animationB.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value before updating parent font-size'
);

parentDiv.style.fontSize = '20px';
// At this point the underlying animation's output should jump to 200px.

assert_equals(
getComputedStyle(div).marginLeft,
'400px',
'Effect value after updating parent font-size'
);
}, 'Filling effect values reflect changes to underlying animations via a'
+ ' a parent element');

test(t => {
const div = createDiv(t);
const animationA = div.animate(
[{ marginLeft: '0px' }, { marginLeft: '0px' }],
{ duration: 2000, fill: 'forwards' }
);
const animationB = div.animate(
[{ marginLeft: '100px' }, { marginLeft: '200px' }],
{ duration: 1000, fill: 'forwards', composite: 'add' }
);
animationB.finish();
assert_equals(
getComputedStyle(div).marginLeft,
'200px',
'Effect value before updating underyling animation'
);

animationA.effect.setKeyframes([
{ marginLeft: '100px' },
{ marginLeft: '100px' },
]);

assert_equals(
getComputedStyle(div).marginLeft,
'300px',
'Effect value after updating underlying animation'
);
}, 'Filling effect values reflect changes to underlying animations made by'
+ ' directly changing the keyframes');

</script>
</body>

0 comments on commit b513fa9

Please sign in to comment.