зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1273807 - mask-position and mask-size animation test cases. r=heycam
mask-*-1a.html: test cases for indirect mask painting.(nsDisplayMask::PaintAsLayer) mask-*-1b.html: test cases for painting mask on mask layer.(nsDisplayMask::PaintMask) MozReview-Commit-ID: K9BK4MlnpBE --HG-- extra : rebase_source : 968bc221e28cd9c60927526ee719c0ceffeeab18
This commit is contained in:
cku
Родитель
7e248d8cc9
Коммит
790cfd8462
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference of testcases for mssk-position and mask-size animations</title>
|
||||
<style>
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
</style>
|
||||
<div id="test"></div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>mask-position animation after finish</title>
|
||||
<style>
|
||||
@keyframes changeMaskPosition {
|
||||
from { mask-position: 0% 0%; }
|
||||
to { mask-position: center center; }
|
||||
}
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 0% 0%;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
|
||||
animation: changeMaskPosition 0.01s forwards;
|
||||
}
|
||||
</style>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
document.getElementById("test").addEventListener("animationend", () => {
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
})
|
||||
}, false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>mask-position animation after finish</title>
|
||||
<style>
|
||||
@keyframes changeMaskPosition {
|
||||
from { mask-position: 0% 0%; }
|
||||
to { mask-position: center center; }
|
||||
}
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 0% 0%;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
|
||||
animation: changeMaskPosition 0.01s forwards;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
box-sizing: border-box;
|
||||
/* Apply will-change property to force paint mask on mask layer */
|
||||
border: 1px solid transparent;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
<div id="test"><div id="inner"></div></div>
|
||||
<script>
|
||||
document.getElementById("test").addEventListener("animationend", () => {
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
})
|
||||
}, false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>mask-position animation in delay phase</title>
|
||||
<style>
|
||||
@keyframes holdMaskPosition {
|
||||
from,to { mask-position: left top; }
|
||||
}
|
||||
#test {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
|
||||
animation: holdMaskPosition 100s 100s infinite;
|
||||
mask-position: center center;
|
||||
}
|
||||
</style>
|
||||
<div id="test"></div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<title>mask-position animation in delay phase</title>
|
||||
<style>
|
||||
@keyframes holdMaskPosition {
|
||||
from,to { mask-position: left top; }
|
||||
}
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
|
||||
animation: holdMaskPosition 100s 100s infinite;
|
||||
mask-position: center center;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
box-sizing: border-box;
|
||||
/* Apply will-change property to force paint mask on mask layer */
|
||||
border: 1px solid transparent;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
<div id="test"><div id="inner"></div></div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>mask-size animation after finish</title>
|
||||
<style>
|
||||
@keyframes changeMaskSize {
|
||||
from { mask-size: 50px 50px; }
|
||||
to { mask-size: 25px 25px; }
|
||||
}
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center center;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect x="0" y="0" width="50" height="50" fill="blue"/></svg>');
|
||||
animation: changeMaskSize 0.01s forwards;
|
||||
}
|
||||
</style>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
document.getElementById("test").addEventListener("animationend", () => {
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
})
|
||||
}, false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>mask-size animation after finish</title>
|
||||
<style>
|
||||
@keyframes changeMaskSize {
|
||||
from { mask-size: 50px 50px; }
|
||||
to { mask-size: 25px 25px; }
|
||||
}
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center center;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><rect x="0" y="0" width="50" height="50" fill="blue"/></svg>');
|
||||
animation: changeMaskSize 0.01s forwards;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
box-sizing: border-box;
|
||||
/* Apply will-change property to force paint mask on mask layer */
|
||||
border: 1px solid transparent;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
<div id="test"><div id="inner"></div></div>
|
||||
<script>
|
||||
document.getElementById("test").addEventListener("animationend", () => {
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
})
|
||||
}, false);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>mask-size animation in delay phase</title>
|
||||
<style>
|
||||
@keyframes changeMaskSize {
|
||||
from { mask-size: 50px 50px; }
|
||||
to { mask-size: 50px 50px; }
|
||||
}
|
||||
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center center;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
|
||||
animation: changeMaskSize 100s 100s infinite;
|
||||
}
|
||||
</style>
|
||||
<div id="test"></div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<title>mask-size animation in delay phase</title>
|
||||
<style>
|
||||
@keyframes changeMaskSize {
|
||||
from { mask-size: 50px 50px; }
|
||||
to { mask-size: 50px 50px; }
|
||||
}
|
||||
|
||||
#test {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center center;
|
||||
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');
|
||||
animation: changeMaskSize 100s 100s infinite;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: blue;
|
||||
box-sizing: border-box;
|
||||
/* Apply will-change property to force paint mask on mask layer */
|
||||
border: 1px solid transparent;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="test"><div id="inner"></div></div>
|
||||
|
|
@ -41,3 +41,12 @@ fails == background-position-in-delay.html background-position-ref.html # This t
|
|||
== 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.
|
||||
|
||||
== mask-position-after-finish-1a.html mask-anim-ref.html
|
||||
== mask-position-after-finish-1b.html mask-anim-ref.html
|
||||
== mask-position-in-delay-1a.html mask-anim-ref.html
|
||||
== mask-position-in-delay-1b.html mask-anim-ref.html
|
||||
== mask-size-after-finish-1a.html mask-anim-ref.html
|
||||
== mask-size-after-finish-1b.html mask-anim-ref.html
|
||||
== mask-size-in-delay-1a.html mask-anim-ref.html
|
||||
== mask-size-in-delay-1b.html mask-anim-ref.html
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче