Improve color serialization by retaining author-specified keywords.

components/script/dom/element.rs

@@ -527,10 +527,12 @@ impl<'a> ElementHelpers<'a> for JSRef<'a, Element> {
     }
 
     fn update_inline_style(self, property_decl: style::PropertyDeclaration) {
+        //FIXME: Rust bug incorrectly thinks inline_declarations doesn't need mut,
+        //       and allow(unused_mut) on this method does nothing.
         let mut inline_declarations = self.style_attribute.borrow_mut();
         let exists = inline_declarations.is_some();
         if exists {
-            let declarations = inline_declarations.as_mut().unwrap();
+            let declarations = inline_declarations.deref_mut().as_mut().unwrap();
             for declaration in declarations.normal.make_unique()
                                                   .iter_mut()
                                                   .chain(declarations.important.make_unique().iter_mut()) {

components/style/properties/common_types.rs

@@ -15,11 +15,39 @@ pub mod specified {
     use std::f64::consts::PI;
     use std::fmt::{Formatter, FormatError, Show};
     use url::Url;
+    use cssparser;
     use cssparser::ast;
     use cssparser::ast::*;
     use parsing_utils::{mod, BufferedIter, ParserIter};
     use super::{Au, CSSFloat};
-    pub use cssparser::Color as CSSColor;
+    #[deriving(Clone)]
+    pub struct CSSColor {
+        pub parsed: cssparser::Color,
+        pub authored: Option<String>,
+    }
+    impl CSSColor {
+        pub fn parse(component_value: &ComponentValue) -> Result<CSSColor, ()> {
+            let parsed = cssparser::Color::parse(component_value);
+            parsed.map(|parsed| {
+                let authored = match component_value {
+                    &Ident(ref s) | &QuotedString(ref s) => Some(s.clone()),
+                    _ => None,
+                };
+                CSSColor {
+                    parsed: parsed,
+                    authored: authored,
+                }
+            })
+        }
+    }
+    impl Show for CSSColor {
+        fn fmt(&self, f: &mut Formatter) -> Result<(), FormatError> {
+            match self.authored {
+                Some(ref s) => write!(f, "{}", s),
+                None => write!(f, "{}", self.parsed),
+            }
+        }
+    }
 
     #[deriving(Clone)]
     pub enum Length {
@@ -563,7 +591,6 @@ pub mod computed {
     pub use super::specified::{Angle, AngleOrCorner, HorizontalDirection};
     pub use super::specified::{VerticalDirection};
     pub use cssparser::Color as CSSColor;
-    pub use super::super::longhands::computed_as_specified as compute_CSSColor;
     use super::*;
     use super::super::longhands;
     use std::fmt;
@@ -589,6 +616,12 @@ pub mod computed {
         // TODO, as needed: viewport size, etc.
     }
 
+    #[allow(non_snake_case)]
+    #[inline]
+    pub fn compute_CSSColor(value: specified::CSSColor, _context: &computed::Context) -> CSSColor {
+        value.parsed
+    }
+
     #[allow(non_snake_case)]
     #[inline]
     pub fn compute_Au(value: specified::Length, context: &Context) -> Au {
@@ -767,7 +800,7 @@ pub mod computed {
                 angle_or_corner: angle_or_corner,
                 stops: stops.into_iter().map(|stop| {
                     ColorStop {
-                        color: stop.color,
+                        color: stop.color.parsed,
                         position: match stop.position {
                             None => None,
                             Some(value) => Some(compute_LengthOrPercentage(value, context)),

components/style/properties/mod.rs.mako

@@ -1875,9 +1875,9 @@ pub mod shorthands {
             // three values set top, (left, right) and bottom
             // four values set them in order
             let top = iter.next().unwrap_or(None);
-            let right = iter.next().unwrap_or(top);
+            let right = iter.next().unwrap_or(top.clone());
-            let bottom = iter.next().unwrap_or(top);
+            let bottom = iter.next().unwrap_or(top.clone());
-            let left = iter.next().unwrap_or(right);
+            let left = iter.next().unwrap_or(right.clone());
             if top.is_some() && right.is_some() && bottom.is_some() && left.is_some()
             && iter.next().is_none() {
                 Ok(Longhands {
@@ -2078,7 +2078,7 @@ pub mod shorthands {
             Longhands {
                 % for side in ["top", "right", "bottom", "left"]:
                     % for prop in ["color", "style", "width"]:
-                        ${"border_%s_%s: %s," % (side, prop, prop)}
+                        ${"border_%s_%s: %s.clone()," % (side, prop, prop)}
                     % endfor
                 % endfor
             }

tests/html/test_style.html

@@ -1,10 +1,10 @@
-<div id="test" style="display: block; background-color: black; background-position: top left;">test text!</div>
+<div id="test" style="display: block; background-color: black; background-position: top left; font-style: italic">test text!</div>
 <script>
 var id = document.getElementById('test');
 /*alert(id.style.display);
 id.style.display = 'none';
 alert(id.style.display);*/
-
+alert(id.style.fontStyle + ' ' + id.style['font-style']);
 id.style.background = "black";
 alert(document.getElementById('test').style.background);
 alert(document.getElementById('test').style.backgroundColor);