wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1234403 - Part 5: Test for CSSPseudoElement.getAnimations. r=birtles

Browse Source
This commit is contained in:
Boris Chiou 2016-02-24 19:12:00 +01:00
parent 2a00b4b934
commit 84389d09ed
5 changed files with 147 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
dom/animation/test/css-animations/file_pseudoElement-get-animations.html Normal file
View File

@ -0,0 +1,70 @@
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
@keyframes anim1 { }
@keyframes anim2 { }
.before::before {
animation: anim1 10s;
}
.after-with-mix-anims-trans::after {
content: '';
animation: anim1 10s, anim2 10s;
width: 0px;
height: 0px;
transition: all 100s;
}
.after-change::after {
width: 100px;
height: 100px;
}
</style>
<body>
<script>
'use strict';
test(function(t) {
var div = addDiv(t, { class: 'before' });
var pseudoTarget = document.getAnimations()[0].effect.target;
assert_equals(pseudoTarget.getAnimations().length, 1,
'Expected number of animations are returned');
assert_equals(pseudoTarget.getAnimations()[0].animationName, 'anim1',
'CSS animation name matches');
}, 'getAnimations returns CSSAnimation objects');
test(function(t) {
var div = addDiv(t, { class: 'after-with-mix-anims-trans' });
// Trigger transitions
flushComputedStyle(div);
div.classList.add('after-change');
// Create additional animation on the pseudo-element from script
var pseudoTarget = document.getAnimations()[0].effect.target;
var effect = new KeyframeEffectReadOnly(pseudoTarget,
{ background: ["blue", "red"] },
3000);
var newAnimation = new Animation(effect, document.timeline);
newAnimation.id = 'scripted-anim';
newAnimation.play();
// Check order - the script-generated animation should appear later
var anims = pseudoTarget.getAnimations();
assert_equals(anims.length, 5,
'Got expected number of animations/trnasitions running on ' +
'::after pseudo element');
assert_equals(anims[0].transitionProperty, 'height',
'1st animation is the 1st transition sorted by name');
assert_equals(anims[1].transitionProperty, 'width',
'2nd animation is the 2nd transition sorted by name ');
assert_equals(anims[2].animationName, 'anim1',
'3rd animation is the 1st animation in animation-name list');
assert_equals(anims[3].animationName, 'anim2',
'4rd animation is the 2nd animation in animation-name list');
assert_equals(anims[4].id, 'scripted-anim',
'Animation added by script appears last');
}, 'getAnimations returns css transitions/animations, and script-generated ' +
'animations in the expected order');
done();
</script>
</body>

14
dom/animation/test/css-animations/test_pseudoElement-get-animations.html Normal file
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_pseudoElement-get-animations.html");
});
</script>

45
dom/animation/test/css-transitions/file_pseudoElement-get-animations.html Normal file
View File

@ -0,0 +1,45 @@
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
.init::before {
content: '';
height: 0px;
width: 0px;
opacity: 0;
transition: all 100s;
}
.change::before {
height: 100px;
width: 100px;
opacity: 1;
}
</style>
<body>
<script>
'use strict';
test(function(t) {
var div = addDiv(t, { class: 'init' });
flushComputedStyle(div);
div.classList.add('change');
// Sanity checks
assert_equals(document.getAnimations().length, 3,
'Got expected number of animations on document');
var pseudoTarget = document.getAnimations()[0].effect.target;
assert_class_string(pseudoTarget, 'CSSPseudoElement',
'Got pseudo-element target');
// Check animations returned from the pseudo element are in correct order
var anims = pseudoTarget.getAnimations();
assert_equals(anims.length, 3,
'Got expected number of animations on pseudo-element');
assert_equals(anims[0].transitionProperty, 'height');
assert_equals(anims[1].transitionProperty, 'opacity');
assert_equals(anims[2].transitionProperty, 'width');
}, 'getAnimations sorts simultaneous transitions by name');
done();
</script>
</body>

14
dom/animation/test/css-transitions/test_pseudoElement-get-animations.html Normal file
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_pseudoElement-get-animations.html");
});
</script>

4
dom/animation/test/mochitest.ini
View File

@ -48,6 +48,8 @@ skip-if = buildapp == 'mulet'
support-files = css-animations/file_element-get-animations.html
[css-animations/test_keyframeeffect-getframes.html]
support-files = css-animations/file_keyframeeffect-getframes.html
[css-animations/test_pseudoElement-get-animations.html]
support-files = css-animations/file_pseudoElement-get-animations.html
[css-transitions/test_animation-cancel.html]
support-files = css-transitions/file_animation-cancel.html
[css-transitions/test_animation-computed-timing.html]
@ -73,6 +75,8 @@ skip-if = buildapp == 'mulet'
support-files = css-transitions/file_element-get-animations.html
[css-transitions/test_keyframeeffect-getframes.html]
support-files = css-transitions/file_keyframeeffect-getframes.html
[css-transitions/test_pseudoElement-get-animations.html]
support-files = css-transitions/file_pseudoElement-get-animations.html
[document-timeline/test_document-timeline.html]
support-files = document-timeline/file_document-timeline.html
[document-timeline/test_request_animation_frame.html]