--- a/dom/animation/test/css-animations/file_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-animations/file_keyframeeffect-getkeyframes.html
@@ -15,86 +15,86 @@
}
@keyframes anim-only-non-animatable {
from { animation-duration: 3s; }
to { animation-duration: 5s; }
}
@keyframes anim-simple {
- from { color: black; }
- to { color: white; }
+ from { color: rgb(0, 0, 0); }
+ to { color: rgb(255, 255, 255); }
}
@keyframes anim-simple-three {
- from { color: black; }
- 50% { color: blue; }
- to { color: white; }
+ from { color: rgb(0, 0, 0); }
+ 50% { color: rgb(0, 0, 255); }
+ to { color: rgb(255, 255, 255); }
}
@keyframes anim-simple-timing {
- from { color: black; animation-timing-function: linear; }
- 50% { color: blue; animation-timing-function: ease-in-out; }
- to { color: white; animation-timing-function: step-end; }
+ from { color: rgb(0, 0, 0); animation-timing-function: linear; }
+ 50% { color: rgb(0, 0, 255); animation-timing-function: ease-in-out; }
+ to { color: rgb(255, 255, 255); animation-timing-function: step-end; }
}
@keyframes anim-simple-timing-some {
- from { color: black; animation-timing-function: linear; }
- 50% { color: blue; }
- to { color: white; }
+ from { color: rgb(0, 0, 0); animation-timing-function: linear; }
+ 50% { color: rgb(0, 0, 255); }
+ to { color: rgb(255, 255, 255); }
}
@keyframes anim-simple-shorthand {
from { margin: 8px; }
to { margin: 16px; }
}
@keyframes anim-omit-to {
- from { color: blue; }
+ from { color: rgb(0, 0, 255); }
}
@keyframes anim-omit-from {
- to { color: blue; }
+ to { color: rgb(0, 0, 255); }
}
@keyframes anim-omit-from-to {
- 50% { color: blue; }
+ 50% { color: rgb(0, 0, 255); }
}
@keyframes anim-partially-omit-to {
from { margin-top: 50px;
margin-bottom: 100px; }
to { margin-top: 150px !important; /* ignored */
margin-bottom: 200px; }
}
@keyframes anim-different-props {
- from { color: black; margin-top: 8px; }
- 25% { color: blue; }
+ from { color: rgb(0, 0, 0); margin-top: 8px; }
+ 25% { color: rgb(0, 0, 255); }
75% { margin-top: 12px; }
- to { color: white; margin-top: 16px }
+ to { color: rgb(255, 255, 255); margin-top: 16px }
}
@keyframes anim-different-props-and-easing {
- from { color: black; margin-top: 8px; animation-timing-function: linear; }
- 25% { color: blue; animation-timing-function: step-end; }
+ from { color: rgb(0, 0, 0); margin-top: 8px; animation-timing-function: linear; }
+ 25% { color: rgb(0, 0, 255); animation-timing-function: step-end; }
75% { margin-top: 12px; animation-timing-function: ease-in; }
- to { color: white; margin-top: 16px }
+ to { color: rgb(255, 255, 255); margin-top: 16px }
}
@keyframes anim-merge-offset {
- from { color: black; }
- to { color: white; }
+ from { color: rgb(0, 0, 0); }
+ to { color: rgb(255, 255, 255); }
from { margin-top: 8px; }
to { margin-top: 16px; }
}
@keyframes anim-merge-offset-and-easing {
- from { color: black; animation-timing-function: step-end; }
- to { color: white; }
+ from { color: rgb(0, 0, 0); animation-timing-function: step-end; }
+ to { color: rgb(255, 255, 255); }
from { margin-top: 8px; animation-timing-function: linear; }
to { margin-top: 16px; }
from { font-size: 16px; animation-timing-function: step-end; }
to { font-size: 32px; }
from { padding-left: 2px; animation-timing-function: linear; }
to { padding-left: 4px; }
}
@@ -295,17 +295,17 @@ test(function(t) {
}
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for a simple'
+ ' animation that specifies a single shorthand property');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim-omit-to 100s';
- div.style.color = 'white';
+ div.style.color = 'rgb(255, 255, 255)';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease",
color: "rgb(0, 0, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease",
@@ -317,17 +317,17 @@ test(function(t) {
}
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for an ' +
'animation with a 0% keyframe and no 100% keyframe');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim-omit-from 100s';
- div.style.color = 'white';
+ div.style.color = 'rgb(255, 255, 255)';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease",
color: "rgb(255, 255, 255)" },
{ offset: 1, computedOffset: 1, easing: "ease",
@@ -339,17 +339,17 @@ test(function(t) {
}
}, 'KeyframeEffectReadOnly.getKeyframes() returns expected frames for an ' +
'animation with a 100% keyframe and no 0% keyframe');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim-omit-from-to 100s';
- div.style.color = 'white';
+ div.style.color = 'rgb(255, 255, 255)';
var frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease",
color: "rgb(255, 255, 255)" },
{ offset: 0.5, computedOffset: 0.5, easing: "ease",
@@ -565,17 +565,19 @@ test(function(t) {
// Gecko-specific test case: We are specifically concerned here that the
// computed value for text-shadow and a "none" specified on a keyframe
// are correctly represented.
test(function(t) {
var div = addDiv(t);
- div.style.textShadow = '1px 1px 2px black, 0 0 16px blue, 0 0 3.2px blue';
+ div.style.textShadow = '1px 1px 2px rgb(0, 0, 0), ' +
+ '0 0 16px rgb(0, 0, 255), ' +
+ '0 0 3.2px rgb(0, 0, 255)';
div.style.animation = 'anim-text-shadow 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
{ offset: 0, computedOffset: 0, easing: "ease",
textShadow: "1px 1px 2px 0px rgb(0, 0, 0),"