mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-20 22:27:31 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
18
layout/reftests/css-animations/animate-opacity-ref.html
Normal file
18
layout/reftests/css-animations/animate-opacity-ref.html
Normal file
|
|
@ -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>
|
||||
23
layout/reftests/css-animations/animate-opacity.html
Normal file
23
layout/reftests/css-animations/animate-opacity.html
Normal file
|
|
@ -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>
|
||||
30
layout/reftests/css-animations/animate-preserves3d-ref.html
Normal file
30
layout/reftests/css-animations/animate-preserves3d-ref.html
Normal file
|
|
@ -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>
|
||||
38
layout/reftests/css-animations/animate-preserves3d.html
Normal file
38
layout/reftests/css-animations/animate-preserves3d.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
12
layout/reftests/css-animations/background-position-ref.html
Normal file
12
layout/reftests/css-animations/background-position-ref.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
11
layout/reftests/css-animations/print-no-animations-ref.html
Normal file
11
layout/reftests/css-animations/print-no-animations-ref.html
Normal file
|
|
@ -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>
|
||||
16
layout/reftests/css-animations/print-no-animations.html
Normal file
16
layout/reftests/css-animations/print-no-animations.html
Normal file
|
|
@ -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>
|
||||
34
layout/reftests/css-animations/reftest-stylo.list
Normal file
34
layout/reftests/css-animations/reftest-stylo.list
Normal file
|
|
@ -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
|
||||
43
layout/reftests/css-animations/reftest.list
Normal file
43
layout/reftests/css-animations/reftest.list
Normal file
|
|
@ -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.
|
||||
11
layout/reftests/css-animations/screen-animations-notref.html
Normal file
11
layout/reftests/css-animations/screen-animations-notref.html
Normal file
|
|
@ -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>
|
||||
11
layout/reftests/css-animations/screen-animations-ref.html
Normal file
11
layout/reftests/css-animations/screen-animations-ref.html
Normal file
|
|
@ -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>
|
||||
16
layout/reftests/css-animations/screen-animations.html
Normal file
16
layout/reftests/css-animations/screen-animations.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue