Bug 1197620 - Part 2 tests that animation stop playing when its element is not displayed. r=bbirtles

This tests cover that the element is 'display:none' and its parent element is
'display:none' cases.
This commit is contained in:
Hiroyuki Ikezoe 2015-09-10 20:06:00 +02:00
parent 3525eca033
commit b3c78a8f5d
3 changed files with 91 additions and 0 deletions

View File

@ -67,3 +67,5 @@ skip-if = buildapp == 'mulet'
[mozilla/test_deferred_start.html]
support-files = mozilla/file_deferred_start.html
skip-if = (toolkit == 'gonk' && debug)
[mozilla/test_hide_and_show.html]
support-files = mozilla/file_hide_and_show.html

View File

@ -0,0 +1,75 @@
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
@keyframes move {
100% {
transform: translateX(100px);
}
}
</style>
<body>
<script>
'use strict';
test(function(t) {
var div = addDiv(t, { style: 'animation: move 100s infinite' });
assert_equals(div.getAnimations().length, 1,
'display:initial element has animations');
div.style.display = 'none';
assert_equals(div.getAnimations().length, 0,
'display:none element has no animations');
}, 'Animation stops playing when the element style display is set to "none"');
test(function(t) {
var parentElement = addDiv(t);
var div = addDiv(t, { style: 'animation: move 100s infinite' });
parentElement.appendChild(div);
assert_equals(div.getAnimations().length, 1,
'display:initial element has animations');
parentElement.style.display = 'none';
assert_equals(div.getAnimations().length, 0,
'Element in display:none subtree has no animations');
}, 'Animation stops playing when its parent element style display is set ' +
'to "none"');
test(function(t) {
var div = addDiv(t, { style: 'animation: move 100s infinite' });
assert_equals(div.getAnimations().length, 1,
'display:initial element has animations');
div.style.display = 'none';
assert_equals(div.getAnimations().length, 0,
'display:none element has no animations');
div.style.display = '';
assert_equals(div.getAnimations().length, 1,
'Element which is no longer display:none has animations ' +
'again');
}, 'Animation starts playing when the element gets shown from ' +
'"display:none" state');
test(function(t) {
var parentElement = addDiv(t);
var div = addDiv(t, { style: 'animation: move 100s infinite' });
parentElement.appendChild(div);
assert_equals(div.getAnimations().length, 1,
'display:initial element has animations');
parentElement.style.display = 'none';
assert_equals(div.getAnimations().length, 0,
'Element in display:none subtree has no animations');
parentElement.style.display = '';
assert_equals(div.getAnimations().length, 1,
'Element which is no longer in display:none subtree has ' +
'animations again');
}, 'Animation starts playing when its parent element is shown from ' +
'"display:none" state');
done();
</script>
</body>

View File

@ -0,0 +1,14 @@
<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
'use strict';
setup({explicit_done: true});
SpecialPowers.pushPrefEnv(
{ "set": [["dom.animations-api.core.enabled", true]]},
function() {
window.open("file_hide_and_show.html");
});
</script>