Implement asymmetric border colors

src/components/gfx/display_list.rs

@@ -104,7 +104,7 @@ pub struct BorderDisplayItem<E> {
     border: SideOffsets2D<Au>,
 
     /// The color of the border.
-    color: Color,
+    color: SideOffsets2D<Color>,
 }
 
 impl<E> DisplayItem<E> {

src/components/gfx/render_context.rs

@@ -37,8 +37,7 @@ impl<'self> RenderContext<'self>  {
     pub fn draw_border(&self,
                        bounds: &Rect<Au>,
                        border: SideOffsets2D<Au>,
-                       color: Color) {
-        let pattern = ColorPattern(color);
+                       color: SideOffsets2D<Color>) {
         let draw_opts = DrawOptions(1 as AzFloat, 0 as uint16_t);
         let stroke_fields = 2; // CAP_SQUARE
         let mut stroke_opts = StrokeOptions(0 as AzFloat, 10 as AzFloat, stroke_fields);
@@ -53,28 +52,28 @@ impl<'self> RenderContext<'self>  {
         let y = rect.origin.y + border.top * 0.5;
         let start = Point2D(rect.origin.x, y);
         let end = Point2D(rect.origin.x + rect.size.width, y);
-        self.canvas.draw_target.stroke_line(start, end, &pattern, &stroke_opts, &draw_opts);
+        self.canvas.draw_target.stroke_line(start, end, &ColorPattern(color.top), &stroke_opts, &draw_opts);
 
         // draw bottom border
         stroke_opts.line_width = border.bottom;
         let y = rect.origin.y + rect.size.height - border.bottom * 0.5;
         let start = Point2D(rect.origin.x, y);
         let end = Point2D(rect.origin.x + rect.size.width, y);
-        self.canvas.draw_target.stroke_line(start, end, &pattern, &stroke_opts, &draw_opts);
+        self.canvas.draw_target.stroke_line(start, end, &ColorPattern(color.bottom), &stroke_opts, &draw_opts);
 
         // draw left border
         stroke_opts.line_width = border.left;
         let x = rect.origin.x + border.left * 0.5;
         let start = Point2D(x, rect.origin.y);
         let end = Point2D(x, rect.origin.y + rect.size.height);
-        self.canvas.draw_target.stroke_line(start, end, &pattern, &stroke_opts, &draw_opts);
+        self.canvas.draw_target.stroke_line(start, end, &ColorPattern(color.left), &stroke_opts, &draw_opts);
 
         // draw right border
         stroke_opts.line_width = border.right;
         let x = rect.origin.x + rect.size.width - border.right * 0.5;
         let start = Point2D(x, rect.origin.y);
         let end = Point2D(x, rect.origin.y + rect.size.height);
-        self.canvas.draw_target.stroke_line(start, end, &pattern, &stroke_opts, &draw_opts);
+        self.canvas.draw_target.stroke_line(start, end, &ColorPattern(color.right), &stroke_opts, &draw_opts);
     }
 
     pub fn draw_image(&self, bounds: Rect<Au>, image: Arc<~Image>) {

src/components/main/layout/box.rs

@@ -628,18 +628,17 @@ impl RenderBox {
                 // should have a real `SERVO_DEBUG` system.
                 debug!("%?", { 
                     // Compute the text box bounds and draw a border surrounding them.
-                    let debug_border = SideOffsets2D::new(Au::from_px(1),
-                                                          Au::from_px(1),
-                                                          Au::from_px(1),
-                                                          Au::from_px(1));
+                    let debug_border = SideOffsets2D::new_all_same(Au::from_px(1));
+
                     do list.with_mut_ref |list| {
                         let border_display_item = ~BorderDisplayItem {
                             base: BaseDisplayItem {
                                 bounds: absolute_box_bounds,
                                 extra: ExtraDisplayListData::new(*self),
                             },
                             border: debug_border,
-                            color: rgb(0, 0, 200).to_gfx_color(),
+                            color: SideOffsets2D::new_all_same(rgb(0, 0, 200).to_gfx_color())
+
                         };
                         list.append_item(BorderDisplayItemClass(border_display_item))
                     }
@@ -659,7 +658,8 @@ impl RenderBox {
                                 extra: ExtraDisplayListData::new(*self),
                             },
                             border: debug_border,
-                            color: rgb(0, 200, 0).to_gfx_color(),
+                            color: SideOffsets2D::new_all_same(rgb(0, 200, 0).to_gfx_color())
+
                         };
                         list.append_item(BorderDisplayItemClass(border_display_item))
                     }
@@ -675,10 +675,7 @@ impl RenderBox {
                 // FIXME(pcwalton): This is a bit of an abuse of the logging infrastructure. We
                 // should have a real `SERVO_DEBUG` system.
                 debug!("%?", {
-                    let debug_border = SideOffsets2D::new(Au::from_px(1),
-                                                          Au::from_px(1),
-                                                          Au::from_px(1),
-                                                          Au::from_px(1));
+                    let debug_border = SideOffsets2D::new_all_same(Au::from_px(1));
 
                     do list.with_mut_ref |list| {
                         let border_display_item = ~BorderDisplayItem {
@@ -687,7 +684,8 @@ impl RenderBox {
                                 extra: ExtraDisplayListData::new(*self),
                             },
                             border: debug_border,
-                            color: rgb(0, 0, 200).to_gfx_color(),
+                            color: SideOffsets2D::new_all_same(rgb(0, 0, 200).to_gfx_color())
+
                         };
                         list.append_item(BorderDisplayItemClass(border_display_item))
                     }
@@ -914,9 +912,10 @@ impl RenderBox {
             return
         }
 
-        // FIXME: all colors set to top color. this is obviously not right.
         let top_color = self.style().border_top_color();
-        let color = top_color.to_gfx_color();
+        let right_color = self.style().border_right_color();
+        let bottom_color = self.style().border_bottom_color();
+        let left_color = self.style().border_left_color();
 
         // Append the border to the display list.
         do list.with_mut_ref |list| {
@@ -929,7 +928,10 @@ impl RenderBox {
                                            border.right,
                                            border.bottom,
                                            border.left),
-                color: color,
+                color: SideOffsets2D::new(top_color.to_gfx_color(),
+                                        right_color.to_gfx_color(),
+                                        bottom_color.to_gfx_color(),
+                                        left_color.to_gfx_color())
             };
 
             list.append_item(BorderDisplayItemClass(border_display_item))

src/test/html/test_asymmetric_border_color.html

@@ -0,0 +1,15 @@
+<HTML>
+    <HEAD>
+        <TITLE>Examples of margins, padding, and borders</TITLE>
+        <STYLE type="text/css">
+            LI.withborder {
+                border-style: dashed;
+                border-width: 10px;
+                border-color: yellow black red green;
+            }
+        </STYLE>
+    </HEAD>
+    <BODY>
+    <LI class="withborder">Second element of list is           a bit longer to illustrate wrapping.
+</BODY>
+</HTML>