import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions

View file

@ -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>

View file

@ -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>

View 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>

View 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>

View 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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View 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>

View 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>

View 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

View 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.

View 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>

View 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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>