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 /layout/reftests/web-animations
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
29 files changed, 795 insertions, 0 deletions
diff --git a/layout/reftests/web-animations/1246046-1.html b/layout/reftests/web-animations/1246046-1.html
new file mode 100644
index 000000000..ced7e5b28
--- /dev/null
+++ b/layout/reftests/web-animations/1246046-1.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html class="reftest-wait">
+  <head>
+    <meta charset=utf-8>
+    <title>Bug 1246046</title>
+    <style>
+      div {
+        width: 0px;
+        height: 100px;
+        background: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+    <script>
+      var target = document.querySelector("div");
+      var anim = target.animate(
+        [ { width: "0px" }, { width: "200px" } ], 2000);
+      anim.pause();
+      anim.currentTime = 1000;
+      document.documentElement.removeAttribute("class");
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/web-animations/1267937-1.html b/layout/reftests/web-animations/1267937-1.html
new file mode 100644
index 000000000..6288ec162
--- /dev/null
+++ b/layout/reftests/web-animations/1267937-1.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html class="reftest-wait reftest-no-flush">
+<head>
+<meta charset=utf-8>
+<title>Bug 1267937</title>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+  var target = document.getElementById("target");
+  var anim = target.animate(
+    { marginLeft: [ "0px", "10px" ] },
+    { duration: 500000 /* 500s */, easing: "steps(2, start)" });
+
+  anim.ready.then(function() {
+    // Set currentTime in before phase, i.e., GetComputedTimingAt() returns
+    // null progress in the phase so that we can skip ComposeStyle().
+    // This currentTime value should be far from zero in order to skip
+    // restyles requested by setting currentTime or frames in a next tick.
+    // If this value is near by zero, say -1, the restyles will be processed in
+    // the next tick and current time in the next tick must be greater than
+    // zero at that point, that means the animation with new frame values will
+    // be painted.  As a result, this test will be useless.
+    anim.currentTime = -500;
+
+    // Setting another frame does not cause any visual changes because
+    // the animation is still in the before phase.
+    anim.effect.setKeyframes({ marginLeft: [ "0px", "400px" ] });
+
+    var beforePhaseFrames = 0;
+    window.requestAnimationFrame(function handleFrame() {
+      if (anim.effect.getComputedTiming().progress === null) {
+        beforePhaseFrames++;
+      }
+      if (anim.effect.getComputedTiming().progress !== null) {
+        if (beforePhaseFrames == 0) {
+          console.log("WARNING: We never got frames in the before phase. " +
+                      "This test is going to be passed accidentally. " +
+                      "Consider setting smaller current time, e.g. -1000ms.");
+        }
+        // After starting the animation, progress should be 0.5, that means
+        // margin-left is 200px.
+        document.documentElement.classList.remove("reftest-wait");
+        return;
+      }
+      window.requestAnimationFrame(handleFrame);
+    });
+  });
+</script>
+</body>
+</html>
diff --git a/layout/reftests/web-animations/1267937-ref.html b/layout/reftests/web-animations/1267937-ref.html
new file mode 100644
index 000000000..538e27fde
--- /dev/null
+++ b/layout/reftests/web-animations/1267937-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Reference of bug 1267937</title>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background: green;
+  margin-left: 200px;
+}
+</style>
+</head>
+<body>
+<div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/web-animations/1298742-1.html b/layout/reftests/web-animations/1298742-1.html
new file mode 100644
index 000000000..fcca85f4a
--- /dev/null
+++ b/layout/reftests/web-animations/1298742-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>Bug 1298742</title>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  transform: translate(10px);
+}
+</style>
+<div id="target"></div>
+<script>
+  const MS_PER_SEC = 1000;
+  var elem = document.getElementById("target");
+  var animA =
+    elem.animate({ transform: [ 'translate(0px)', 'translate(60px)' ] },
+                 100 * MS_PER_SEC);
+  var animB =
+    elem.animate({ transform: [ 'translate(60px)', 'translate(0px)' ] },
+                 100 * MS_PER_SEC);
+  animA.pause();
+  animB.pause();
+
+  Promise.all([animA.ready, animB.ready]).then(function() {
+    animB.effect = null;
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/1298742-ref.html b/layout/reftests/web-animations/1298742-ref.html
new file mode 100644
index 000000000..7cb860e9d
--- /dev/null
+++ b/layout/reftests/web-animations/1298742-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<title>Reference of bug 1298742</title>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  transform: translate(0px);
+}
+</style>
+<div></div>
+</html>
diff --git a/layout/reftests/web-animations/animation-utils.js b/layout/reftests/web-animations/animation-utils.js
new file mode 100644
index 000000000..d34ba635a
--- /dev/null
+++ b/layout/reftests/web-animations/animation-utils.js
@@ -0,0 +1,13 @@
+function waitForIterationChange(animation) {
+  var initialIteration = animation.effect.getComputedTiming().currentIteration;
+  return new Promise(resolve => {
+    window.requestAnimationFrame(handleFrame = () => {
+      if (animation.effect.getComputedTiming().currentIteration !=
+            initialIteration) {
+        resolve();
+      } else {
+        window.requestAnimationFrame(handleFrame);
+      }
+    });
+  });
+}
diff --git a/layout/reftests/web-animations/green-box.html b/layout/reftests/web-animations/green-box.html
new file mode 100644
index 000000000..5f5b4d11f
--- /dev/null
+++ b/layout/reftests/web-animations/green-box.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset=utf-8>
+    <title>Reference green box</title>
+    <style>
+      div {
+        width: 100px;
+        height: 100px;
+        background: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/web-animations/reftest-stylo.list b/layout/reftests/web-animations/reftest-stylo.list
new file mode 100644
index 000000000..cc9fbfdff
--- /dev/null
+++ b/layout/reftests/web-animations/reftest-stylo.list
@@ -0,0 +1,9 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip test-pref(dom.animations-api.core.enabled,true) == 1246046-1.html 1246046-1.html
+skip test-pref(dom.animations-api.core.enabled,true) == 1267937-1.html 1267937-1.html
+skip test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation-before-appending-element.html stacking-context-transform-none-animation-before-appending-element.html
+skip test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe.html stacking-context-opacity-changing-keyframe.html
+skip test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target.html stacking-context-opacity-changing-target.html
+skip test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-transform-changing-keyframe.html
+skip test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target.html stacking-context-transform-changing-target.html
+skip test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-display-property.html stacking-context-transform-changing-display-property.html
diff --git a/layout/reftests/web-animations/reftest.list b/layout/reftests/web-animations/reftest.list
new file mode 100644
index 000000000..eefd41f49
--- /dev/null
+++ b/layout/reftests/web-animations/reftest.list
@@ -0,0 +1,20 @@
+test-pref(dom.animations-api.core.enabled,true) == 1246046-1.html green-box.html
+test-pref(dom.animations-api.core.enabled,true) == 1267937-1.html 1267937-ref.html
+test-pref(dom.animations-api.core.enabled,true) == 1298742-1.html 1298742-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-effect.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-losing-css-animation-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target.html stacking-context-animation-changing-target-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-effect.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-display-property.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-losing-css-animation-in-delay.html stacking-context-animation-ref.html
+test-pref(dom.animations-api.core.enabled,true) == style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.core.enabled,true) == style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html style-updates-for-iteration-composite-ref.html
+test-pref(dom.animations-api.core.enabled,true) == style-updates-on-current-iteration-changed.html style-updates-for-iteration-composite-ref.html
diff --git a/layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html b/layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html
new file mode 100644
index 000000000..ddc5c8c1d
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-animation-changing-target-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1279403</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  background: green;
+  position: fixed;
+  top: 50px;
+}
+div {
+  height: 100px;
+  width: 100px;
+  background: blue;
+}
+#first {
+}
+#second {
+  position: fixed;
+}
+</style>
+<span></span>
+<div id="first"></div>
+<div id="second"></div>
diff --git a/layout/reftests/web-animations/stacking-context-animation-ref.html b/layout/reftests/web-animations/stacking-context-animation-ref.html
new file mode 100644
index 000000000..817056c1c
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-animation-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1273042</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  background: green;
+  position: fixed;
+  top: 50px;
+  z-index: -1;
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-effect.html b/layout/reftests/web-animations/stacking-context-opacity-changing-effect.html
new file mode 100644
index 000000000..6d5324e13
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-effect.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+  Opacity animation creates a stacking context after changing effects
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  var elem = document.getElementById("test");
+  var anim = elem.animate(null, { duration: 100000 });
+  var newEffect = new KeyframeEffect(elem, { opacity: [1, 1] }, 100000);
+  anim.ready.then(function() {
+    anim.effect = newEffect;
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html
new file mode 100644
index 000000000..454939a86
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing keyframes to opacity frames creates a stacking context even if the
+animation is delay phase
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ width: ['100px', '100px'] },
+             { delay: 100000, duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.setKeyframes({ opacity: [0, 1] });
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html
new file mode 100644
index 000000000..44676d919
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>Changing keyframes to opacity frames creates a stacking context</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ }, { duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.setKeyframes({ opacity: [1, 1] });
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html b/layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html
new file mode 100644
index 000000000..7a6b30d79
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing target to an element that does not override opacity animations
+creates a stacking context even if the animation is delay phase
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#first {
+  width: 100px; height: 100px;
+  background: blue;
+  opacity: 1 ! important;
+}
+#second {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="first"></div>
+<div id="second"></div>
+<script>
+  var anim = document.getElementById("first")
+    .animate({ opacity: [0, 1] },
+             { delay: 100000, duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.target = document.getElementById("second");
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-changing-target.html b/layout/reftests/web-animations/stacking-context-opacity-changing-target.html
new file mode 100644
index 000000000..f1fdb8b44
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-changing-target.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+Opacity animation creates a stacking context when changing its target
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+div {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<div id="another"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ opacity: [1, 1] }, { duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.target = document.getElementById("another");
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html b/layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html
new file mode 100644
index 000000000..01aaa091e
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>
+CSS opacity animation winning over web animation in delay phase creates
+a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opacity1 {
+  from, to { opacity: 1; }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: Opacity1 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  document.getElementById("test")
+    .animate({ opacity: [0.1, 0.1] }, { duration: 100000, delay: 100000 });
+
+  requestAnimationFrame(function() {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-display-property.html b/layout/reftests/web-animations/stacking-context-transform-changing-display-property.html
new file mode 100644
index 000000000..b2d3b6c2f
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-display-property.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+Transform animation creates a stacking context when changing its display style
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+div {
+  width: 100px; height: 100px;
+  background: blue;
+  display: none;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ transform: ['none', 'none'] }, { duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.target.style.display = 'block';
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-effect.html b/layout/reftests/web-animations/stacking-context-transform-changing-effect.html
new file mode 100644
index 000000000..5e3842df3
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-effect.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+  Transform animation creates a stacking context after changing effects
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  var elem = document.getElementById("test");
+  var anim = elem.animate(null, { duration: 100000 });
+  var newEffect = new KeyframeEffect(elem,
+                                     { transform: ['none', 'none']},
+                                     100000);
+  anim.ready.then(function() {
+    anim.effect = newEffect;
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
+</html>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html
new file mode 100644
index 000000000..b12b2367c
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing keyframes to transform frames creates a stacking context even if the
+animation is delay phase
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ width: ['100px', '100px'] },
+             { delay: 100000, duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.setKeyframes(
+      { transform: ['translate(0px)', 'translate(0px)'] });
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html
new file mode 100644
index 000000000..e92cdef2e
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>Changing keyframes to transform frames creates a stacking context</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ }, { duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.setKeyframes({ transform: ['none', 'none'] });
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html b/layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html
new file mode 100644
index 000000000..54b0ad13f
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Changing target to an element that does not overrider transform animations
+creates a stacking context even if the animation is delay phase
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#first {
+  width: 100px; height: 100px;
+  background: blue;
+  transform: none ! important;
+}
+#second {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="first"></div>
+<div id="second"></div>
+<script>
+  var anim = document.getElementById("first")
+    .animate({ transform: ['translateX(0px)', 'translateX(100px)'] },
+             { delay: 100000, duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.target = document.getElementById("second");
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-target.html b/layout/reftests/web-animations/stacking-context-transform-changing-target.html
new file mode 100644
index 000000000..be9e4cfd4
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-changing-target.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<title>
+Transform animation creates a stacking context when changing its target
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+div {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<div id="another"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ transform: ['none', 'none'] }, { duration: 100000 });
+  anim.ready.then(function() {
+    anim.effect.target = document.getElementById("another");
+    requestAnimationFrame(function() {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html b/layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html
new file mode 100644
index 000000000..2ff9049ee
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>
+CSS transform animation winning over web animation in delay phase creates
+a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes TransformNone {
+  from, to { transform: none; }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  animation: TransformNone 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+  document.getElementById("test")
+    .animate({ transform: ['translateX(100px)', 'translate(100px)'] },
+             { duration: 100000, delay: 100000 });
+
+  requestAnimationFrame(function() {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+</script>
diff --git a/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html b/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html
new file mode 100644
index 000000000..c52ea4e0b
--- /dev/null
+++ b/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Transform animation whose target is not initially associated with any document creates a stacking context even if it has only 'transform:none' in its keyframe</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+div {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<script>
+  var div = document.createElement("div")
+  var anim = div.animate({ transform: ['none', 'none'] },
+                         { duration: 100000 });
+  document.body.appendChild(div);
+  anim.ready.then(function() {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+</script>
diff --git a/layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html b/layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html
new file mode 100644
index 000000000..229e89117
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-for-iteration-composite-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<title>Reference of testcases for bug 1216843</title>
+<style>
+#test {
+  width: 100px; height: 100px;
+  margin-left: 200px;
+  background: blue;
+}
+</style>
+<div id="test"></div>
diff --git a/layout/reftests/web-animations/style-updates-on-current-iteration-changed.html b/layout/reftests/web-animations/style-updates-on-current-iteration-changed.html
new file mode 100644
index 000000000..49204e3f4
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-on-current-iteration-changed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Update styles when current iteration changed</title>
+<script src="animation-utils.js"></script>
+<style>
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ marginLeft: [ "0px", "100px" ] },
+             { duration: 100000,
+               delay: -99999, // For starting right before second iteration.
+               easing: "steps(1, start)",
+               iterations: 2,
+               iterationComposite: "accumulate" });
+
+  waitForIterationChange(anim).then(() => {
+    // Wait for painting the result of the second iteration.
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html
new file mode 100644
index 000000000..f204228b1
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Update styles when iteration composition changed from accumulate to
+replace</title>
+<script src="animation-utils.js"></script>
+<style>
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ marginLeft: [ "0px", "200px" ] },
+             { duration: 100000,
+               delay: -99999, // For starting right before second iteration.
+               easing: "steps(1, start)",
+               iterations: 2,
+               iterationComposite: "accumulate" });
+
+  waitForIterationChange(anim).then(() => {
+    // Changing iterationComposite updates the element style.
+    anim.effect.iterationComposite = "replace";
+    requestAnimationFrame(() => {
+      // Now margin-left of the element should be 200px.
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</script>
diff --git a/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html
new file mode 100644
index 000000000..c5f671cd6
--- /dev/null
+++ b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Update styles when iteration composition changed from replace to
+accumulate</title>
+<script src="animation-utils.js"></script>
+<style>
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<div id="test"></div>
+<script>
+  var anim = document.getElementById("test")
+    .animate({ marginLeft: [ "0px", "100px" ] },
+             { duration: 100000,
+               delay: -99999, // For starting right before second iteration.
+               easing: "steps(1, start)",
+               iterations: 2,
+               iterationComposite: "replace" });
+
+  waitForIterationChange(anim).then(() => {
+    // Changing iterationComposite updates the element style.
+    anim.effect.iterationComposite = "accumulate";
+    requestAnimationFrame(() => {
+      // Now margin-left of the element should be 200px.
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+</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 /layout/reftests/web-animations
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip