Bug 1358353 - Use rgb value instead of keyword colors. r?boris draft
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Fri, 28 Apr 2017 13:07:54 +0900
changeset 569949 f52e6039cd91bf812dc42429beb6e1eac73e4c62
parent 569701 2cca333f546f38860f84940d4c72d7470a3410f4
child 626353 6670344dd1125274d769bb4ff2c357bf419ee597
push id56339
push userhikezoe@mozilla.com
push dateFri, 28 Apr 2017 06:09:11 +0000
reviewersboris
bugs1358353
milestone55.0a1
Bug 1358353 - Use rgb value instead of keyword colors. r?boris MozReview-Commit-ID: HE0Qld7Tvi6
dom/animation/test/css-animations/file_keyframeeffect-getkeyframes.html
--- 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),"