+2010-01-13 Ojan Vafai <ojan@chromium.org>
+
+ Reviewed by Eric Seidel.
+
+ A few more flaky transitions/animations tests
+ https://bugs.webkit.org/show_bug.cgi?id=33642
+
+ Attempt to deflake a few more tests. Some of these are second
+ attempts. The first attempt made it less flaky, but not 100%.
+ Also, for a couple tests, make them shorter. They seemed
+ unnecessarily long.
+
+ * animations/change-one-anim-expected.txt:
+ * animations/change-one-anim.html:
+ * transitions/cancel-transition.html:
+ * transitions/mask-transitions.html:
+ * transitions/shorthand-border-transitions-expected.txt:
+ * transitions/shorthand-border-transitions.html:
+
2010-01-14 Beth Dakin <bdakin@apple.com>
Reviewed by Sam Weinig.
-This test performs two animations, left and top. It animates over 1 second. At 0.5 second it removes the left animation and the top animation should continue from where it left off.
-PASS - "left" property for "box" element at 0.75s saw something close to: 150
-PASS - "top" property for "box" element at 0.75s saw something close to: 225
+This test performs two animations, left and top. It animates over 0.4 second. At 0.2 second it removes the left animation and the top animation should continue from where it left off.
+PASS - "left" property for "box" element at 0.3s saw something close to: 200
+PASS - "top" property for "box" element at 0.3s saw something close to: 300
<style type="text/css" media="screen">
#box {
position: relative;
- height: 200px;
- width: 200px;
+ height: 20px;
+ width: 20px;
background-color: #9bb;
-webkit-animation-name: horiz, vert;
- -webkit-animation-duration: 1s;
+ -webkit-animation-duration: 0.4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
@-webkit-keyframes horiz {
from { left: 0px; }
- to { left: 300px; }
+ to { left: 400px; }
}
@-webkit-keyframes vert {
from { top: 0px; }
- to { top: 300px; }
+ to { top: 400px; }
}
</style>
<script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
const expectedValues = [
// [animation-name, time, element-id, property, expected-value, tolerance]
- [null, 0.75, "box", "left", 150, 30],
- [null, 0.75, "box", "top", 225, 30],
+ [null, 0.3, "box", "left", 200, 40],
+ [null, 0.3, "box", "top", 300, 40],
];
function removeAnim()
function setup()
{
- setTimeout("removeAnim()", 500);
+ setTimeout("removeAnim()", 200);
}
runAnimationTest(expectedValues, setup);
</script>
</head>
<body>
-This test performs two animations, left and top. It animates over 1 second.
-At 0.5 second it removes the left animation and the top animation should continue
+This test performs two animations, left and top. It animates over 0.4 second.
+At 0.2 second it removes the left animation and the top animation should continue
from where it left off.
<div id="box">
</div>
function isEqual(actual, desired, tolerance)
{
- if (tolerance == undefined || tolerance == 0)
- tolerance = defaultTolerance;
var diff = Math.abs(actual - desired);
return diff < tolerance;
}
function restartTransition()
{
document.getElementById("container").className = "run";
- setTimeout("check()", 250);
}
function check()
document.getElementById("container").className = "run";
setTimeout("cancelTransition()", 100);
setTimeout("restartTransition()", 200);
+ setTimeout("check()", 500);
}
</script>
<body onload="start()">
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
- [0.5, 'box', '-webkit-mask-position', [10, 10], 2],
- [0.5, 'box2', '-webkit-mask-size', [150, 150], 10],
+ [0.5, 'box', '-webkit-mask-position', [10, 10], 4],
+ [0.5, 'box2', '-webkit-mask-size', [150, 150], 20],
];
function setupTest()
Tests transitions of the border shorthand properties.
-PASS - "border-top-color" property for "box" element at 0.5s saw something close to: 128,0,128
-PASS - "border-right-color" property for "box" element at 0.5s saw something close to: 128,0,128
-PASS - "border-bottom-color" property for "box" element at 0.5s saw something close to: 128,0,128
-PASS - "border-left-color" property for "box" element at 0.5s saw something close to: 128,0,128
-PASS - "border-top-width" property for "box" element at 0.5s saw something close to: 10
-PASS - "border-right-width" property for "box" element at 0.5s saw something close to: 10
-PASS - "border-bottom-width" property for "box" element at 0.5s saw something close to: 10
-PASS - "border-left-width" property for "box" element at 0.5s saw something close to: 10
-PASS - "border-top-width" property for "box1" element at 0.5s saw something close to: 10
-PASS - "border-top-color" property for "box1" element at 0.5s saw something close to: 255,0,255
-PASS - "border-top-width" property for "box2" element at 0.5s saw something close to: 10
-PASS - "border-bottom-width" property for "box2" element at 0.5s saw something close to: 20
+PASS - "border-top-color" property for "box" element at 0.25s saw something close to: 128,0,128
+PASS - "border-right-color" property for "box" element at 0.25s saw something close to: 128,0,128
+PASS - "border-bottom-color" property for "box" element at 0.25s saw something close to: 128,0,128
+PASS - "border-left-color" property for "box" element at 0.25s saw something close to: 128,0,128
+PASS - "border-top-width" property for "box" element at 0.25s saw something close to: 10
+PASS - "border-right-width" property for "box" element at 0.25s saw something close to: 10
+PASS - "border-bottom-width" property for "box" element at 0.25s saw something close to: 10
+PASS - "border-left-width" property for "box" element at 0.25s saw something close to: 10
+PASS - "border-top-width" property for "box1" element at 0.25s saw something close to: 10
+PASS - "border-top-color" property for "box1" element at 0.25s saw something close to: 255,0,255
+PASS - "border-top-width" property for "box2" element at 0.25s saw something close to: 10
+PASS - "border-bottom-width" property for "box2" element at 0.25s saw something close to: 20
margin: 10px;
background-color: gray;
border: 0px solid rgb(0, 0, 0);
- -webkit-transition: border 1s linear;
+ -webkit-transition: border 0.5s linear;
}
#box.final {
margin: 10px;
background-color: gray;
border: 0px solid rgb(0, 0, 0);
- -webkit-transition: border-width 1s linear;
+ -webkit-transition: border-width 0.5s linear;
}
#box1.final {
margin: 10px;
background-color: gray;
border: 0px solid rgb(0, 0, 0);
- -webkit-transition: border 1s linear;
+ -webkit-transition: border 0.5s linear;
}
#box2.final {
const expectedValues = [
// [time, element-id, property, expected-value, tolerance]
// color and width of each side should be animating
- [0.5, 'box', 'border-top-color', [128, 0, 128], 15],
- [0.5, 'box', 'border-right-color', [128, 0, 128], 15],
- [0.5, 'box', 'border-bottom-color', [128, 0, 128], 15],
- [0.5, 'box', 'border-left-color', [128, 0, 128], 15],
- [0.5, 'box', 'border-top-width', 10, 1],
- [0.5, 'box', 'border-right-width', 10, 1],
- [0.5, 'box', 'border-bottom-width', 10, 1],
- [0.5, 'box', 'border-left-width', 10, 1],
+ [0.25, 'box', 'border-top-color', [128, 0, 128], 20],
+ [0.25, 'box', 'border-right-color', [128, 0, 128], 20],
+ [0.25, 'box', 'border-bottom-color', [128, 0, 128], 20],
+ [0.25, 'box', 'border-left-color', [128, 0, 128], 20],
+ [0.25, 'box', 'border-top-width', 10, 2],
+ [0.25, 'box', 'border-right-width', 10, 2],
+ [0.25, 'box', 'border-bottom-width', 10, 2],
+ [0.25, 'box', 'border-left-width', 10, 2],
// only border-width should be animating
- [0.5, 'box1', 'border-top-width', 10, 1],
- [0.5, 'box1', 'border-top-color', [255, 0, 255], 0], // initial value
+ [0.25, 'box1', 'border-top-width', 10, 2],
+ [0.25, 'box1', 'border-top-color', [255, 0, 255], 0], // initial value
// border-width should be animating
- [0.5, 'box2', 'border-top-width', 10, 1],
- [0.5, 'box2', 'border-bottom-width', 20, 2],
+ [0.25, 'box2', 'border-top-width', 10, 2],
+ [0.25, 'box2', 'border-bottom-width', 20, 4],
];
function setupTest()