<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<style>
.compositable {
  /* Element needs geometry to be eligible for layerization */
  width: 100px;
  height: 100px;
  background-color: white;
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';

promise_test(async t => {
  await SpecialPowers.pushPrefEnv({
    set: [[ 'dom.animations.mainthread-synchronization-with-geometric-animations', false ]]
  });

  const elemA = addDiv(t, { class: 'compositable' });
  const elemB = addDiv(t, { class: 'compositable' });

  const animA = elemA.animate({ transform: [ 'translate(0px)',
                                             'translate(100px)' ] },
                              100 * MS_PER_SEC);
  const animB = elemB.animate({ marginLeft: [ '0px', '100px' ] },
                              100 * MS_PER_SEC);

  await waitForPaints();

  assert_true(SpecialPowers.wrap(animA).isRunningOnCompositor,
      'Transform animation should not synchronize with margin-left animation ' +
      'created within the same tick with disabling the corresponding pref');
}, 'Transform animation should not synchronize with margin-left animation '
   + 'created within the same tick with disabling the corresponding pref');

</script>
</body>
