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 1083670 - Move API tests for CSS Animations and CSS Transitions into separate directories; r=dbaron

Browse Source 
--HG--
rename : dom/animation/test/css-integration/test_animation-effect-name.html => dom/animation/test/css-animations/test_animation-effect-name.html
rename : dom/animation/test/css-integration/test_animation-pausing.html => dom/animation/test/css-animations/test_animation-pausing.html
rename : dom/animation/test/css-integration/test_animation-player-playstate.html => dom/animation/test/css-animations/test_animation-player-playstate.html
rename : dom/animation/test/css-integration/test_animation-target.html => dom/animation/test/css-animations/test_animation-target.html
rename : dom/animation/test/css-integration/test_animations-dynamic-changes.html => dom/animation/test/css-animations/test_animations-dynamic-changes.html
rename : dom/animation/test/css-integration/test_element-get-animation-players.html => dom/animation/test/css-animations/test_element-get-animation-players.html
rename : dom/animation/test/css-integration/test_animation-effect-name.html => dom/animation/test/css-transitions/test_animation-effect-name.html
rename : dom/animation/test/css-integration/test_animation-pausing.html => dom/animation/test/css-transitions/test_animation-pausing.html
rename : dom/animation/test/css-integration/test_animation-target.html => dom/animation/test/css-transitions/test_animation-target.html
rename : dom/animation/test/css-integration/test_element-get-animation-players.html => dom/animation/test/css-transitions/test_element-get-animation-players.html
This commit is contained in:
Brian Birtles 2014-11-17 13:46:01 +09:00
parent 85688c0d50
commit cce4693051
11 changed files with 229 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dom/animation/test/css-integration/test_animation-effect-name.html → dom/animation/test/css-animations/test_animation-effect-name.html
View File

@ -42,17 +42,4 @@ test(function() {
div.remove();
}, 'Animation name with hex-escape');
test(function() {
var div = addDiv();
// Add a transition
div.style.left = '0px';
window.getComputedStyle(div).transitionProperty;
div.style.transition = 'all 100s';
div.style.left = '100px';
assert_equals(div.getAnimationPlayers()[0].source.effect.name, '',
'Animation effects for transitions have an empty name');
div.remove();
}, 'Effect name for transitions');
</script>

41
dom/animation/test/css-integration/test_animation-pausing.html → dom/animation/test/css-animations/test_animation-pausing.html
View File

@ -206,45 +206,4 @@ async_test(function(t) {
}, 'pause() applies pending changes to animation-play-state first');
// (Note that we can't actually test for this; see comment above, in test-body.)
async_test(function(t) {
var div = addDiv();
var cs = window.getComputedStyle(div);
div.style.marginLeft = '0px';
cs.marginLeft; // Flush style to set up transition start point
div.style.transition = 'margin-left 100s';
div.style.marginLeft = '10000px';
cs.marginLeft;
var player = div.getAnimationPlayers()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
var previousAnimVal = getMarginLeft(cs);
waitForFrame().then(function() {
t.step(function() {
assert_true(getMarginLeft(cs) > previousAnimVal,
'margin-left is initially increasing');
previousAnimVal = getMarginLeft(cs);
player.pause();
});
return waitForFrame();
}).then(function() {
t.step(function() {
assert_equals(getMarginLeft(cs), previousAnimVal,
'margin-left does not increase after calling pause()');
previousAnimVal = getMarginLeft(cs);
player.play();
});
return waitForFrame();
}).then(function() {
t.step(function() {
assert_true(getMarginLeft(cs) > previousAnimVal,
'margin-left increases after calling play()');
});
div.remove();
t.done();
});
}, 'pause() and play() a transition');
</script>

0
dom/animation/test/css-integration/test_animation-player-playstate.html → dom/animation/test/css-animations/test_animation-player-playstate.html
View File

27
dom/animation/test/css-animations/test_animation-target.html Normal file
View File

@ -0,0 +1,27 @@
<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<style>
@keyframes anim { }
</style>
<script>
'use strict';
function addDiv() {
var div = document.createElement('div');
document.body.appendChild(div);
return div;
}
test(function() {
var div = addDiv();
div.style.animation = 'anim 100s';
var players = div.getAnimationPlayers();
assert_equals(players[0].source.target, div,
'Animation.target is the animatable div');
div.remove();
}, 'Returned CSS animations have the correct Animation.target');
</script>

0
dom/animation/test/css-integration/test_animations-dynamic-changes.html → dom/animation/test/css-animations/test_animations-dynamic-changes.html
View File

85
dom/animation/test/css-integration/test_element-get-animation-players.html → dom/animation/test/css-animations/test_element-get-animation-players.html
View File

@ -73,41 +73,6 @@ test(function() {
div.remove();
}, 'getAnimationPlayers for multi-property animations');
async_test(function(t) {
var div = addDiv();
// Add a couple of transitions
div.style.left = '0px';
div.style.top = '0px';
window.getComputedStyle(div).transitionProperty;
div.style.transition = 'all 100s';
div.style.left = '100px';
div.style.top = '100px';
var players = div.getAnimationPlayers();
assert_equals(players.length, 2,
'getAnimationPlayers() returns one player per transitioning property');
var startTime = players[0].startTime;
assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
'CSS transitions have sensible start times');
assert_equals(players[0].startTime, players[1].startTime,
'CSS transitions started together have the same start time');
// Wait a moment then add a third transition
window.requestAnimationFrame(t.step_func(function() {
div.style.backgroundColor = 'green';
players = div.getAnimationPlayers();
assert_equals(players.length, 3,
'getAnimationPlayers returns players for all running CSS Transitions');
assert_true(players[1].startTime < players[2].startTime,
'Player for additional CSS transition starts after the original'
+ ' transitions and appears later in the list');
div.remove();
t.done();
}));
}, 'getAnimationPlayers for CSS Transitions');
async_test(function(t) {
var div = addDiv();
@ -166,26 +131,6 @@ async_test(function(t) {
}, 'getAnimationPlayers for CSS Animations that have finished but are'
+ ' forwards filling');
async_test(function(t) {
var div = addDiv();
// Set up event listener
div.addEventListener('transitionend', t.step_func(function() {
assert_equals(div.getAnimationPlayers().length, 0,
'getAnimationPlayers does not return finished CSS Transitions');
div.remove();
t.done();
}));
// Add a very short transition
div.style.left = '0px';
window.getComputedStyle(div).left;
div.style.transition = 'all 0.01s';
div.style.left = '100px';
window.getComputedStyle(div).left;
}, 'getAnimationPlayers for CSS Transitions that have finished');
test(function() {
var div = addDiv();
div.style.animation = 'none 100s';
@ -285,36 +230,6 @@ test(function() {
div.remove();
}, 'getAnimationPlayers for zero-duration CSS Animations');
test(function() {
var div = addDiv();
// Try to transition non-animatable property animation-duration
div.style.animationDuration = '10s';
window.getComputedStyle(div).animationDuration;
div.style.transition = 'all 100s';
div.style.animationDuration = '100s';
assert_equals(div.getAnimationPlayers().length, 0,
'getAnimationPlayers returns an empty sequence for a transition'
+ ' of a non-animatable property');
div.remove();
}, 'getAnimationPlayers for transition on non-animatable property');
test(function() {
var div = addDiv();
div.style.setProperty('-vendor-unsupported', '0px', '');
window.getComputedStyle(div).transitionProperty;
div.style.transition = 'all 100s';
div.style.setProperty('-vendor-unsupported', '100px', '');
assert_equals(div.getAnimationPlayers().length, 0,
'getAnimationPlayers returns an empty sequence for a transition'
+ ' of an unsupported property');
div.remove();
}, 'getAnimationPlayers for transition on unsupported property');
test(function() {
var div = addDiv();
div.style.animation = 'anim1 100s';

24
dom/animation/test/css-transitions/test_animation-effect-name.html Normal file
View File

@ -0,0 +1,24 @@
<!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';
test(function() {
var div = document.createElement('div');
document.body.appendChild(div);
// Add a transition
div.style.left = '0px';
window.getComputedStyle(div).transitionProperty;
div.style.transition = 'all 100s';
div.style.left = '100px';
assert_equals(div.getAnimationPlayers()[0].source.effect.name, '',
'Animation effects for transitions have an empty name');
div.remove();
}, 'Effect name for transitions');
</script>

66
dom/animation/test/css-transitions/test_animation-pausing.html Normal file
View File

@ -0,0 +1,66 @@
<!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';
function addDiv() {
var div = document.createElement('div');
document.body.appendChild(div);
return div;
}
function waitForFrame() {
return new Promise(function(resolve, reject) {
window.requestAnimationFrame(resolve);
});
}
function getMarginLeft(cs) {
return parseFloat(cs.marginLeft);
}
async_test(function(t) {
var div = addDiv();
var cs = window.getComputedStyle(div);
div.style.marginLeft = '0px';
cs.marginLeft; // Flush style to set up transition start point
div.style.transition = 'margin-left 100s';
div.style.marginLeft = '10000px';
cs.marginLeft;
var player = div.getAnimationPlayers()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
var previousAnimVal = getMarginLeft(cs);
waitForFrame().then(function() {
t.step(function() {
assert_true(getMarginLeft(cs) > previousAnimVal,
'margin-left is initially increasing');
previousAnimVal = getMarginLeft(cs);
player.pause();
});
return waitForFrame();
}).then(function() {
t.step(function() {
assert_equals(getMarginLeft(cs), previousAnimVal,
'margin-left does not increase after calling pause()');
previousAnimVal = getMarginLeft(cs);
player.play();
});
return waitForFrame();
}).then(function() {
t.step(function() {
assert_true(getMarginLeft(cs) > previousAnimVal,
'margin-left increases after calling play()');
});
div.remove();
t.done();
});
}, 'pause() and play() a transition');
</script>

19
dom/animation/test/css-integration/test_animation-target.html → dom/animation/test/css-transitions/test_animation-target.html
View File

@ -3,29 +3,12 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<style>
@keyframes anim { }
</style>
<script>
'use strict';
function addDiv() {
test(function() {
var div = document.createElement('div');
document.body.appendChild(div);
return div;
}
test(function() {
var div = addDiv();
div.style.animation = 'anim 100s';
var players = div.getAnimationPlayers();
assert_equals(players[0].source.target, div,
'Animation.target is the animatable div');
div.remove();
}, 'Returned CSS animations have the correct Animation.target');
test(function() {
var div = addDiv();
div.style.left = '0px';
window.getComputedStyle(div).transitionProperty;

100
dom/animation/test/css-transitions/test_element-get-animation-players.html Normal file
View File

@ -0,0 +1,100 @@
<!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';
function addDiv() {
var div = document.createElement('div');
document.body.appendChild(div);
return div;
}
async_test(function(t) {
var div = addDiv();
// Add a couple of transitions
div.style.left = '0px';
div.style.top = '0px';
window.getComputedStyle(div).transitionProperty;
div.style.transition = 'all 100s';
div.style.left = '100px';
div.style.top = '100px';
var players = div.getAnimationPlayers();
assert_equals(players.length, 2,
'getAnimationPlayers() returns one player per transitioning property');
var startTime = players[0].startTime;
assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
'CSS transitions have sensible start times');
assert_equals(players[0].startTime, players[1].startTime,
'CSS transitions started together have the same start time');
// Wait a moment then add a third transition
window.requestAnimationFrame(t.step_func(function() {
div.style.backgroundColor = 'green';
players = div.getAnimationPlayers();
assert_equals(players.length, 3,
'getAnimationPlayers returns players for all running CSS Transitions');
assert_true(players[1].startTime < players[2].startTime,
'Player for additional CSS transition starts after the original'
+ ' transitions and appears later in the list');
div.remove();
t.done();
}));
}, 'getAnimationPlayers for CSS Transitions');
async_test(function(t) {
var div = addDiv();
// Set up event listener
div.addEventListener('transitionend', t.step_func(function() {
assert_equals(div.getAnimationPlayers().length, 0,
'getAnimationPlayers does not return finished CSS Transitions');
div.remove();
t.done();
}));
// Add a very short transition
div.style.left = '0px';
window.getComputedStyle(div).left;
div.style.transition = 'all 0.01s';
div.style.left = '100px';
window.getComputedStyle(div).left;
}, 'getAnimationPlayers for CSS Transitions that have finished');
test(function() {
var div = addDiv();
// Try to transition non-animatable property animation-duration
div.style.animationDuration = '10s';
window.getComputedStyle(div).animationDuration;
div.style.transition = 'all 100s';
div.style.animationDuration = '100s';
assert_equals(div.getAnimationPlayers().length, 0,
'getAnimationPlayers returns an empty sequence for a transition'
+ ' of a non-animatable property');
div.remove();
}, 'getAnimationPlayers for transition on non-animatable property');
test(function() {
var div = addDiv();
div.style.setProperty('-vendor-unsupported', '0px', '');
window.getComputedStyle(div).transitionProperty;
div.style.transition = 'all 100s';
div.style.setProperty('-vendor-unsupported', '100px', '');
assert_equals(div.getAnimationPlayers().length, 0,
'getAnimationPlayers returns an empty sequence for a transition'
+ ' of an unsupported property');
div.remove();
}, 'getAnimationPlayers for transition on unsupported property');
</script>

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

@ -1,9 +1,14 @@
[animation-timeline/test_animation-timeline.html]
skip-if = buildapp == 'mulet'
[css-integration/test_element-get-animation-players.html]
[css-animations/test_animations-dynamic-changes.html]
[css-animations/test_animation-effect-name.html]
[css-animations/test_animation-pausing.html]
[css-animations/test_animation-player-playstate.html]
[css-animations/test_animation-target.html]
[css-animations/test_element-get-animation-players.html]
skip-if = buildapp == 'mulet'
[css-transitions/test_animation-effect-name.html]
[css-transitions/test_animation-pausing.html]
[css-transitions/test_animation-target.html]
[css-transitions/test_element-get-animation-players.html]
skip-if = buildapp == 'mulet'
[css-integration/test_animations-dynamic-changes.html]
[css-integration/test_animation-effect-name.html]
[css-integration/test_animation-pausing.html]
[css-integration/test_animation-player-playstate.html]
[css-integration/test_animation-target.html]