diff options
Diffstat (limited to 'layout/reftests/css-animations')
52 files changed, 1306 insertions, 0 deletions
diff --git a/layout/reftests/css-animations/animate-display-table-opacity-ref.html b/layout/reftests/css-animations/animate-display-table-opacity-ref.html new file mode 100644 index 0000000000..958c8c3f63 --- /dev/null +++ b/layout/reftests/css-animations/animate-display-table-opacity-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Testcase for bug 1245075</title> +<style> +#test { + width: 100px; height: 100px; + background: rgb(102, 102, 255); +} +</style> +<div id="test"></div> diff --git a/layout/reftests/css-animations/animate-display-table-opacity.html b/layout/reftests/css-animations/animate-display-table-opacity.html new file mode 100644 index 0000000000..0d03054938 --- /dev/null +++ b/layout/reftests/css-animations/animate-display-table-opacity.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Testcase for bug 1245075</title> +<style> +@keyframes HoldOpacity { + from, to { opacity: 0.6 } +} +#test { + width: 100px; height: 100px; + background: blue; + display: table; + animation: HoldOpacity 100s linear infinite; +} +</style> +<div id="test"></div> diff --git a/layout/reftests/css-animations/animate-opacity-ref.html b/layout/reftests/css-animations/animate-opacity-ref.html new file mode 100644 index 0000000000..d0b3bff4ae --- /dev/null +++ b/layout/reftests/css-animations/animate-opacity-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<title>Reftest, bug 1156456</title> +<style> + +body { + background: #2a4; +} + +div { + width: 200px; height: 200px; + background: #c37; + opacity: 0.6; + will-change: opacity; +} + +</style> +<div></div> diff --git a/layout/reftests/css-animations/animate-opacity.html b/layout/reftests/css-animations/animate-opacity.html new file mode 100644 index 0000000000..ff09fe514b --- /dev/null +++ b/layout/reftests/css-animations/animate-opacity.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> +<title>Reftest, bug 1156456</title> +<style> + +body { + background: #2a4; +} + +@keyframes HoldOpacity { + from, to { + opacity: 0.6; + } +} + +div { + width: 200px; height: 200px; + background: #c37; + animation: 10s HoldOpacity infinite; +} + +</style> +<div></div> diff --git a/layout/reftests/css-animations/animate-preserves3d-ref.html b/layout/reftests/css-animations/animate-preserves3d-ref.html new file mode 100644 index 0000000000..d85a9772a5 --- /dev/null +++ b/layout/reftests/css-animations/animate-preserves3d-ref.html @@ -0,0 +1,30 @@ +<html> + <head> + <style type="text/css"> + .pad { + display: block; + height: 20px; + } + .out { + display: block; + position: absolute; + transform-origin: 0 0; + width: 100px; + height: 50px; + overflow: hidden; + left: 108px; + } + .rect { + width: 100px; + height: 50px; + background-color: grey; + } + </style> + </head> + <body> + <div class="pad"></div> + <div class="out"> + <div class="rect"></div> + </div> + </body> +</html> diff --git a/layout/reftests/css-animations/animate-preserves3d.html b/layout/reftests/css-animations/animate-preserves3d.html new file mode 100644 index 0000000000..cf390513b7 --- /dev/null +++ b/layout/reftests/css-animations/animate-preserves3d.html @@ -0,0 +1,38 @@ +<html> + <head> + <style type="text/css"> + .pad { + display: block; + height: 20px; + } + .out { + display: block; + position: absolute; + transform-origin: 0 0; + width: 100px; + height: 50px; + overflow: hidden; + } + .rect { + width: 100px; + height: 50px; + background-color: grey; + } + + .ani { + animation: rot 200s linear infinite; + animation-timing-function: steps(2, start); + transform-origin: 50px 50px; + } + @keyframes rot { + to { transform: translate(200px, 0px); } + } + </style> + </head> + <body> + <div class="pad"></div> + <div class="out ani"> + <div class="rect"></div> + </div> + </body> +</html> diff --git a/layout/reftests/css-animations/background-position-after-finish.html b/layout/reftests/css-animations/background-position-after-finish.html new file mode 100644 index 0000000000..528cfc0f8f --- /dev/null +++ b/layout/reftests/css-animations/background-position-after-finish.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>background-position-x animation after finish</title> +<style> +@keyframes holdBackgroundPosition { + from,to { background-position-x: 100%; } +} +#test { + height: 100px; + width: 100px; + background-repeat: no-repeat; + background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */ + animation: holdBackgroundPosition 0.01s; + background-position-x: 50%; +} +</style> +<div id="test" class="reftest-opaque-layer"></div> +<script> +document.getElementById("test").addEventListener("animationend", () => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }) +}, false); +</script> diff --git a/layout/reftests/css-animations/background-position-important.html b/layout/reftests/css-animations/background-position-important.html new file mode 100644 index 0000000000..2b6536cbf1 --- /dev/null +++ b/layout/reftests/css-animations/background-position-important.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<title>background-position-x animation overridden by important style</title> +<style> +@keyframes holdBackgroundPosition { + from,to { background-position-x: 50%; } +} +#test { + height: 100px; + width: 100px; + background-repeat: no-repeat; + background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */ + background-position-x: 50% !important; + animation: holdBackgroundPosition 100s infinite; +} +</style> +<div id="test" class="reftest-opaque-layer"></div> diff --git a/layout/reftests/css-animations/background-position-in-delay.html b/layout/reftests/css-animations/background-position-in-delay.html new file mode 100644 index 0000000000..0ddc220b2e --- /dev/null +++ b/layout/reftests/css-animations/background-position-in-delay.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>background-position-x animation in delay phase</title> +<style> +@keyframes holdBackgroundPosition { + from,to { background-position-x: 100%; } +} +#test { + height: 100px; + width: 100px; + background-repeat: no-repeat; + background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */ + animation: holdBackgroundPosition 100s 100s infinite; + background-position-x: 50%; +} +</style> +<div id="test" class="reftest-opaque-layer"></div> diff --git a/layout/reftests/css-animations/background-position-ref.html b/layout/reftests/css-animations/background-position-ref.html new file mode 100644 index 0000000000..d479820469 --- /dev/null +++ b/layout/reftests/css-animations/background-position-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Reference of testcases for background-position-x animations</title> +<style> +#test { + height: 100px; + width: 100px; + background-repeat: no-repeat; + background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */ + background-position-x: 50%; +} +</style> +<div id="test"></div> diff --git a/layout/reftests/css-animations/background-position-running.html b/layout/reftests/css-animations/background-position-running.html new file mode 100644 index 0000000000..73e811d599 --- /dev/null +++ b/layout/reftests/css-animations/background-position-running.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>background-position-x animation while running</title> +<style> +@keyframes holdBackgroundPosition { + from,to { background-position-x: 50%; } +} +#test { + height: 100px; + width: 100px; + background-repeat: no-repeat; + background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF/wAAAAAAQaMSAwAAABJJREFUeNpiYBgFo2AwAIAAAwACigABtnCV2AAAAABJRU5ErkJggg==); /* a 25x25 px red box */ + background-position-x: 0px; + animation: holdBackgroundPosition 100s infinite; +} +</style> +<div id="test" class="reftest-opaque-layer"></div> diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html new file mode 100644 index 0000000000..b94f18dd4b --- /dev/null +++ b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<title>In visibility hidden color animation on pseudo element</title> +<style> + +div:before { + visibility: visible; + color: blue; + content: "Color Animation"; +} + +div { + color: black; + visibility: hidden; +} + +</style> +<div>color animation on visible psuedo element attached to invisible element</div> diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html new file mode 100644 index 0000000000..b8c456b8f6 --- /dev/null +++ b/layout/reftests/css-animations/in-visibility-hidden-animation-pseudo-element.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>In visibility hidden color animation on pseudo element</title> +<style> + +@keyframes color { + 0% { color: black } + 1% { color: blue } + 100% { color: blue } +} + +div:before { + visibility: visible; + content: "Color Animation"; + animation: color 0.1s 1 forwards; +} + +div { + color: black; + visibility: hidden; +} + +</style> +<div id="target">color animation on visible pseudo element attached to invisible element</div> +<script> + +document.getElementById("target").addEventListener("animationend", AnimationEndListener, false); + +function AnimationEndListener(event) { + setTimeout(RemoveReftestWait, 0); +} + +function RemoveReftestWait() { + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation-ref.html b/layout/reftests/css-animations/in-visibility-hidden-animation-ref.html new file mode 100644 index 0000000000..09997ef486 --- /dev/null +++ b/layout/reftests/css-animations/in-visibility-hidden-animation-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html> +<title>In visibility hidden color animation</title> +<style> + +p { + color: blue; + visibility: visible; +} + +div { + visibility: hidden; +} + +</style> +<div><p>color animation on visible element in invisible parent element</p></div> diff --git a/layout/reftests/css-animations/in-visibility-hidden-animation.html b/layout/reftests/css-animations/in-visibility-hidden-animation.html new file mode 100644 index 0000000000..b39e65adfd --- /dev/null +++ b/layout/reftests/css-animations/in-visibility-hidden-animation.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>in visibility hidden color animation</title> +<style> + +@keyframes color { + 0% { color: black } + 1% { color: blue } + 100% { color: blue } +} + +p { + visibility: visible; +} + +div { + color: black; + animation: color 0.1s 1 forwards; + visibility: hidden; +} + +</style> +<div id="parent"><p>color animation on visible element in invisible parent element</p></div> +<script> + +document.getElementById("parent").addEventListener("animationend", AnimationEndListener, false); + +function AnimationEndListener(event) { + setTimeout(RemoveReftestWait, 0); +} + +function RemoveReftestWait() { + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/css-animations/no-stacking-context-animation-ref.html b/layout/reftests/css-animations/no-stacking-context-animation-ref.html new file mode 100644 index 0000000000..efc029d03e --- /dev/null +++ b/layout/reftests/css-animations/no-stacking-context-animation-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title> +Reference of testcases which don't create a stacking context for bug 1278136 +</title> +<style> +span { + height: 100px; + width: 100px; + background: green; + position: fixed; + top: 50px; +} +#test { + height: 100px; + width: 100px; + background: blue; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html b/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html new file mode 100644 index 0000000000..f8b58ed209 --- /dev/null +++ b/layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> +Removing CSS animation in delay phase destroys a stacking context +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opacity0 { + from, to { opacity: 0 } +} +#test { + width: 100px; height: 100px; + background: blue; + opacity: 1 ! important; +} +</style> +<span></span> +<div id="test"></div> +<script> +window.addEventListener("load", () => { + var target = document.getElementById("test"); + target.style.animation = "Opacity0 100s 100s"; + + // We need to wait for MozAfterPaint instead of requestAnimationFrame to + // ensure the stacking context has been updated on the compositor. + window.addEventListener("MozAfterPaint", function firstPaint() { + window.removeEventListener("MozAfterPaint", firstPaint, false); + // Here we have CSS animation on 100% opacity style element, so + // there should be a stacking context. + + target.style.animation = ""; + + // This time we don't need to wait for MozAfterPaint because reftest tool + // will be received MozAferPaint event. + requestAnimationFrame(() => { + // Now we have only 100% opacity style, so we should not create any + // stacking context. + document.documentElement.classList.remove("reftest-wait"); + }); + }, false); +}); +</script> diff --git a/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html b/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html new file mode 100644 index 0000000000..19605a93c1 --- /dev/null +++ b/layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> +Removing CSS animation in delay phase destroys 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; + transform: none ! important; +} +</style> +<span></span> +<div id="test"></div> +<script> +window.addEventListener("load", () => { + var target = document.getElementById("test"); + target.style.animation = "TransformNone 100s 100s"; + + // We need to wait for MozAfterPaint instead of requestAnimationFrame to + // ensure the stacking context has been updated on the compositor. + window.addEventListener("MozAfterPaint", function firstPaint() { + window.removeEventListener("MozAfterPaint", firstPaint, false); + // Here we have CSS animation on transform:none style element, so + // there should be a stacking context. + + target.style.animation = ""; + // This time we don't need to wait for MozAfterPaint because reftest tool + // will be received MozAferPaint event. + requestAnimationFrame(() => { + // Now we have only transform:none style, so we should not create any + // stacking context. + document.documentElement.classList.remove("reftest-wait"); + }); + }, false); +}); +</script> diff --git a/layout/reftests/css-animations/partially-out-of-view-animation-ref.html b/layout/reftests/css-animations/partially-out-of-view-animation-ref.html new file mode 100644 index 0000000000..fafb98b2dc --- /dev/null +++ b/layout/reftests/css-animations/partially-out-of-view-animation-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html> +<title>Animation on element which is partially out of the view</title> +<style> + +div { + position: absolute; + width: 200px; + height: 200px; + background-color: blue; + top: -100px; +} + +</style> +<div></div> diff --git a/layout/reftests/css-animations/partially-out-of-view-animation.html b/layout/reftests/css-animations/partially-out-of-view-animation.html new file mode 100644 index 0000000000..4244a2d1e9 --- /dev/null +++ b/layout/reftests/css-animations/partially-out-of-view-animation.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>Animation on element which is partially out of the view</title> +<style> + +@keyframes background-color { + 0% { background-color: black } + 1% { background-color: blue } + 100% { background-color: blue } +} + +div { + position: absolute; + width: 200px; + height: 200px; + background-color: black; + animation: background-color 0.1s 1 forwards; + top: -100px; +} + +</style> +<div id="target"></div> +<script> + +document.getElementById("target").addEventListener("animationend", AnimationEndListener, false); + +function AnimationEndListener(event) { + setTimeout(RemoveReftestWait, 0); +} + +function RemoveReftestWait() { + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/css-animations/print-no-animations-notref.html b/layout/reftests/css-animations/print-no-animations-notref.html new file mode 100644 index 0000000000..dadf405ea8 --- /dev/null +++ b/layout/reftests/css-animations/print-no-animations-notref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html class="reftest-print"> +<title>Static CSS animation</title> +<style> + +p { + color: blue; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/layout/reftests/css-animations/print-no-animations-ref.html b/layout/reftests/css-animations/print-no-animations-ref.html new file mode 100644 index 0000000000..f4d3dde365 --- /dev/null +++ b/layout/reftests/css-animations/print-no-animations-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html class="reftest-print"> +<title>Static CSS animation</title> +<style> + +p { + color: olive; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/layout/reftests/css-animations/print-no-animations.html b/layout/reftests/css-animations/print-no-animations.html new file mode 100644 index 0000000000..a52334cd86 --- /dev/null +++ b/layout/reftests/css-animations/print-no-animations.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html class="reftest-print"> +<title>Static CSS animation</title> +<style> + +@keyframes a { + from, to { color: blue } +} + +p { + color: olive; + animation: a 1s infinite; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/layout/reftests/css-animations/reftest-stylo.list b/layout/reftests/css-animations/reftest-stylo.list new file mode 100644 index 0000000000..fcff4eff6b --- /dev/null +++ b/layout/reftests/css-animations/reftest-stylo.list @@ -0,0 +1,34 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== screen-animations.html screen-animations.html +== screen-animations.html screen-animations.html +== print-no-animations.html print-no-animations.html +# reftest harness doesn't actually make pres context non-dynamic for reftest-print tests +== print-no-animations.html print-no-animations.html +# reftest harness doesn't actually make pres context non-dynamic for reftest-print tests +== animate-opacity.html animate-opacity.html +== animate-preserves3d.html animate-preserves3d.html +== in-visibility-hidden-animation.html in-visibility-hidden-animation.html +== in-visibility-hidden-animation-pseudo-element.html in-visibility-hidden-animation-pseudo-element.html +== partially-out-of-view-animation.html partially-out-of-view-animation.html +== animate-display-table-opacity.html animate-display-table-opacity.html +# We need to run 100% opacity test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor +test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-opacity-1-animation.html stacking-context-opacity-1-animation.html +# We need to run transform:none test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor +test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-transform-none-animation.html stacking-context-transform-none-animation.html +== stacking-context-lose-opacity-1.html stacking-context-lose-opacity-1.html +== stacking-context-lose-transform-none.html stacking-context-lose-transform-none.html +== stacking-context-opacity-1-animation.html stacking-context-opacity-1-animation.html +== stacking-context-opacity-1-with-fill-backwards.html stacking-context-opacity-1-with-fill-backwards.html +== stacking-context-opacity-1-with-fill-forwards.html stacking-context-opacity-1-with-fill-forwards.html +== stacking-context-paused-on-opacity-1.html stacking-context-paused-on-opacity-1.html +== stacking-context-paused-on-transform-none.html stacking-context-paused-on-transform-none.html +== stacking-context-transform-none-animation.html stacking-context-transform-none-animation.html +== stacking-context-transform-none-animation-on-svg.html stacking-context-transform-none-animation-on-svg.html +== stacking-context-transform-none-animation-with-backface-visibility.html stacking-context-transform-none-animation-with-backface-visibility.html +== stacking-context-transform-none-animation-with-preserve-3d.html stacking-context-transform-none-animation-with-preserve-3d.html +== stacking-context-transform-none-with-fill-backwards.html stacking-context-transform-none-with-fill-backwards.html +== stacking-context-transform-none-with-fill-forwards.html stacking-context-transform-none-with-fill-forwards.html +== stacking-context-opacity-1-in-delay.html stacking-context-opacity-1-in-delay.html +# bug 1278136 and bug 1279403 +== stacking-context-transform-none-in-delay.html stacking-context-transform-none-in-delay.html +# bug 1278136 and bug 1279403 diff --git a/layout/reftests/css-animations/reftest.list b/layout/reftests/css-animations/reftest.list new file mode 100644 index 0000000000..bf9fa7058c --- /dev/null +++ b/layout/reftests/css-animations/reftest.list @@ -0,0 +1,43 @@ +== screen-animations.html screen-animations-ref.html +!= screen-animations.html screen-animations-notref.html +fails == print-no-animations.html print-no-animations-ref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-print tests +fails != print-no-animations.html print-no-animations-notref.html # reftest harness doesn't actually make pres context non-dynamic for reftest-print tests +== animate-opacity.html animate-opacity-ref.html +== animate-preserves3d.html animate-preserves3d-ref.html +== in-visibility-hidden-animation.html in-visibility-hidden-animation-ref.html +== in-visibility-hidden-animation-pseudo-element.html in-visibility-hidden-animation-pseudo-element-ref.html +== partially-out-of-view-animation.html partially-out-of-view-animation-ref.html +== animate-display-table-opacity.html animate-display-table-opacity-ref.html +# We need to run 100% opacity test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor +test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-opacity-1-animation.html stacking-context-animation-ref.html +# We need to run transform:none test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor +test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-transform-none-animation.html stacking-context-animation-ref.html +== no-stacking-context-opacity-removing-animation-in-delay.html no-stacking-context-animation-ref.html +== no-stacking-context-transform-removing-animation-in-delay.html no-stacking-context-animation-ref.html +== stacking-context-lose-opacity-1.html stacking-context-animation-ref.html +== stacking-context-lose-transform-none.html stacking-context-animation-ref.html +== stacking-context-opacity-win-in-delay.html stacking-context-animation-ref.html +== stacking-context-opacity-win-in-delay-on-main-thread.html stacking-context-animation-ref.html +== stacking-context-opacity-wins-over-transition.html stacking-context-animation-ref.html +== stacking-context-transform-win-in-delay.html stacking-context-animation-ref.html +== stacking-context-transform-win-in-delay-on-main-thread.html stacking-context-animation-ref.html +== stacking-context-transform-wins-over-transition.html stacking-context-animation-ref.html +== stacking-context-opacity-1-animation.html stacking-context-animation-ref.html +== stacking-context-opacity-1-with-fill-backwards.html stacking-context-animation-ref.html +== stacking-context-opacity-1-with-fill-forwards.html stacking-context-animation-ref.html +== stacking-context-paused-on-opacity-1.html stacking-context-animation-ref.html +== stacking-context-paused-on-transform-none.html stacking-context-animation-ref.html +== stacking-context-transform-none-animation.html stacking-context-animation-ref.html +== stacking-context-transform-none-animation-on-svg.html stacking-context-animation-ref.html +== stacking-context-transform-none-animation-with-backface-visibility.html stacking-context-animation-ref.html +== stacking-context-transform-none-animation-with-preserve-3d.html stacking-context-animation-ref.html +== stacking-context-transform-none-with-fill-backwards.html stacking-context-animation-ref.html +== stacking-context-transform-none-with-fill-forwards.html stacking-context-animation-ref.html +== stacking-context-opacity-1-in-delay.html stacking-context-animation-ref.html +== stacking-context-opacity-removing-important-in-delay.html stacking-context-animation-ref.html +== stacking-context-transform-none-in-delay.html stacking-context-animation-ref.html +== stacking-context-transform-removing-important-in-delay.html stacking-context-animation-ref.html +fails == background-position-in-delay.html background-position-ref.html # This test fails the reftest-opaque-layer check since animating background-position currently creates an active layer from its delay phse, and reftest-opaque-layer only handles items assigned to PaintedLayers. +== background-position-after-finish.html background-position-ref.html +fails == background-position-running.html background-position-ref.html # This test fails the reftest-opaque-layer check since animating background-position currently creates an active layer, and reftest-opaque-layer only handles items assigned to PaintedLayers. +fails == background-position-important.html background-position-ref.html # This test fails the reftest-opaque-layer check since animating background-position overridden by a non-animated !important style also creates an active layer, and reftest-opaque-layer only handles items that are assigned to PaintedLayers. diff --git a/layout/reftests/css-animations/screen-animations-notref.html b/layout/reftests/css-animations/screen-animations-notref.html new file mode 100644 index 0000000000..73a026f603 --- /dev/null +++ b/layout/reftests/css-animations/screen-animations-notref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<title>Static CSS animation</title> +<style> + +p { + color: olive; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/layout/reftests/css-animations/screen-animations-ref.html b/layout/reftests/css-animations/screen-animations-ref.html new file mode 100644 index 0000000000..8830913084 --- /dev/null +++ b/layout/reftests/css-animations/screen-animations-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<title>Static CSS animation</title> +<style> + +p { + color: blue; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/layout/reftests/css-animations/screen-animations.html b/layout/reftests/css-animations/screen-animations.html new file mode 100644 index 0000000000..ba1a0aa14e --- /dev/null +++ b/layout/reftests/css-animations/screen-animations.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html> +<title>Static CSS animation</title> +<style> + +@keyframes a { + from, to { color: blue } +} + +p { + color: olive; + animation: a 1s infinite; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/layout/reftests/css-animations/stacking-context-animation-ref.html b/layout/reftests/css-animations/stacking-context-animation-ref.html new file mode 100644 index 0000000000..817056c1ce --- /dev/null +++ b/layout/reftests/css-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/css-animations/stacking-context-lose-opacity-1.html b/layout/reftests/css-animations/stacking-context-lose-opacity-1.html new file mode 100644 index 0000000000..80ce2ea725 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-lose-opacity-1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> +Opacity animation creates a stacking context even if the opacity property +is overridden by an !important rule +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opaque { + from, to { opacity: 1 } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opaque 100s; + opacity: 1 !important; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-lose-transform-none.html b/layout/reftests/css-animations/stacking-context-lose-transform-none.html new file mode 100644 index 0000000000..f08ec41bee --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-lose-transform-none.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title> +Transform animation creates a stacking context even if the transform property +is overridden by an !important rule +</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 infinite; + transform: none !important; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-animation.html b/layout/reftests/css-animations/stacking-context-opacity-1-animation.html new file mode 100644 index 0000000000..3a4fe7bf45 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-1-animation.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Opacity animation creates a stacking context even if it has only 100% opacity +in its keyframes +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opaque { + from, to { opacity: 1; } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opaque 100s infinite; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html b/layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html new file mode 100644 index 0000000000..4e441397c8 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-1-in-delay.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title> +Opacity animation creates stacking context in delay phase +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opaque { + from, to { opacity: 1 } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opaque 100s 100s; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html new file mode 100644 index 0000000000..484da2979d --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-backwards.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Opacity animation does not destroy stacking context when the animation +has finished but has fill:backwards +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opaque { + from, to { opacity: 1 } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opaque 100s 100s backwards; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html new file mode 100644 index 0000000000..5fdda4f9dd --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-1-with-fill-forwards.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Opacity animation does not destroy stacking context when the animation +has finished but has fill:forwards +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opaque { + from, to { opacity: 1 } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opaque 0s forwards; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html b/layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html new file mode 100644 index 0000000000..f89240d230 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> +Removing !important rule during delay phase of animation creates +a stack context for correct style +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opacity0 { + from, to { opacity: 0 } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opacity0 100s 100s; +} +</style> +<span></span> +<div id="test"></div> +<script> +window.addEventListener("load", () => { + var target = document.getElementById("test"); + target.style.setProperty("opacity", "0.1", "important"); + + requestAnimationFrame(() => { + // Now the target opacity style should be 0.1 because of !important rule. + + // Apply 100% opacity without important directive. + target.style.setProperty("opacity", "1", ""); + requestAnimationFrame(() => { + // The CSS animation is no longer overridden but it's still in delay + // phase, so we should create a stacking context for 100% opacity style. + document.documentElement.classList.remove("reftest-wait"); + }); + }); +}); +</script> diff --git a/layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html new file mode 100644 index 0000000000..8d35bf6225 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> +Opacity animation winning over another opacity animation in delay phase +on the main-thread creates a stacking context +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opacity1 { + from, to { opacity: 1; } +} +@keyframes Opacity0 { + from, to { opacity: 0; } +} +// For preventing running on the compositor. +@keyframes Width { + from, to { width: 100px; } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opacity0 100s 100s, Opacity1 100s, Width 100s; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html new file mode 100644 index 0000000000..c60177d08f --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> +Opacity animation winning over another opacity 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; } +} +@keyframes Opacity0 { + from, to { opacity: 0; } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opacity0 100s 100s, Opacity1 100s; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html b/layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html new file mode 100644 index 0000000000..a7d4ad172b --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> +Opacity animation winning over opacity transition creates a stacking context +for correct style. +</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; + opacity: 1; + transition: opacity 100s steps(1, start); + animation: Opacity1 100s; +} +</style> +<span></span> +<div id="test"></div> +<script> +window.addEventListener("load", () => { + var target = document.getElementById("test"); + getComputedStyle(target).opacity; + + // CSS animation wins over transitions, so transition won't be visible during + // the CSS animation. + target.style.opacity = 0; + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> diff --git a/layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html b/layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html new file mode 100644 index 0000000000..b27985a6ca --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-paused-on-opacity-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Transform animation creates a stacking context even though it's paused on +a 100% opacity keyframe +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Opaque { + from, to { opacity: 1 } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Opaque 100s paused; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-paused-on-transform-none.html b/layout/reftests/css-animations/stacking-context-paused-on-transform-none.html new file mode 100644 index 0000000000..cd02908498 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-paused-on-transform-none.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Transform animation creates a stacking context even though it's paused on +a 'transform:none' keyframe +</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 paused; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html b/layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html new file mode 100644 index 0000000000..6192d58b70 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-none-animation-on-svg.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Transform animation creates a stacking context even though it has only +'transform:none' keyframes on an svg element</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes TransformNone { + from, to { transform: none } +} +#test { + animation: TransformNone 100s infinite; +} +</style> +<span></span> +<svg id="test" width="100px" height="100px"> + <rect x="0" y="0" width="100%" height="100%" fill="blue"/> +</svg> diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html new file mode 100644 index 0000000000..c96be7d4cc --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-backface-visibility.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> +Transform animation creates a stacking context even though it has only +'transform:none' keyframes and with a style which prevents performning +the animation on the compositor. +</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; + backface-visibility: hidden; + animation: TransformNone 100s infinite; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html new file mode 100644 index 0000000000..37b3f85167 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-none-animation-with-preserve-3d.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title> +Transform animation creates a stacking context even though it has only +'transform:none' keyframes and with a style which prevents performning +the animation on the compositor. +</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; + transform-style: preserve-3d; + animation: TransformNone 100s infinite; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-none-animation.html b/layout/reftests/css-animations/stacking-context-transform-none-animation.html new file mode 100644 index 0000000000..53213b452d --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-none-animation.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Transform animation creates a stacking context even though it has only +'transform:none' keyframes +</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 infinite; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-none-in-delay.html b/layout/reftests/css-animations/stacking-context-transform-none-in-delay.html new file mode 100644 index 0000000000..c52e8825d3 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-none-in-delay.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title> +Transform animation creates stacking context in delay phase +</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 100s; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html new file mode 100644 index 0000000000..d0515c2945 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-backwards.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Transform animation does not destroy stacking context when the animation +has finished but has fill:backwards +</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 100s backwards; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html new file mode 100644 index 0000000000..2d9610232c --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-none-with-fill-forwards.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title> +Transform animation does not destroy stacking context when the animation +has finished but has fill:forwards +</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 0s forwards; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html b/layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html new file mode 100644 index 0000000000..0b39dd4d4e --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> +Removing !important rule during delay phase of animation creates +a stack context for correct style +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes Transform100px { + from, to { transform: translate(100px) } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Transform100px 100s 100s; +} +</style> +<span></span> +<div id="test"></div> +<script> +window.addEventListener("load", () => { + var target = document.getElementById("test"); + target.style.setProperty("transform", "translateX(200px)", "important"); + + requestAnimationFrame(() => { + // Now the target transform style should be translateX(200px) because of + // !important rule. + + // Apply transform:none without important directive. + target.style.setProperty("transform", "none", ""); + requestAnimationFrame(() => { + // The CSS animation is no longer overridden but it's still in delay + // phase, so we should create a stacking context for transform:none style. + document.documentElement.classList.remove("reftest-wait"); + }); + }); +}); +</script> diff --git a/layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html b/layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html new file mode 100644 index 0000000000..2f61168946 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title> +Transform animation winning over another transform animation in delay phase +on the main-thread creates a stacking context +</title> +<style> +span { + height: 100px; + width: 100px; + position: fixed; + background: green; + top: 50px; +} +@keyframes TransformNone { + from, to { transform: none; } +} +@keyframes Transform100px { + from, to { transform: translateX(100px); } +} +// For preventing running on the compositor. +@keyframes Width { + from, to { width: 100px; } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Transform100px 100s 100s, TransformNone 100s, Width 100s; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-win-in-delay.html b/layout/reftests/css-animations/stacking-context-transform-win-in-delay.html new file mode 100644 index 0000000000..5a864faf47 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-win-in-delay.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title> +Transform animation winning over another transform 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; } +} +@keyframes Transform100px { + from, to { transform: translateX(100px); } +} +#test { + width: 100px; height: 100px; + background: blue; + animation: Transform100px 100s 100s, TransformNone 100s; +} +</style> +<span></span> +<div id="test"></div> diff --git a/layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html b/layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html new file mode 100644 index 0000000000..790fdd6e84 --- /dev/null +++ b/layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title> +Transform animation winning over transition creates a stacking context +for correct style +</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; + transform: translateX(200px); + transition: transform 100s steps(1, start); + animation: TransformNone 100s; +} +</style> +<span></span> +<div id="test"></div> +<script> +window.addEventListener("load", () => { + var target = document.getElementById("test"); + getComputedStyle(target).transform; + + // CSS animation wins over transition, so transition won't be visible during + // the CSS animation. + target.style.transform = "translateX(100px)"; + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> |