diff options
Diffstat (limited to 'layout/reftests/web-animations')
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> |