Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(297)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/animations/play-state.html

Issue 38303003: Try again to deflake animations/play-state.html (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Increase delay before testing end state Created 7 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/animations/play-state-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/animations/play-state.html
diff --git a/LayoutTests/animations/play-state.html b/LayoutTests/animations/play-state.html
index fdc4a306136c02295fcb5f91ba69c713c55e3b4e..c13f460a8354247b5142278931b0a6c1fa396622 100644
--- a/LayoutTests/animations/play-state.html
+++ b/LayoutTests/animations/play-state.html
@@ -2,76 +2,96 @@
<head>
<title>Test of -webkit-animation-play-state</title>
<style>
- #box1 {
+ .target {
height: 100px;
width: 100px;
- background-color: blue;
- margin: 0;
- -webkit-animation-duration: 2s;
+ -webkit-animation-duration: 40ms;
-webkit-animation-timing-function: linear;
+ }
+ #translate {
+ background-color: blue;
-webkit-animation-name: "move1";
- -webkit-animation-play-state: running;
}
@-webkit-keyframes "move1" {
- from { -webkit-transform: translateX(0); }
- to { -webkit-transform: translateX(100px); }
+ from { -webkit-transform: translateX(100px); }
+ to { -webkit-transform: translateX(200px); }
}
- #box2 {
- position:absolute;
- top: 260px;
- height: 100px;
- width: 100px;
+ #left {
+ position: relative;
background-color: red;
- -webkit-animation-duration: 2s;
- -webkit-animation-timing-function: linear;
-webkit-animation-name: "move2";
}
@-webkit-keyframes "move2" {
- from { left: 0; }
- to { left: 100px; }
+ from { left: 100px; }
+ to { left: 200px; }
+ }
+ .paused {
+ -webkit-animation-play-state: paused;
}
</style>
<script src="resources/animation-test-helpers.js" type="text/javascript"></script>
<script type="text/javascript">
+ if (window.testRunner) {
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ }
- const expectedValues = [
- // [time, element-id, property, expected-value, tolerance]
- [0.5, "box1", "webkitTransform", [1,0,0,1,25,0], 24],
- [1.1, "box1", "webkitTransform", [1,0,0,1,50,0], 5],
- [1.5, "box1", "webkitTransform", [1,0,0,1,50,0], 5],
- [2.5, "box1", "webkitTransform", [1,0,0,1,75,0], 24],
- [0.5, "box2", "left", 25, 24],
- [1.1, "box2", "left", 50, 5],
- [1.5, "box2", "left", 50, 5],
- [2.5, "box2", "left", 75, 24],
- ];
+ function log(message) {
+ var div = document.createElement('div');
+ div.textContent = message;
+ document.body.appendChild(div);
+ }
+
+ function logPassFail(expected, actual, id, description) {
+ var didPass = expected === actual;
+ log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + ' style ' + description);
+ }
+
+ function togglePaused() {
+ var targets = document.getElementsByClassName('target');
+ for (var i = 0; i < targets.length; ++i) {
+ targets[i].classList.toggle('paused');
+ }
+ }
+
+ var start = function() {
+ document.removeEventListener('webkitAnimationStart', start, false);
+ setTimeout(pause, 20);
+ }
+
+ var transform;
+ var left;
+ function pause() {
+ togglePaused();
+ transform = getComputedStyle(document.getElementById('translate')).webkitTransform;
+ left = getComputedStyle(document.getElementById('left')).left;
+ setTimeout(resume, 20);
+ }
- function stop()
- {
- document.getElementById("box1").style.webkitAnimationPlayState = "paused";
- document.getElementById("box2").style.webkitAnimationPlayState = "paused";
+ function resume() {
+ logPassFail(transform, getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'when paused');
+ logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused');
+ togglePaused();
+ setTimeout(end, 100);
}
- function start()
- {
- document.getElementById("box1").style.webkitAnimationPlayState = "running";
- document.getElementById("box2").style.webkitAnimationPlayState = "running";
+ function end() {
+ logPassFail('none', getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'at end');
+ logPassFail('auto', getComputedStyle(document.getElementById('left')).left, 'left', 'at end');
+ if (window.testRunner) {
+ testRunner.notifyDone();
+ }
}
- setTimeout(stop, 1000);
- setTimeout(start, 2000);
- runAnimationTest(expectedValues, null, null, true);
+ document.addEventListener('webkitAnimationStart', start, false);
</script>
</head>
<body>
<p>
-This tests the operation of -webkit-animation-play-state. After 2 second the box should stop and after one
-more second it should start again. We test it both while in motion and when stopped.
-<div id="box1">
-</div>
-<div id="box2">
-</div>
-<div id="result">
-</div>
+ This tests the operation of -webkit-animation-play-state. We test style
+ while the animations are paused and once unpaused.
+</p>
+<div class="target" id="translate">transform</div>
+<div class="target" id="left">left</div>
</body>
</html>
« no previous file with comments | « no previous file | LayoutTests/animations/play-state-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698