effect.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /web-animations/interfaces/Animation/effect.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset=utf-8>

<title>Animation.effect</title>

<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-effect">

<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 anim = new Animation();

  assert_equals(anim.effect, null, 'initial effect is null');

  const newEffect = new KeyframeEffect(createDiv(t), null);

  anim.effect = newEffect;

  assert_equals(anim.effect, newEffect, 'new effect is set');

}, 'effect is set correctly.');

test(t => {

  const div = createDiv(t);

  const animation = div.animate({ left: ['100px', '100px'] },

                                { fill: 'forwards' });

  const effect = animation.effect;

  assert_equals(getComputedStyle(div).left, '100px',

                'animation is initially having an effect');

  animation.effect = null;

  assert_equals(getComputedStyle(div).left, 'auto',

                'animation no longer has an effect');

  animation.effect = effect;

  assert_equals(getComputedStyle(div).left, '100px',

                'animation has an effect again');

}, 'Clearing and setting Animation.effect should update the computed style'

   + ' of the target element');

</script>

</body>