test_style_after_finished_on_compositor.html

Enable keyboard shortcuts

<!doctype html>

<head>

<meta charset=utf-8>

<title>Test for styles after finished on the compositor</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="../testcommon.js"></script>

<style>

.compositor {

  /* Element needs geometry to be eligible for layerization */

  width: 100px;

  height: 100px;

  background-color: green;

</style>

</head>

<body>

<div id="log"></div>

<script>

"use strict";

promise_test(async t => {

  const div = addDiv(t, { 'class': 'compositor' });

  const anim = div.animate([ { offset: 0, opacity: 1 },

                             { offset: 1, opacity: 0 } ],

                           { delay: 10,

                             duration: 100 });

  await anim.finished;

  await waitForNextFrame();

  const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');

  assert_equals(opacity, '', 'No opacity animation runs on the compositor');

}, 'Opacity animation with positive delay is removed from compositor when ' +

   'finished');

promise_test(async t => {

  const div = addDiv(t, { 'class': 'compositor' });

  const anim = div.animate([ { offset: 0,   opacity: 1 },

                             { offset: 0.9, opacity: 1 },

                             { offset: 1,   opacity: 0 } ],

                           { duration: 100 });

  await anim.finished;

  await waitForNextFrame();

  const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');

  assert_equals(opacity, '', 'No opacity animation runs on the compositor');

}, 'Opacity animation initially opacity: 1 is removed from compositor when ' +

   'finished');

promise_test(async t => {

  const div = addDiv(t, { 'class': 'compositor' });

  const anim = div.animate([ { offset: 0,    opacity: 0 },

                             { offset: 0.5,  opacity: 1 },

                             { offset: 0.51, opacity: 1 },

                             { offset: 1,    opacity: 0 } ],

                           { delay: 10, duration: 100 });

  await waitForAnimationFrames(2);

  // Setting the current time at the offset generating opacity: 1.

  anim.currentTime = 60;

  await anim.finished;

  await waitForNextFrame();

  const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');

  assert_equals(opacity, '', 'No opacity animation runs on the compositor');

}, 'Opacity animation is removed from compositor even when it only visits ' +

   'exactly the point where the opacity: 1 value was set');

promise_test(async t => {

  const div = addDiv(t, { 'class': 'compositor' });

  const anim = div.animate([ { offset: 0, transform: 'none' },

                             { offset: 1, transform: 'translateX(100px)' } ],

                           { delay: 10,

                             duration: 100 });

  await anim.finished;

  await waitForNextFrame();

  const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');

  assert_equals(transform, '', 'No transform animation runs on the compositor');

}, 'Transform animation with positive delay is removed from compositor when ' +

   'finished');

promise_test(async t => {

  const div = addDiv(t, { 'class': 'compositor' });

  const anim = div.animate([ { offset: 0,   transform: 'none' },

                             { offset: 0.9, transform: 'none' },

                             { offset: 1,   transform: 'translateX(100px)' } ],

                           { duration: 100 });

  await anim.finished;

  await waitForNextFrame();

  const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');

  assert_equals(transform, '', 'No transform animation runs on the compositor');

}, 'Transform animation initially transform: none is removed from compositor ' +

   'when finished');

promise_test(async t => {

  const div = addDiv(t, { 'class': 'compositor' });

  const anim = div.animate([ { offset: 0,   transform: 'translateX(100px)' },

                             { offset: 0.5, transform: 'none' },

                             { offset: 0.9, transform: 'none' },

                             { offset: 1,   transform: 'translateX(100px)' } ],

                           { delay: 10, duration: 100 });

  await waitForAnimationFrames(2);

  // Setting the current time at the offset generating transform: none.

  anim.currentTime = 60;

  await anim.finished;

  await waitForNextFrame();

  const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');

  assert_equals(transform, '', 'No transform animation runs on the compositor');

}, 'Transform animation is removed from compositor even when it only visits ' +

   'exactly the point where the transform: none value was set');

</script>

</body>