Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /dom/animation/test/style
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
8 files changed, 537 insertions, 0 deletions
diff --git a/dom/animation/test/style/file_animation-seeking-with-current-time.html b/dom/animation/test/style/file_animation-seeking-with-current-time.html
new file mode 100644
index 000000000..c3a590394
--- /dev/null
+++ b/dom/animation/test/style/file_animation-seeking-with-current-time.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8>
+    <title>Tests for seeking using Animation.currentTime</title>
+    <style>
+.animated-div {
+  margin-left: -10px;
+  animation-timing-function: linear ! important;
+}
+
+@keyframes anim {
+  from { margin-left: 0px; }
+  to { margin-left: 100px; }
+}
+    </style>
+    <script src="../testcommon.js"></script>
+  </head>
+  <body>
+    <script type="text/javascript">
+'use strict';
+
+function assert_marginLeft_equals(target, expect, description) {
+  var marginLeft = parseFloat(getComputedStyle(target).marginLeft);
+  assert_equals(marginLeft, expect, description);
+}
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function() {
+    animation.currentTime = 90 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 90,
+      'Computed style is updated when seeking forwards in active interval');
+
+    animation.currentTime = 10 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 10,
+      'Computed style is updated when seeking backwards in active interval');
+  });
+}, 'Seeking forwards and backward in active interval');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    assert_marginLeft_equals(div, -10,
+      'Computed style is unaffected in before phase with no backwards fill');
+
+    // before -> active (non-active -> active)
+    animation.currentTime = 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed style is updated when seeking forwards from ' +
+      'not \'in effect\' to \'in effect\' state');
+  });
+}, 'Seeking to non-\'in effect\' from \'in effect\' (before -> active)');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    // move to after phase
+    animation.currentTime = 250 * MS_PER_SEC;
+    assert_marginLeft_equals(div, -10,
+      'Computed style is unaffected in after phase with no forwards fill');
+
+    // after -> active (non-active -> active)
+    animation.currentTime = 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed style is updated when seeking backwards from ' +
+      'not \'in effect\' to \'in effect\' state');
+  });
+}, 'Seeking to non-\'in effect\' from \'in effect\' (after -> active)');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    // move to active phase
+    animation.currentTime = 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed value is set during active phase');
+
+    // active -> before
+    animation.currentTime = 50 * MS_PER_SEC;
+    assert_marginLeft_equals(div, -10,
+      'Computed value is not effected after seeking backwards from ' +
+      '\'in effect\' to not \'in effect\' state');
+  });
+}, 'Seeking to \'in effect\' from non-\'in effect\' (active -> before)');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    // move to active phase
+    animation.currentTime = 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed value is set during active phase');
+
+    // active -> after
+    animation.currentTime = 250 * MS_PER_SEC;
+    assert_marginLeft_equals(div, -10,
+      'Computed value is not affected after seeking forwards from ' +
+      '\'in effect\' to not \'in effect\' state');
+  });
+}, 'Seeking to \'in effect\' from non-\'in effect\' (active -> after)');
+
+done();
+    </script>
+  </body>
+</html>
diff --git a/dom/animation/test/style/file_animation-seeking-with-start-time.html b/dom/animation/test/style/file_animation-seeking-with-start-time.html
new file mode 100644
index 000000000..ba09827c6
--- /dev/null
+++ b/dom/animation/test/style/file_animation-seeking-with-start-time.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8>
+    <title>Tests for seeking using Animation.startTime</title>
+    <style>
+.animated-div {
+  margin-left: -10px;
+  animation-timing-function: linear ! important;
+}
+
+@keyframes anim {
+  from { margin-left: 0px; }
+  to { margin-left: 100px; }
+}
+    </style>
+    <script src="../testcommon.js"></script>
+  </head>
+  <body>
+    <script type="text/javascript">
+'use strict';
+
+function assert_marginLeft_equals(target, expect, description) {
+  var marginLeft = parseFloat(getComputedStyle(target).marginLeft);
+  assert_equals(marginLeft, expect, description);
+}
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function() {
+   animation.startTime = animation.timeline.currentTime - 90 * MS_PER_SEC
+    assert_marginLeft_equals(div, 90,
+      'Computed style is updated when seeking forwards in active interval');
+
+    animation.startTime = animation.timeline.currentTime - 10 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 10,
+      'Computed style is updated when seeking backwards in active interval');
+  });
+}, 'Seeking forwards and backward in active interval');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    assert_marginLeft_equals(div, -10,
+      'Computed style is unaffected in before phase with no backwards fill');
+
+    // before -> active (non-active -> active)
+    animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed style is updated when seeking forwards from ' +
+      'not \'in effect\' to \'in effect\' state');
+  });
+}, 'Seeking to non-\'in effect\' from \'in effect\' (before -> active)');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    // move to after phase
+    animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
+    assert_marginLeft_equals(div, -10,
+      'Computed style is unaffected in after phase with no forwards fill');
+
+    // after -> active (non-active -> active)
+    animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed style is updated when seeking backwards from ' +
+      'not \'in effect\' to \'in effect\' state');
+  });
+}, 'Seeking to non-\'in effect\' from \'in effect\' (after -> active)');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    // move to active phase
+    animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed value is set during active phase');
+
+    // active -> before
+    animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
+    assert_marginLeft_equals(div, -10,
+      'Computed value is not affected after seeking backwards from ' +
+      '\'in effect\' to not \'in effect\' state');
+  });
+}, 'Seeking to \'in effect\' from non-\'in effect\' (active -> before)');
+
+promise_test(function(t) {
+  var div = addDiv(t, {'class': 'animated-div'});
+  div.style.animation = "anim 100s 100s";
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(function(t) {
+    // move to active phase
+    animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
+    assert_marginLeft_equals(div, 50,
+      'Computed value is set during active phase');
+
+    // active -> after
+    animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
+    assert_marginLeft_equals(div, -10,
+      'Computed value is not affected after seeking forwards from ' +
+      '\'in effect\' to not \'in effect\' state');
+  });
+}, 'Seeking to \'in effect\' from non-\'in effect\' (active -> after)');
+
+done();
+    </script>
+  </body>
+</html>
diff --git a/dom/animation/test/style/file_animation-setting-effect.html b/dom/animation/test/style/file_animation-setting-effect.html
new file mode 100644
index 000000000..cf50cf2ce
--- /dev/null
+++ b/dom/animation/test/style/file_animation-setting-effect.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8>
+    <title>Tests for setting effects by using Animation.effect</title>
+    <script src='../testcommon.js'></script>
+  </head>
+  <body>
+    <script type='text/javascript'>
+
+'use strict';
+
+test(function(t) {
+  var target = addDiv(t);
+  var anim = new Animation();
+  anim.effect = new KeyframeEffectReadOnly(target,
+                                           { marginLeft: [ '0px', '100px' ] },
+                                           100 * MS_PER_SEC);
+  anim.currentTime = 50 * MS_PER_SEC;
+  assert_equals(getComputedStyle(target).marginLeft, '50px');
+}, 'After setting target effect on an animation with null effect, the ' +
+   'animation still works');
+
+test(function(t) {
+  var target = addDiv(t);
+  target.style.marginLeft = '10px';
+  var anim = target.animate({ marginLeft: [ '0px', '100px' ] },
+                            100 * MS_PER_SEC);
+  anim.currentTime = 50 * MS_PER_SEC;
+  assert_equals(getComputedStyle(target).marginLeft, '50px');
+
+  anim.effect = null;
+  assert_equals(getComputedStyle(target).marginLeft, '10px');
+}, 'After setting null target effect, the computed style of the target ' +
+   'element becomes the initial value');
+
+test(function(t) {
+  var target = addDiv(t);
+  var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
+                             100 * MS_PER_SEC);
+  var animB = new Animation();
+  animA.currentTime = 50 * MS_PER_SEC;
+  animB.currentTime = 20 * MS_PER_SEC;
+  assert_equals(getComputedStyle(target).marginLeft, '50px',
+                'original computed style of the target element');
+
+  animB.effect = animA.effect;
+  assert_equals(getComputedStyle(target).marginLeft, '20px',
+                'new computed style of the target element');
+}, 'After setting the target effect from an existing animation, the computed ' +
+   'style of the target effect should reflect the time of the updated ' +
+   'animation.');
+
+test(function(t) {
+  var target = addDiv(t);
+  target.style.marginTop = '-10px';
+  var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
+                             100 * MS_PER_SEC);
+  var animB = target.animate({ marginTop: [ '0px', '100px' ] },
+                             50 * MS_PER_SEC);
+  animA.currentTime = 50 * MS_PER_SEC;
+  animB.currentTime = 10 * MS_PER_SEC;
+  assert_equals(getComputedStyle(target).marginLeft, '50px',
+                'original margin-left of the target element');
+  assert_equals(getComputedStyle(target).marginTop, '20px',
+                'original margin-top of the target element');
+
+  animB.effect = animA.effect;
+  assert_equals(getComputedStyle(target).marginLeft, '10px',
+                'new margin-left of the target element');
+  assert_equals(getComputedStyle(target).marginTop, '-10px',
+                'new margin-top of the target element');
+}, 'After setting target effect with an animation to another animation which ' +
+   'also has an target effect and both animation effects target to the same ' +
+   'element, the computed style of this element should reflect the time and ' +
+   'effect of the animation that was set');
+
+test(function(t) {
+  var targetA = addDiv(t);
+  var targetB = addDiv(t);
+  targetB.style.marginLeft = '-10px';
+  var animA = targetA.animate({ marginLeft: [ '0px', '100px' ] },
+                              100 * MS_PER_SEC);
+  var animB = targetB.animate({ marginLeft: [ '0px', '100px' ] },
+                              50 * MS_PER_SEC);
+  animA.currentTime = 50 * MS_PER_SEC;
+  animB.currentTime = 10 * MS_PER_SEC;
+  assert_equals(getComputedStyle(targetA).marginLeft, '50px',
+                'original margin-left of the first element');
+  assert_equals(getComputedStyle(targetB).marginLeft, '20px',
+                'original margin-left of the second element');
+
+  animB.effect = animA.effect;
+  assert_equals(getComputedStyle(targetA).marginLeft, '10px',
+                'new margin-left of the first element');
+  assert_equals(getComputedStyle(targetB).marginLeft, '-10px',
+                'new margin-left of the second element');
+}, 'After setting target effect with an animation to another animation which ' +
+   'also has an target effect and these animation effects target to ' +
+   'different elements, the computed styles of the two elements should ' +
+   'reflect the time and effect of the animation that was set');
+
+test(function(t) {
+  var target = addDiv(t);
+  var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
+                             50 * MS_PER_SEC);
+  var animB = target.animate({ marginTop: [ '0px', '50px' ] },
+                             100 * MS_PER_SEC);
+  animA.currentTime = 20 * MS_PER_SEC;
+  animB.currentTime = 30 * MS_PER_SEC;
+  assert_equals(getComputedStyle(target).marginLeft, '40px');
+  assert_equals(getComputedStyle(target).marginTop, '15px');
+
+  var effectA = animA.effect;
+  animA.effect = animB.effect;
+  animB.effect = effectA;
+  assert_equals(getComputedStyle(target).marginLeft, '60px');
+  assert_equals(getComputedStyle(target).marginTop, '10px');
+}, 'After swapping effects of two playing animations, both animations are ' +
+   'still running with the same current time');
+
+done();
+    </script>
+  </body>
+</html>
diff --git a/dom/animation/test/style/file_animation-setting-spacing.html b/dom/animation/test/style/file_animation-setting-spacing.html
new file mode 100644
index 000000000..6098b7433
--- /dev/null
+++ b/dom/animation/test/style/file_animation-setting-spacing.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<head>
+<meta charset=utf-8>
+<title>Tests for setting spacing by using KeyframeEffect.spacing</title>
+<script src='../testcommon.js'></script>
+</head>
+<body>
+<script>
+'use strict';
+
+function calculateInterpolation(pacedDistances, values, progress) {
+  if (progress == 0.0) {
+    return values[0];
+  } else if (progress == 1.0) {
+    return values[valus.length - 1];
+  }
+
+  const cumDist = pacedDistances.reduce( (prev, curr) => {
+    prev.push(prev.length == 0 ? curr : curr + prev[prev.length - 1]);
+    return prev;
+  }, []);
+
+  const last = cumDist[cumDist.length - 1];
+  const offsets = cumDist.map( (curr) => { return curr / last; } );
+
+  let idx = 0;
+  for (let i = 0; i < offsets.length - 1; ++i) {
+    if (progress >= offsets[i] && progress < offsets[i + 1]) {
+      idx = i;
+      break;
+    }
+  }
+
+  const ratio = (progress - offsets[idx]) / (offsets[idx + 1] - offsets[idx]);
+  return values[idx] + ratio * (values[idx + 1] - values[idx]) + 'px';
+}
+
+promise_test(function(t) {
+  var target = addDiv(t);
+  var anim = target.animate([ { marginLeft: '0px' },
+                              { marginLeft: '-20px' },
+                              { marginLeft: '100px' },
+                              { marginLeft: '50px' } ],
+                            100 * MS_PER_SEC);
+
+  return anim.ready.then(function() {
+    anim.currentTime = 50 * MS_PER_SEC;
+    assert_equals(getComputedStyle(target).marginLeft, '40px',
+                  'computed value before setting a new spacing');
+
+    var dist = [0, 20, 120, 50];
+    var marginLeftValues = [0, -20, 100, 50];
+    anim.effect.spacing = 'paced(margin-left)';
+    assert_equals(getComputedStyle(target).marginLeft,
+                  calculateInterpolation(dist, marginLeftValues, 0.5),
+                  'computed value after setting a new spacing');
+  });
+}, 'Test for setting spacing from distribute to paced');
+
+promise_test(function(t) {
+  var target = addDiv(t);
+  var anim = target.animate([ { marginLeft: '0px' },
+                              { marginLeft: '-20px' },
+                              { marginLeft: '100px' },
+                              { marginLeft: '50px' } ],
+                            { duration: 100 * MS_PER_SEC,
+                              spacing: 'paced(margin-left)' });
+
+  return anim.ready.then(function() {
+    var dist = [0, 20, 120, 50];
+    var marginLeftValues = [0, -20, 100, 50];
+    anim.currentTime = 50 * MS_PER_SEC;
+    assert_equals(getComputedStyle(target).marginLeft,
+                  calculateInterpolation(dist, marginLeftValues, 0.5),
+                  'computed value before setting a new spacing');
+
+    anim.effect.spacing = 'distribute';
+    assert_equals(getComputedStyle(target).marginLeft, '40px',
+                  'computed value after setting a new spacing');
+  });
+}, 'Test for setting spacing from paced to distribute');
+
+promise_test(function(t) {
+  var target = addDiv(t);
+  var anim =
+    target.animate([ { marginLeft: '0px', borderRadius: '0%' },
+                     { marginLeft: '-20px', borderRadius: '50%' },
+                     { marginLeft: '100px', borderRadius: '25%' },
+                     { marginLeft: '50px', borderRadius: '100%' } ],
+                   { duration: 100 * MS_PER_SEC,
+                     spacing: 'paced(margin-left)' });
+
+  return anim.ready.then(function() {
+    var dist = [0, 20, 120, 50];
+    var marginLeftValues = [0, -20, 100, 50];
+    anim.currentTime = 50 * MS_PER_SEC;
+    assert_equals(getComputedStyle(target).marginLeft,
+                  calculateInterpolation(dist, marginLeftValues, 0.5),
+                  'computed value before setting a new spacing');
+
+    dist = [0, 50, 25, 75];
+    anim.effect.spacing = 'paced(border-radius)';
+    assert_equals(getComputedStyle(target).marginLeft,
+                  calculateInterpolation(dist, marginLeftValues, 0.5),
+                  'computed value after setting a new spacing');
+  });
+}, 'Test for setting spacing from paced to a different paced');
+
+done();
+</script>
+</body>
diff --git a/dom/animation/test/style/test_animation-seeking-with-current-time.html b/dom/animation/test/style/test_animation-seeking-with-current-time.html
new file mode 100644
index 000000000..386e57788
--- /dev/null
+++ b/dom/animation/test/style/test_animation-seeking-with-current-time.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+  { "set": [["dom.animations-api.core.enabled", true]]},
+  function() {
+    window.open("file_animation-seeking-with-current-time.html");
+  });
+</script>
+</html>
diff --git a/dom/animation/test/style/test_animation-seeking-with-start-time.html b/dom/animation/test/style/test_animation-seeking-with-start-time.html
new file mode 100644
index 000000000..0a1691a08
--- /dev/null
+++ b/dom/animation/test/style/test_animation-seeking-with-start-time.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+  { "set": [["dom.animations-api.core.enabled", true]]},
+  function() {
+    window.open("file_animation-seeking-with-start-time.html");
+  });
+</script>
+</html>
diff --git a/dom/animation/test/style/test_animation-setting-effect.html b/dom/animation/test/style/test_animation-setting-effect.html
new file mode 100644
index 000000000..1199b3e75
--- /dev/null
+++ b/dom/animation/test/style/test_animation-setting-effect.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<div id='log'></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+  { 'set': [['dom.animations-api.core.enabled', true]]},
+  function() {
+    window.open('file_animation-setting-effect.html');
+  });
+</script>
+</html>
diff --git a/dom/animation/test/style/test_animation-setting-spacing.html b/dom/animation/test/style/test_animation-setting-spacing.html
new file mode 100644
index 000000000..1c703e2a3
--- /dev/null
+++ b/dom/animation/test/style/test_animation-setting-spacing.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset=utf-8>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<div id='log'></div>
+<script>
+'use strict';
+setup({explicit_done: true});
+SpecialPowers.pushPrefEnv(
+  { 'set': [['dom.animations-api.core.enabled', true]]},
+  function() {
+    window.open('file_animation-setting-spacing.html');
+  });
+</script>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /dom/animation/test/style
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip