Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-15 13:09:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1273042 - Part 3: Reftest for checking transform:none animations create a stacking context. r=birtles

Browse Source 
This patch has two test cases one if for CSS animations and one is for web animations.

For CSS animations test cases:
@keyframes {
  from, to { transform: none; }
}

For web animtions test cases, the target element is appended after animate().

MozReview-Commit-ID: Gy1sY41jV7G
This commit is contained in:
Hiroyuki Ikezoe 2016-06-01 16:24:34 +09:00
parent d69b9ca93c
commit 8f62183f96
6 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
layout/reftests/css-animations/reftest.list
View File

@ -8,3 +8,4 @@ fails != print-no-animations.html print-no-animations-notref.html # reftest harn
== 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
== stacking-context-transform-none-animation.html stacking-context-transform-animation-ref.html

19
layout/reftests/css-animations/stacking-context-transform-animation-ref.html Normal file
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>

21
layout/reftests/css-animations/stacking-context-transform-none-animation.html Normal file
View File

@ -0,0 +1,21 @@
<!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>

1
layout/reftests/web-animations/reftest.list
View File

@ -1,2 +1,3 @@
test-pref(dom.animations-api.core.enabled,true) == 1246046-1.html green-box.html
test-pref(dom.animations-api.core.enabled,true) == 1267937-1.html 1267937-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-none-animation-before-appending-element.html stacking-context-animation-ref.html

19
layout/reftests/web-animations/stacking-context-animation-ref.html Normal file
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>

26
layout/reftests/web-animations/stacking-context-transform-none-animation-before-appending-element.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Transform animation whose target is not initially associated with any document creates a stacking context even if it has only 'transform:none' in its keyframe</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
div {
width: 100px; height: 100px;
background: blue;
}
</style>
<span></span>
<script>
var div = document.createElement("div")
var anim = div.animate({ transform: ['none', 'none'] },
{ duration: 100000 });
document.body.appendChild(div);
anim.ready.then(function() {
document.documentElement.classList.remove("reftest-wait");
});
</script>