Bug 1339394 - Don't serialize transparent color to transparent keyword when not necessary. r=heycam
☠☠ backed out by 828c1f39d71a ☠ ☠
authorXidorn Quan <me@upsuper.org>
Wed, 15 Feb 2017 20:47:26 +1100
changeset 343069 4a964c3f1759fd893697e27809f1cd52af84a992
parent 343068 4c483e15fb91e4aaa6fb99e548d48516de194a78
child 343070 79cea5a0238246a9dfe4ed8cc57161b09376998d
push id31369
push userkwierso@gmail.com
push dateThu, 16 Feb 2017 00:18:40 +0000
treeherdermozilla-central@e9b926463f9e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1339394
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1339394 - Don't serialize transparent color to transparent keyword when not necessary. r=heycam MozReview-Commit-ID: 59cmaCoFJMR
accessible/tests/mochitest/attributes.js
browser/base/content/test/general/browser_windowactivation.js
browser/components/extensions/test/browser/browser_ext_pageAction_popup.js
browser/components/extensions/test/browser/browser_ext_tabs_insertCSS.js
browser/components/extensions/test/browser/browser_ext_tabs_removeCSS.js
devtools/client/inspector/rules/test/browser_rules_edit-property-order.js
dom/browser-element/mochitest/browserElement_LoadEvents.js
dom/security/test/csp/test_docwrite_meta.html
dom/tests/mochitest/ajax/scriptaculous/test/unit/ajax_inplaceeditor_test.html
layout/style/nsCSSValue.cpp
layout/style/nsComputedDOMStyle.cpp
layout/style/test/chrome/hover_helper.html
layout/style/test/property_database.js
layout/style/test/test_additional_sheets.html
layout/style/test/test_bug229915.html
layout/style/test/test_bug372770.html
layout/style/test/test_bug635286.html
layout/style/test/test_computed_style.html
layout/style/test/test_default_computed_style.html
testing/marionette/harness/marionette_harness/tests/unit/test_chrome_element_css.py
testing/web-platform/meta/editing/run/forecolor.html.ini
testing/web-platform/meta/editing/run/hilitecolor.html.ini
toolkit/components/extensions/test/mochitest/test_ext_contentscript_about_blank.html
--- a/accessible/tests/mochitest/attributes.js
+++ b/accessible/tests/mochitest/attributes.js
@@ -264,17 +264,17 @@ function fontFamily(aComputedStyle)
  * @param aFontSize    [in] font size
  * @param aFontWeight  [in, optional] kBoldFontWeight or kNormalFontWeight,
  *                      default value is kNormalFontWeight
  */
 function buildDefaultTextAttrs(aID, aFontSize, aFontWeight, aFontFamily)
 {
   var elm = getNode(aID);
   var computedStyle = document.defaultView.getComputedStyle(elm);
-  var bgColor = computedStyle.backgroundColor == "transparent" ?
+  var bgColor = computedStyle.backgroundColor == "rgba(0, 0, 0, 0)" ?
     "rgb(255, 255, 255)" : computedStyle.backgroundColor;
 
   var defAttrs = {
     "font-style": computedStyle.fontStyle,
     "font-size": aFontSize,
     "background-color": bgColor,
     "font-weight": aFontWeight ? aFontWeight : kNormalFontWeight,
     "color": computedStyle.color,
--- a/browser/base/content/test/general/browser_windowactivation.js
+++ b/browser/base/content/test/general/browser_windowactivation.js
@@ -41,42 +41,42 @@ function reallyRunTests() {
   // while another window is focused. The third check is done after that window
   // is closed and the main window focused again. The fourth check is done after
   // switching to the second tab.
   window.messageManager.addMessageListener("Test:BackgroundColorChanged", function(message) {
     colorChangeNotifications++;
 
     switch (colorChangeNotifications) {
       case 1:
-        is(message.data.color, "transparent", "first window initial");
+        is(message.data.color, "rgba(0, 0, 0, 0)", "first window initial");
         break;
       case 2:
-        is(message.data.color, "transparent", "second window initial");
+        is(message.data.color, "rgba(0, 0, 0, 0)", "second window initial");
         runOtherWindowTests();
         break;
       case 3:
         is(message.data.color, "rgb(255, 0, 0)", "first window lowered");
         break;
       case 4:
         is(message.data.color, "rgb(255, 0, 0)", "second window lowered");
         sendGetBackgroundRequest(true);
         otherWindow.close();
         break;
       case 5:
-        is(message.data.color, "transparent", "first window raised");
+        is(message.data.color, "rgba(0, 0, 0, 0)", "first window raised");
         break;
       case 6:
-        is(message.data.color, "transparent", "second window raised");
+        is(message.data.color, "rgba(0, 0, 0, 0)", "second window raised");
         gBrowser.selectedTab = tab2;
         break;
       case 7:
-        is(message.data.color, "transparent", "first window after tab switch");
+        is(message.data.color, "rgba(0, 0, 0, 0)", "first window after tab switch");
         break;
       case 8:
-        is(message.data.color, "transparent", "second window after tab switch");
+        is(message.data.color, "rgba(0, 0, 0, 0)", "second window after tab switch");
         finishTest();
         break;
       case 9:
         ok(false, "too many color change notifications");
         break;
     }
   });
 
--- a/browser/components/extensions/test/browser/browser_ext_pageAction_popup.js
+++ b/browser/components/extensions/test/browser/browser_ext_pageAction_popup.js
@@ -17,17 +17,17 @@ add_task(function* testPageActionPopup()
       },
     },
 
     files: {
       "popup-a.html": scriptPage("popup-a.js"),
       "popup-a.js": function() {
         window.onload = () => {
           let background = window.getComputedStyle(document.body).backgroundColor;
-          browser.test.assertEq("transparent", background);
+          browser.test.assertEq("rgba(0, 0, 0, 0)", background);
           browser.runtime.sendMessage("from-popup-a");
         };
         browser.runtime.onMessage.addListener(msg => {
           if (msg == "close-popup") {
             window.close();
           }
         });
       },
--- a/browser/components/extensions/test/browser/browser_ext_tabs_insertCSS.js
+++ b/browser/components/extensions/test/browser/browser_ext_tabs_insertCSS.js
@@ -8,17 +8,17 @@ add_task(function* testExecuteScript() {
   let messageManagersSize = MessageChannel.messageManagers.size;
   let responseManagersSize = MessageChannel.responseManagers.size;
 
   let tab = yield BrowserTestUtils.openNewForegroundTab(gBrowser, "http://mochi.test:8888/", true);
 
   async function background() {
     let tasks = [
       {
-        background: "transparent",
+        background: "rgba(0, 0, 0, 0)",
         foreground: "rgb(0, 113, 4)",
         promise: () => {
           return browser.tabs.insertCSS({
             file: "file2.css",
           });
         },
       },
       {
--- a/browser/components/extensions/test/browser/browser_ext_tabs_removeCSS.js
+++ b/browser/components/extensions/test/browser/browser_ext_tabs_removeCSS.js
@@ -4,17 +4,17 @@
 
 add_task(function* testExecuteScript() {
   let tab = yield BrowserTestUtils.openNewForegroundTab(gBrowser, "http://mochi.test:8888/", true);
 
   async function background() {
     let tasks = [
       // Insert CSS file.
       {
-        background: "transparent",
+        background: "rgba(0, 0, 0, 0)",
         foreground: "rgb(0, 113, 4)",
         promise: () => {
           return browser.tabs.insertCSS({
             file: "file2.css",
           });
         },
       },
       // Insert CSS code.
@@ -24,27 +24,27 @@ add_task(function* testExecuteScript() {
         promise: () => {
           return browser.tabs.insertCSS({
             code: "* { background: rgb(42, 42, 42) }",
           });
         },
       },
       // Remove CSS code again.
       {
-        background: "transparent",
+        background: "rgba(0, 0, 0, 0)",
         foreground: "rgb(0, 113, 4)",
         promise: () => {
           return browser.tabs.removeCSS({
             code: "* { background: rgb(42, 42, 42) }",
           });
         },
       },
       // Remove CSS file again.
       {
-        background: "transparent",
+        background: "rgba(0, 0, 0, 0)",
         foreground: "rgb(0, 0, 0)",
         promise: () => {
           return browser.tabs.removeCSS({
             file: "file2.css",
           });
         },
       },
       // Insert CSS code.
@@ -55,17 +55,17 @@ add_task(function* testExecuteScript() {
           return browser.tabs.insertCSS({
             code: "* { background: rgb(42, 42, 42) }",
             cssOrigin: "user",
           });
         },
       },
       // Remove CSS code again.
       {
-        background: "transparent",
+        background: "rgba(0, 0, 0, 0)",
         foreground: "rgb(0, 0, 0)",
         promise: () => {
           return browser.tabs.removeCSS({
             code: "* { background: rgb(42, 42, 42) }",
             cssOrigin: "user",
           });
         },
       },
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js
@@ -51,17 +51,17 @@ add_task(function* () {
   yield togglePropStatus(view, secondProp);
 
   is((yield getValue("#testid", "background-color")), "rgb(0, 128, 0)",
      "After disabling second property, first value should be used");
 
   info("Disabling the first property too and checking the applied style");
   yield togglePropStatus(view, firstProp);
 
-  is((yield getValue("#testid", "background-color")), "transparent",
+  is((yield getValue("#testid", "background-color")), "rgba(0, 0, 0, 0)",
      "After disabling both properties, value should be empty.");
 
   info("Re-enabling the second propertyt and checking the applied style");
   yield togglePropStatus(view, secondProp);
 
   is((yield getValue("#testid", "background-color")), "rgb(0, 0, 255)",
      "Value should be set correctly after re-enabling");
 
--- a/dom/browser-element/mochitest/browserElement_LoadEvents.js
+++ b/dom/browser-element/mochitest/browserElement_LoadEvents.js
@@ -95,17 +95,17 @@ function runTest2() {
   });
 
   iframe.addEventListener('mozbrowserloadend', function(e) {
     ok(e.isTrusted, 'Event should be trusted.');
     ok(!seenLoadEnd, 'Just one load end event.');
     seenLoadEnd = true;
     ok(seenLoadStart, 'Load end after load start.');
     ok(seenLocationChange, 'Load end after location change.');
-    is(e.detail.backgroundColor, 'transparent', 'Expected background color reported')
+    is(e.detail.backgroundColor, 'rgba(0, 0, 0, 0)', 'Expected background color reported')
   });
 
   iframe.src = browserElementTestHelpers.emptyPage2;
 
   function waitForAllCallbacks() {
     if (!seenLoadStart || !seenLoadEnd || !seenLocationChange) {
       SimpleTest.executeSoon(waitForAllCallbacks);
       return;
--- a/dom/security/test/csp/test_docwrite_meta.html
+++ b/dom/security/test/csp/test_docwrite_meta.html
@@ -36,17 +36,17 @@ function checkTestsDone() {
 
 // document.write(<meta csp ...>) should block resources from being included in the doc
 function checkResultsBlocked() {
   writemetacspframe.removeEventListener('load', checkResultsBlocked);
 
   // stylesheet: default background color within FF is transparent
   var bgcolor = window.getComputedStyle(writemetacspframe.contentDocument.body)
                       .getPropertyValue("background-color");
-  is(bgcolor, "transparent", "inital background value in FF should be 'transparent'");
+  is(bgcolor, "rgba(0, 0, 0, 0)", "inital background value in FF should be 'transparent'");
 
   // image: make sure image is blocked
   var img = writemetacspframe.contentDocument.getElementById("testimage");
   is(img.width, 0, "image widht should be 0");
   is(img.height, 0, "image widht should be 0");
 
   // script: make sure defined variable in external script is undefined
   is(writemetacspframe.contentDocument.myMetaCSPScript, undefined, "myMetaCSPScript should be 'undefined'");
--- a/dom/tests/mochitest/ajax/scriptaculous/test/unit/ajax_inplaceeditor_test.html
+++ b/dom/tests/mochitest/ajax/scriptaculous/test/unit/ajax_inplaceeditor_test.html
@@ -39,19 +39,19 @@
       });
     }},
 
     teardown: function() { with(this) {
       inPlaceEditor.dispose();
     }},
 
     testDisposesProperly: function() { with(this) {
-      assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
+      assertEqual("rgba(0, 0, 0, 0)", Element.getStyle('tobeedited','background-color'));
       inPlaceEditor.dispose();
-      assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
+      assertEqual("rgba(0, 0, 0, 0)", Element.getStyle('tobeedited','background-color'));
       assertVisible($('tobeedited'));
       Event.simulateMouse('tobeedited','click');
       assertVisible($('tobeedited'));
     }},
 
     testUsesTextAreaWhenMoreThanOneRows: function() { with(this) {
       inPlaceEditor.options.rows = 5;
       inPlaceEditor.enterEditMode();
@@ -79,17 +79,17 @@
       inPlaceEditor.options.formId = "myFormId";
       inPlaceEditor.enterEditMode();
       assertEqual("myFormId", document.forms[0].id);
     }},
 
     testCantEditWhileSaving: function() { with(this) {
       inPlaceEditor.onLoading();
       Event.simulateMouse('tobeedited','mouseover');
-      assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
+      assertEqual("rgba(0, 0, 0, 0)", Element.getStyle('tobeedited','background-color'));
       Event.simulateMouse('tobeedited','click');
       assertVisible($('tobeedited'));
     }},
 
     testCallbackFunctionGetsCalled: function() { with(this) {
       called = false;
       inPlaceEditor.options.callback = function(form) {
         called = true;
--- a/layout/style/nsCSSValue.cpp
+++ b/layout/style/nsCSSValue.cpp
@@ -1655,48 +1655,41 @@ nsCSSValue::AppendToString(nsCSSProperty
       MOZ_ASSERT(false, "bad color value");
     }
   }
   else if (IsNumericColorUnit(unit)) {
     if (aSerialization == eNormalized ||
         unit == eCSSUnit_RGBColor ||
         unit == eCSSUnit_RGBAColor) {
       nscolor color = GetColorValue();
-      if (aSerialization == eNormalized &&
-          color == NS_RGBA(0, 0, 0, 0)) {
-        // Use the strictest match for 'transparent' so we do correct
-        // round-tripping of all other rgba() values.
-        aResult.AppendLiteral("transparent");
+      // For brevity, we omit the alpha component if it's equal to 255 (full
+      // opaque). Also, we try to preserve the author-specified function name,
+      // unless it's rgba() and we're omitting the alpha component - then we
+      // use rgb().
+      uint8_t a = NS_GET_A(color);
+      bool showAlpha = (a != 255);
+
+      if (unit == eCSSUnit_RGBAColor && showAlpha) {
+        aResult.AppendLiteral("rgba(");
       } else {
-        // For brevity, we omit the alpha component if it's equal to 255 (full
-        // opaque). Also, we try to preserve the author-specified function name,
-        // unless it's rgba() and we're omitting the alpha component - then we
-        // use rgb().
-        uint8_t a = NS_GET_A(color);
-        bool showAlpha = (a != 255);
-
-        if (unit == eCSSUnit_RGBAColor && showAlpha) {
-          aResult.AppendLiteral("rgba(");
-        } else {
-          aResult.AppendLiteral("rgb(");
-        }
-
-        NS_NAMED_LITERAL_STRING(comma, ", ");
-
-        aResult.AppendInt(NS_GET_R(color), 10);
+        aResult.AppendLiteral("rgb(");
+      }
+
+      NS_NAMED_LITERAL_STRING(comma, ", ");
+
+      aResult.AppendInt(NS_GET_R(color), 10);
+      aResult.Append(comma);
+      aResult.AppendInt(NS_GET_G(color), 10);
+      aResult.Append(comma);
+      aResult.AppendInt(NS_GET_B(color), 10);
+      if (showAlpha) {
         aResult.Append(comma);
-        aResult.AppendInt(NS_GET_G(color), 10);
-        aResult.Append(comma);
-        aResult.AppendInt(NS_GET_B(color), 10);
-        if (showAlpha) {
-          aResult.Append(comma);
-          aResult.AppendFloat(nsStyleUtil::ColorComponentToFloat(a));
-        }
-        aResult.Append(char16_t(')'));
+        aResult.AppendFloat(nsStyleUtil::ColorComponentToFloat(a));
       }
+      aResult.Append(char16_t(')'));
     } else if (eCSSUnit_HexColor == unit ||
                eCSSUnit_HexColorAlpha == unit) {
       nscolor color = GetColorValue();
       aResult.Append('#');
       aResult.AppendPrintf("%02x", NS_GET_R(color));
       aResult.AppendPrintf("%02x", NS_GET_G(color));
       aResult.AppendPrintf("%02x", NS_GET_B(color));
       if (eCSSUnit_HexColorAlpha == unit) {
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -1110,21 +1110,16 @@ nsComputedDOMStyle::DoGetStackSizing()
                 eCSSKeyword_ignore);
   return val.forget();
 }
 
 void
 nsComputedDOMStyle::SetToRGBAColor(nsROCSSPrimitiveValue* aValue,
                                    nscolor aColor)
 {
-  if (NS_GET_A(aColor) == 0) {
-    aValue->SetIdent(eCSSKeyword_transparent);
-    return;
-  }
-
   nsROCSSPrimitiveValue *red   = new nsROCSSPrimitiveValue;
   nsROCSSPrimitiveValue *green = new nsROCSSPrimitiveValue;
   nsROCSSPrimitiveValue *blue  = new nsROCSSPrimitiveValue;
   nsROCSSPrimitiveValue *alpha  = new nsROCSSPrimitiveValue;
 
   uint8_t a = NS_GET_A(aColor);
   nsDOMCSSRGBColor *rgbColor =
     new nsDOMCSSRGBColor(red, green, blue, alpha, a < 255);
--- a/layout/style/test/chrome/hover_helper.html
+++ b/layout/style/test/chrome/hover_helper.html
@@ -60,27 +60,27 @@ function setResize(str) {
 }
 
 function step1() {
     /** test basic hover **/
     var divone = document.getElementById("one");
     synthesizeMouse(divone, 5, 7, moveEvent, window);
     is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
        ":hover applies");
-    is(getComputedStyle(divone.firstChild, "").backgroundColor, "transparent",
+    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     synthesizeMouse(divone, 5, 2, moveEvent, window);
     is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
        ":hover applies hierarchically");
     is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)",
        ":hover applies");
     synthesizeMouse(divone, 15, 7, moveEvent, window);
-    is(getComputedStyle(divone, "").backgroundColor, "transparent",
+    is(getComputedStyle(divone, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
-    is(getComputedStyle(divone.firstChild, "").backgroundColor, "transparent",
+    is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     synthesizeMouse(divone, 15, 2, moveEvent, window);
     is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)",
        ":hover applies hierarchically");
     is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)",
        ":hover applies");
 
     /** Test for Bug 302561 **/
@@ -110,17 +110,17 @@ var step3called = false;
 function step3() {
     is(step3called, false, "step3 called only once");
     step3called = true;
     if (getComputedStyle(iframe, "").width == "100px") {
         // The two resize events may be coalesced into a single one.
         step4();
         return;
     }
-    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     setResize("step4()");
     /* expect to get a second resize from the oscillation */
 }
 
 var step4called = false;
 function step4() {
     is(step4called, false, "step4 called only once (more than two cycles of oscillation)");
@@ -139,29 +139,29 @@ function step5() {
     setResize("step6()");
     synthesizeMouse(divtwoparent, 25, 5, moveEvent, window);
 }
 
 var step6called = false;
 function step6() {
     is(step6called, false, "step6 called only once");
     step6called = true;
-    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
     setTimeout(step7, 500); // time to detect oscillations if they exist
 }
 
 var step7called = false;
 function step7() {
     is(step7called, false, "step7 called only once (more than two cycles of oscillation)");
     if (step7called)
         return;
     step7called = true;
-    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     setTimeout(step8, 500); // time to detect oscillations if they exist
 }
 
 /* test the same case with scrolltop */
 
 var step8called = false;
 function step8() {
@@ -190,17 +190,17 @@ var step10called = false;
 function step10() {
     is(step10called, false, "step10 called only once");
     step10called = true;
     if (getComputedStyle(iframe, "").width == "100px") {
         // The two resize events may be coalesced into a single one.
         step11();
         return;
     }
-    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     setResize("step11()");
     /* expect to get a second resize from the oscillation */
 }
 
 var step11called = false;
 function step11() {
     is(step11called, false, "step11 called only once (more than two cycles of oscillation)");
@@ -219,17 +219,17 @@ function step12() {
     setResize("step13()");
     divtwoparent.scrollLeft = 25; /* mouse now over 27,5 */
 }
 
 var step13called = false;
 function step13() {
     is(step13called, false, "step13 called only once");
     step13called = true;
-    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     setResize("step14()");
     divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */
 }
 
 var step14called = false;
 function step14() {
     is(step14called, false, "step14 called only once");
@@ -246,17 +246,17 @@ function step14() {
 }
 
 var step15called = false;
 function step15() {
     is(step15called, false, "step15 called only once (more than two cycles of oscillation)");
     if (step15called)
         return;
     step15called = true;
-    is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
+    is(getComputedStyle(divtwo, "").backgroundColor, "rgba(0, 0, 0, 0)",
        ":hover does not apply");
     setTimeout(finish, 500); // time to detect oscillations if they exist
 }
 
 function finish() {
     document.getElementById("display").style.display = "none";
 
     var tester = window.SimpleTest;
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -2230,18 +2230,18 @@ var gCSSProperties = {
     initial_values: [ "border-box" ],
     other_values: [ "content-box", "padding-box", "border-box, padding-box", "padding-box, padding-box, padding-box", "border-box, border-box" ],
     invalid_values: [ "margin-box", "border-box border-box", "fill-box", "stroke-box", "view-box", "no-clip" ]
   },
   "background-color": {
     domProp: "backgroundColor",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "transparent", "rgba(255, 127, 15, 0)", "hsla(240, 97%, 50%, 0.0)", "rgba(0, 0, 0, 0)", "rgba(255,255,255,-3.7)" ],
-    other_values: [ "green", "rgb(255, 0, 128)", "#fc2", "#96ed2a", "black", "rgba(255,255,0,3)", "hsl(240, 50%, 50%)", "rgb(50%, 50%, 50%)", "-moz-default-background-color", "rgb(100, 100.0, 100)" ],
+    initial_values: [ "transparent", "rgba(0, 0, 0, 0)" ],
+    other_values: [ "green", "rgb(255, 0, 128)", "#fc2", "#96ed2a", "black", "rgba(255,255,0,3)", "hsl(240, 50%, 50%)", "rgb(50%, 50%, 50%)", "-moz-default-background-color", "rgb(100, 100.0, 100)", "rgba(255, 127, 15, 0)", "hsla(240, 97%, 50%, 0.0)", "rgba(255,255,255,-3.7)" ],
     invalid_values: [ "#0", "#00", "#00000", "#0000000", "#000000000", "rgb(100, 100%, 100)" ],
     quirks_values: { "000000": "#000000", "96ed2a": "#96ed2a" },
   },
   "background-image": {
     domProp: "backgroundImage",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     initial_values: [ "none" ],
--- a/layout/style/test/test_additional_sheets.html
+++ b/layout/style/test/test_additional_sheets.html
@@ -200,17 +200,17 @@ function loadAndCheck(win, firstType, se
     firstType.type + "(normal)" + " vs " + secondType.type + (swap ? "(important)" : "(normal)" ) + " 1");
   is(cs.getPropertyValue('background-color'), result2,
     firstType.type + "(important)" + " vs " + secondType.type + (swap ? "(normal)" : "(important)" ) + " 2");
 
   firstType.removeRules(win, firstStyle);
   secondType.removeRules(win, secondStyle);
 
   is(cs.getPropertyValue('color'), 'rgb(0, 0, 0)', firstType.type + " vs " + secondType.type + " 3");
-  is(cs.getPropertyValue('background-color'), 'transparent', firstType.type + " vs " + secondType.type + " 4");
+  is(cs.getPropertyValue('background-color'), 'rgba(0, 0, 0, 0)', firstType.type + " vs " + secondType.type + " 4");
 }
 
 // There are 8 cases. Regular against regular, regular against important, important
 // against regular, important against important. We can load style from typeA first
 // then typeB or the other way around so that's 4*2=8 cases.
 
 function testStyleVsStyle(win, typeA, typeB, results)
 {
--- a/layout/style/test/test_bug229915.html
+++ b/layout/style/test/test_bug229915.html
@@ -40,17 +40,17 @@ https://bugzilla.mozilla.org/show_bug.cg
 </div>
 <pre id="test">
 <script class="testbody" type="text/javascript">
 
 /** Test for Bug 229915 **/
 
 const GREEN = "rgb(0, 128, 0)";
 const BLACK = "rgb(0, 0, 0)";
-const TRANSPARENT = "transparent";
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
 const WHITE = "rgb(255, 255, 255)";
 
 function make_prev() {
   var result = document.createElement("p");
   result.setAttribute("class", "prev");
   var t = document.createTextNode("Dynamically created previous paragraph.");
   result.appendChild(t);
   return result;
--- a/layout/style/test/test_bug372770.html
+++ b/layout/style/test/test_bug372770.html
@@ -30,28 +30,22 @@ var i;
 for (i = 0; i < colors.length; ++i) {
   var color = colors[i];
   style1.color = color;
   style2.color = color;
   is(style1.color, color, "Inline style color roundtripping failed at color " + i);
   is(style2.color, color, "Rule style color roundtripping failed at color " + i);
 }
 
-// This code is only here because of bug 372783.  Once that's fixed, this test
-// for "rgba(0, 0, 0, 0)" will fail.
 style1.color = "rgba(0, 0, 0, 0)";
 style2.color = "rgba(0, 0, 0, 0)";
-is(style1.color, "transparent",
-   "Inline style should give transparent for rgba(0,0,0,0)");
-is(style2.color, "transparent",
-   "Rule style should give transparent for rgba(0,0,0,0)");
-todo(style1.color == "rgba(0, 0, 0, 0)",
-     "Inline style should round-trip black transparent color correctly");
-todo(style2.color == "rgba(0, 0, 0, 0)",
-     "Rule style should round-trip black transparent color correctly");
+is(style1.color, "rgba(0, 0, 0, 0)",
+   "Inline style should round-trip black transparent color correctly");
+is(style2.color, "rgba(0, 0, 0, 0)",
+   "Rule style should round-trip black transparent color correctly");
 
 for (var i = 0; i <= 100; ++i) {
   if (i == 70 || i == 90) {
     // Tinderbox unhappy for some reason... just skip these for now?
     continue;
   }
   var color1 = "rgba(128, 128, 128, " + i/100 + ")";
   var color2 = "rgba(175, 63, 27, " + i/100 + ")";
--- a/layout/style/test/test_bug635286.html
+++ b/layout/style/test/test_bug635286.html
@@ -31,17 +31,17 @@ window.addEventListener("load", function
   var cases = Array.slice(document.getElementsByTagName("div"));
   cases.forEach(function(aCase, aIndex) {
     aCase.className = "after";
   });
   window.setTimeout(function() {
     cases.forEach(function(aCase, aIndex) {
       is(window.getComputedStyle(aCase)
            .getPropertyValue("background-color"),
-         "transparent",
+         "rgba(0, 0, 0, 0)",
          aCase.textContent);
     });
     SimpleTest.finish();
   }, 1);
 });
 
 SimpleTest.waitForExplicitFinish();
 SimpleTest.requestFlakyTimeout("untriaged");
--- a/layout/style/test/test_computed_style.html
+++ b/layout/style/test/test_computed_style.html
@@ -356,18 +356,18 @@ var noframe_container = document.getElem
 
   var testStyles = {
     "mask" : "",
     "markerStart" : "",
     "markerMid" : "",
     "markerEnd" : "",
     "clipPath" : "",
     "filter" : "",
-    "fill" : " transparent",
-    "stroke" : " transparent",
+    "fill" : " rgba(0, 0, 0, 0)",
+    "stroke" : " rgba(0, 0, 0, 0)",
   };
 
   for (var prop in testStyles) {
     p.style[prop] = localURL;
     is(cs[prop], localURL + testStyles[prop], "computed value of " + prop);
     p.style[prop] = nonLocalURL;
     is(cs[prop], resolvedNonLocalURL + testStyles[prop], "computed value of " + prop);
   }
--- a/layout/style/test/test_default_computed_style.html
+++ b/layout/style/test/test_default_computed_style.html
@@ -40,17 +40,17 @@ is(cs.marginTop, "0px", "We have 0 margi
 is(cs.backgroundColor, "rgb(255, 255, 0)", "We have yellow background");
 is(cs.color, "rgb(0, 0, 255)", "We have blue text");
 is(cs_pseudo.content, '"Visible"', "We have some content");
 is(cs_pseudo.display, "block", "Our ::before is block");
 
 // And now our actual tests
 is(cs_default.display, "block", "We have block display by default");
 is(cs_default.marginTop, "16px", "We have 16px margin by default");
-is(cs_default.backgroundColor, "transparent",
+is(cs_default.backgroundColor, "rgba(0, 0, 0, 0)",
    "We have transparent background by default");
 is(cs_default.color, "rgb(0, 0, 0)", "We have black text by default");
 is(cs_default_pseudo.content, "none", "We have no content by default");
 is(cs_default_pseudo.display, "inline", "Our ::before is inline by default");
 
 
 </script>
 </pre>
--- a/testing/marionette/harness/marionette_harness/tests/unit/test_chrome_element_css.py
+++ b/testing/marionette/harness/marionette_harness/tests/unit/test_chrome_element_css.py
@@ -15,9 +15,9 @@ class TestChromeElementCSS(MarionetteTes
             element = self.marionette.find_element(By.ID, "identity-icon")
             favicon_image = element.value_of_css_property("list-style-image")
 
             self.assertIn("identity-icon.svg", favicon_image)
 
             element = self.marionette.find_element(By.ID, "identity-box")
             background_colour = element.value_of_css_property("background-color")
 
-            self.assertEqual("transparent", background_colour)
+            self.assertEqual("rgba(0, 0, 0, 0)", background_colour)
--- a/testing/web-platform/meta/editing/run/forecolor.html.ini
+++ b/testing/web-platform/meta/editing/run/forecolor.html.ini
@@ -97,19 +97,16 @@
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","rgb( 0 ,0 ,255)"\]\] "foo[bar\]baz" compare innerHTML]
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","rgb( 0 ,0 ,255)"\]\] "foo[bar\]baz" queryCommandValue("forecolor") after]
     expected: FAIL
 
-  [[["stylewithcss","true"\],["forecolor","rgba(0, 0, 255, 0.0)"\]\] "foo[bar\]baz" queryCommandValue("forecolor") after]
-    expected: FAIL
-
   [[["stylewithcss","false"\],["forecolor","rgba(0, 0, 255, 0.0)"\]\] "foo[bar\]baz" compare innerHTML]
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","rgba(0, 0, 255, 0.0)"\]\] "foo[bar\]baz" queryCommandValue("forecolor") after]
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","rgb(15, -10, 375)"\]\] "foo[bar\]baz" compare innerHTML]
     expected: FAIL
@@ -223,25 +220,19 @@
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgb(0%, 0%, 100%)\\">[foo\]</span>" compare innerHTML]
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgb( 0 ,0 ,255)\\">[foo\]</span>" compare innerHTML]
     expected: FAIL
 
-  [[["stylewithcss","true"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgba(0, 0, 255, 0.0)\\">[foo\]</span>" queryCommandValue("forecolor") before]
-    expected: FAIL
-
   [[["stylewithcss","false"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgba(0, 0, 255, 0.0)\\">[foo\]</span>" compare innerHTML]
     expected: FAIL
 
-  [[["stylewithcss","false"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgba(0, 0, 255, 0.0)\\">[foo\]</span>" queryCommandValue("forecolor") before]
-    expected: FAIL
-
   [[["stylewithcss","false"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgb(15, -10, 375)\\">[foo\]</span>" compare innerHTML]
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgba(0, 0, 0, 1)\\">[foo\]</span>" compare innerHTML]
     expected: FAIL
 
   [[["stylewithcss","false"\],["forecolor","#0000FF"\]\] "<span style=\\"color: rgba(255, 255, 255, 1)\\">[foo\]</span>" compare innerHTML]
     expected: FAIL
--- a/testing/web-platform/meta/editing/run/hilitecolor.html.ini
+++ b/testing/web-platform/meta/editing/run/hilitecolor.html.ini
@@ -304,19 +304,25 @@
     expected: FAIL
 
   [[["stylewithcss","true"\],["hilitecolor","#00FFFF"\]\] "<span style=background-color:tan>fo[o<span style=background-color:transparent>b\]ar</span></span>" queryCommandValue("hilitecolor") after]
     expected: FAIL
 
   [[["stylewithcss","false"\],["hilitecolor","#00FFFF"\]\] "<span style=background-color:tan>fo[o<span style=background-color:transparent>b\]ar</span></span>" queryCommandValue("hilitecolor") after]
     expected: FAIL
 
+  [[["stylewithcss","true"\],["hilitecolor","#00FFFF"\]\] "<font size=6>[foo\]</font>" queryCommandValue("hilitecolor") after]
+    expected: FAIL
+
   [[["stylewithcss","false"\],["hilitecolor","#00FFFF"\]\] "<font size=6>[foo\]</font>" queryCommandValue("hilitecolor") after]
     expected: FAIL
 
+  [[["stylewithcss","true"\],["hilitecolor","#00FFFF"\]\] "<span style=font-size:xx-large>[foo\]</span>" queryCommandValue("hilitecolor") after]
+    expected: FAIL
+
   [[["stylewithcss","false"\],["hilitecolor","#00FFFF"\]\] "<span style=font-size:xx-large>[foo\]</span>" queryCommandValue("hilitecolor") after]
     expected: FAIL
 
   [[["stylewithcss","true"\],["hilitecolor","#00FFFF"\]\] "<font size=6>foo[bar\]baz</font>" queryCommandValue("hilitecolor") after]
     expected: FAIL
 
   [[["stylewithcss","false"\],["hilitecolor","#00FFFF"\]\] "<font size=6>foo[bar\]baz</font>" queryCommandValue("hilitecolor") after]
     expected: FAIL
--- a/toolkit/components/extensions/test/mochitest/test_ext_contentscript_about_blank.html
+++ b/toolkit/components/extensions/test/mochitest/test_ext_contentscript_about_blank.html
@@ -98,17 +98,17 @@ add_task(function* test_contentscript_ab
   let style = win.getComputedStyle(win.document.body);
   is(style.color, "rgb(255, 0, 0)", "top window text color is red");
   is(style.backgroundColor, "rgb(255, 255, 0)", "top window background is yellow");
   is(style.textAlign, "right", "top window text is right-aligned");
 
   let a_b = win.document.getElementById("a_b");
   style = a_b.contentWindow.getComputedStyle(a_b.contentDocument.body);
   is(style.color, "rgb(255, 0, 0)", "about:blank iframe text color is red");
-  is(style.backgroundColor, "transparent", "about:blank iframe background is transparent");
+  is(style.backgroundColor, "rgba(0, 0, 0, 0)", "about:blank iframe background is transparent");
   is(style.textAlign, "right", "about:blank text is right-aligned");
 
   is(count, 10, "exactly 7 more scripts ran");
   win.close();
 
   yield extension.unload();
 });
 </script>