diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/web-animations | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/web-animations')
35 files changed, 986 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 0000000000..ced7e5b283 --- /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 0000000000..6288ec1628 --- /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 0000000000..538e27fde8 --- /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 0000000000..fcca85f4ad --- /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 0000000000..7cb860e9d4 --- /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/1363639-1.html b/layout/reftests/web-animations/1363639-1.html new file mode 100644 index 0000000000..e18a8f16f8 --- /dev/null +++ b/layout/reftests/web-animations/1363639-1.html @@ -0,0 +1,28 @@ +<!doctype html> +<html class="reftest-wait"> + <head> + <meta charset=utf-8> + <title>Bug 1363639</title> + <style> + #outer { + position: absolute; + width: 100px; + height: 200px; + background: green; + } + </style> + </head> + <body> + <div id="outer"><div id="inner"></div></div> + <script> + var target = document.querySelector("#outer"); + var anim = target.animate([ + {clip: 'rect(0px, auto, 0px, 0px)'}, + {clip: 'rect(0px, auto, 200px, 0px)'} + ], 2000); + anim.pause(); + anim.currentTime = 1000; + document.documentElement.removeAttribute("class"); + </script> + </body> +</html> diff --git a/layout/reftests/web-animations/animation-utils.js b/layout/reftests/web-animations/animation-utils.js new file mode 100644 index 0000000000..d34ba635a1 --- /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/cancel-animation-with-selector-matching.html b/layout/reftests/web-animations/cancel-animation-with-selector-matching.html new file mode 100644 index 0000000000..7c78bc414e --- /dev/null +++ b/layout/reftests/web-animations/cancel-animation-with-selector-matching.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Discard cancelled animation styles</title> +<style> +#test { + width: 100px; height: 100px; + background-color: white; +} +.changed { + color: red; +} + +</style> +<div id="test"></div> +<script> + var target = document.getElementById("test"); + var anim = target.animate({ backgroundColor: [ "red", "red" ] }, 100000); + + anim.ready.then(() => { + anim.cancel(); + // Add a class name to cause selector matching in a subsequent restyle. + target.classList.add("changed"); + + document.documentElement.classList.remove("reftest-wait"); + }); +</script> diff --git a/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html b/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html new file mode 100644 index 0000000000..9a5a1dec96 --- /dev/null +++ b/layout/reftests/web-animations/child-in-animating-element-display-none-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<style> +div { + width: 100px; + height: 100px; + background-color: blue; +} +#child { + background-color: green; + width: 50px; + height: 50px; +} +</style> +<div> + <div id="child"></div> +</div> +</html> diff --git a/layout/reftests/web-animations/child-in-animating-element-display-none.html b/layout/reftests/web-animations/child-in-animating-element-display-none.html new file mode 100644 index 0000000000..57ad9f1ad2 --- /dev/null +++ b/layout/reftests/web-animations/child-in-animating-element-display-none.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> +Child element in animating element that display property is changed from none +</title> +<style> +#test { + display: none; + width: 100px; + height: 100px; +} +#child { + background-color: green; + width: 50px; + height: 50px; +} +</style> +<div id="test"> + <div id="child"></div> +</div> +<script> + var anim = test.animate({ backgroundColor: [ 'blue', 'blue' ] }, + { duration: 1000, + iterations: Infinity }); + + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.styleSheets[0].cssRules[0].style.setProperty('display', 'block'); + document.documentElement.classList.remove('reftest-wait'); + }); + }); +</script> +</html> diff --git a/layout/reftests/web-animations/green-box.html b/layout/reftests/web-animations/green-box.html new file mode 100644 index 0000000000..5f5b4d11fe --- /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.list b/layout/reftests/web-animations/reftest.list new file mode 100644 index 0000000000..05fad00127 --- /dev/null +++ b/layout/reftests/web-animations/reftest.list @@ -0,0 +1,26 @@ +== 1246046-1.html green-box.html +== 1267937-1.html 1267937-ref.html +== 1298742-1.html 1298742-ref.html +== 1363639-1.html green-box.html +== restyle-after-display-none.html green-box.html +== stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html +== stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html +== stacking-context-opacity-changing-keyframe-in-delay.html stacking-context-animation-ref.html +== stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html +== stacking-context-opacity-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html +== stacking-context-opacity-changing-effect.html stacking-context-animation-ref.html +== stacking-context-opacity-losing-css-animation-in-delay.html stacking-context-animation-ref.html +== stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html +== stacking-context-transform-changing-keyframe-in-delay.html stacking-context-animation-ref.html +== stacking-context-transform-changing-target.html stacking-context-animation-changing-target-ref.html + +== stacking-context-transform-changing-target-in-delay.html stacking-context-animation-changing-target-ref.html +== stacking-context-transform-changing-effect.html stacking-context-animation-ref.html +== stacking-context-transform-changing-effect-on-table.html stacking-context-animation-on-table-ref.html +== stacking-context-transform-changing-display-property.html stacking-context-animation-ref.html +== stacking-context-transform-losing-css-animation-in-delay.html stacking-context-animation-ref.html +test-pref(dom.animations-api.compositing.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.compositing.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.compositing.enabled,true) == style-updates-on-current-iteration-changed.html style-updates-for-iteration-composite-ref.html +== cancel-animation-with-selector-matching.html about:blank +== child-in-animating-element-display-none.html child-in-animating-element-display-none-ref.html diff --git a/layout/reftests/web-animations/restyle-after-display-none.html b/layout/reftests/web-animations/restyle-after-display-none.html new file mode 100644 index 0000000000..16c0f916b9 --- /dev/null +++ b/layout/reftests/web-animations/restyle-after-display-none.html @@ -0,0 +1,43 @@ +<!doctype html> +<html class="reftest-wait reftest-no-flush"> +<head> +<meta charset=utf-8> +<title>Check for animation restyling on an element's initial restyling after leaving a display:none subtree</title> +<style> +#target { + width: 0px; + height: 100px; + background: green; + display: none; +} +</style> +</head> +<body> +<div id="target"></div> +<script> +// Wait for a steady state before beginning so that style flushes from the +// initial restyling don't interfere with the results. +document.addEventListener('MozReftestInvalidate', () => { + requestAnimationFrame(() => { + // Get target element -- computed style should be display: none by now. + const target = document.getElementById('target'); + + // Update specified style but don't flush + target.style.display = 'block'; + + // Trigger an animation on the element. + // + // animate() won't flush styles so we are testing that it still correctly + // marks the element as needing an animation restyle even when it doesn't have + // style data. + target.animate( + { width: ['0px', '100px'] }, + { duration: 100 * 1000, easing: 'step-start' } + ); + + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> +</body> +</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 0000000000..ddc5c8c1d0 --- /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-on-table-ref.html b/layout/reftests/web-animations/stacking-context-animation-on-table-ref.html new file mode 100644 index 0000000000..286602e45f --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-animation-on-table-ref.html @@ -0,0 +1,20 @@ +<!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 { + display: table; + height: 100px; + width: 100px; + background: blue; +} +</style> +<span></span> +<div id="test"></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 0000000000..817056c1ce --- /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 0000000000..6d5324e132 --- /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 0000000000..e0864f1d58 --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-opacity-changing-keyframe-in-delay.html @@ -0,0 +1,30 @@ +<!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] }); + 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 0000000000..44676d9199 --- /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 0000000000..8a568f8b0b --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html @@ -0,0 +1,36 @@ +<!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"); + 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 0000000000..f1fdb8b442 --- /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 0000000000..01aaa091eb --- /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 0000000000..325b6eda3d --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-transform-changing-display-property.html @@ -0,0 +1,29 @@ +<!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'; + document.documentElement.classList.remove("reftest-wait"); + }); +</script> diff --git a/layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html b/layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html new file mode 100644 index 0000000000..76dbfce276 --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-transform-changing-effect-on-table.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> + Transform animation on a display:table element creates a stacking context + after changing effects +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +div { + display: table; + 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-effect.html b/layout/reftests/web-animations/stacking-context-transform-changing-effect.html new file mode 100644 index 0000000000..5e3842df36 --- /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 0000000000..b11c4d83fb --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html @@ -0,0 +1,31 @@ +<!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)'] }); + 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 0000000000..e92cdef2e5 --- /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 0000000000..f121990a84 --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-transform-changing-target-in-delay.html @@ -0,0 +1,36 @@ +<!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"); + 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 0000000000..be9e4cfd42 --- /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 0000000000..2ff9049eec --- /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 0000000000..2fe3cb8667 --- /dev/null +++ b/layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<!-- + reftest-no-flush above is necessary to make invalidation changes happen. + Without it, reftest harness takes the snapshot on the next frame after the + frame that a paint for appending the element happened. + --> +<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 }); + anim.ready.then(() => { + document.body.appendChild(div); + 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 0000000000..229e89117f --- /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 0000000000..3713a2c2ec --- /dev/null +++ b/layout/reftests/web-animations/style-updates-on-current-iteration-changed.html @@ -0,0 +1,25 @@ +<!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. + 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 0000000000..e6a111e83d --- /dev/null +++ b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html @@ -0,0 +1,28 @@ +<!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"; + // 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 0000000000..bf4d40b259 --- /dev/null +++ b/layout/reftests/web-animations/style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html @@ -0,0 +1,28 @@ +<!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"; + // Now margin-left of the element should be 200px. + document.documentElement.classList.remove("reftest-wait"); + }); +</script> |