auto merge of #811 : sammykim/servo/border-style, r=metajack

As I commented in codes, there are some issues to render some border-styles. I can't figure out why this code doesn't show what I expect. I compare this result with firefox. And when I tested it with CSSBorderStyleDashed, It looks almost same with firefox.
But CSSBorderStyleSolid and CSSBorderStyleDotted don't show right result.
I guess the first problem is processing JoinCap with CSSBorderStyleSolid. It might be problems in Azure or somewhere I don't know exactly.
I suspect the second problem is processing DashPattern with CSSBorderDotted. It is also somewhere in Azure or another modules.
So I sent this PR and expect someone can help me to figure out what the problem makes this issues.
If you can't catch what the problem is exactly, I will leave an issue and look it more after this merged.

PS. I referred to firefox code for border style codes.
URL : http://mxr.mozilla.org/mozilla-central/source/layout/base/nsCSSRenderingBorders.cpp#1080

10 files changed, 136 insertions, 52 deletions

diff --git a/src/components/gfx/display_list.rs b/src/components/gfx/display_list.rs
index 08e0557be77..7e73a31a2bc 100644
--- a/src/components/gfx/display_list.rs
+++ b/src/components/gfx/display_list.rs
@@ -16,6 +16,7 @@
 
 use color::Color;
 use geometry::Au;
+use newcss::values::CSSBorderStyle;
 use render_context::RenderContext;
 use text::SendableTextRun;
 
@@ -103,8 +104,11 @@ pub struct BorderDisplayItem<E> {
     /// The border widths
     border: SideOffsets2D<Au>,
 
-    /// The color of the border.
+    /// The border colors.
     color: SideOffsets2D<Color>,
+
+    /// The border styles.
+    style: SideOffsets2D<CSSBorderStyle>
 }
 
 impl<E> DisplayItem<E> {
@@ -151,7 +155,8 @@ impl<E> DisplayItem<E> {
             BorderDisplayItemClass(ref border) => {
                 render_context.draw_border(&border.base.bounds,
                                            border.border,
-                                           border.color)
+                                           border.color,
+                                           border.style)
             }
         }
     }
diff --git a/src/components/gfx/gfx.rc b/src/components/gfx/gfx.rc
index eddeb32e970..963f083eebc 100644
--- a/src/components/gfx/gfx.rc
+++ b/src/components/gfx/gfx.rc
@@ -10,6 +10,7 @@
 
 extern mod azure;
 extern mod geom;
+extern mod newcss (name = "css");
 extern mod stb_image;
 extern mod extra;
 extern mod servo_net (name = "net");
diff --git a/src/components/gfx/render_context.rs b/src/components/gfx/render_context.rs
index c9d278fea96..80f58af5ee8 100644
--- a/src/components/gfx/render_context.rs
+++ b/src/components/gfx/render_context.rs
@@ -5,12 +5,18 @@
 use servo_msg::compositor_msg::LayerBuffer;
 use font_context::FontContext;
 use geometry::Au;
+use newcss::values::CSSBorderStyle;
+use newcss::values::{CSSBorderStyleNone, CSSBorderStyleHidden, CSSBorderStyleDotted, CSSBorderStyleDashed, CSSBorderStyleSolid, CSSBorderStyleDouble, CSSBorderStyleGroove, CSSBorderStyleRidge, CSSBorderStyleInset, CSSBorderStyleOutset};
 use opts::Opts;
 
 use azure::azure_hl::{B8G8R8A8, Color, ColorPattern, DrawOptions};
 use azure::azure_hl::{DrawSurfaceOptions, DrawTarget, Linear, StrokeOptions};
+use azure::{AZ_CAP_BUTT, AZ_CAP_ROUND};
+use azure::AZ_JOIN_BEVEL;
 use azure::AzFloat;
+use std::vec;
 use std::libc::types::common::c99::uint16_t;
+use std::libc::size_t;
 use geom::point::Point2D;
 use geom::rect::Rect;
 use geom::size::Size2D;
@@ -37,39 +43,39 @@ impl<'self> RenderContext<'self>  {
     pub fn draw_border(&self,
                        bounds: &Rect<Au>,
                        border: SideOffsets2D<Au>,
-                       color: SideOffsets2D<Color>) {
+                       color: SideOffsets2D<Color>,
+                       style: SideOffsets2D<CSSBorderStyle>) {
         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);
-
         let rect = bounds.to_azure_rect();
         let border = border.to_float_px();
 
         self.canvas.draw_target.make_current();
-
+        let mut dash: [AzFloat, ..2] = [0 as AzFloat, 0 as AzFloat];
+        let mut stroke_opts = StrokeOptions(0 as AzFloat, 10 as AzFloat);
+ 
         // draw top border
-        stroke_opts.line_width = border.top;
+        RenderContext::apply_border_style(style.top, border.top, dash, &mut stroke_opts);
         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, &ColorPattern(color.top), &stroke_opts, &draw_opts);
 
         // draw right border
-        stroke_opts.line_width = border.right;
+        RenderContext::apply_border_style(style.right, border.right, dash,  &mut stroke_opts);
         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, &ColorPattern(color.right), &stroke_opts, &draw_opts);
 
         // draw bottom border
-        stroke_opts.line_width = border.bottom;
+        RenderContext::apply_border_style(style.bottom, border.bottom, dash, &mut stroke_opts);
         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, &ColorPattern(color.bottom), &stroke_opts, &draw_opts);
 
         // draw left border
-        stroke_opts.line_width = border.left;
+        RenderContext::apply_border_style(style.left, border.left, dash,  &mut stroke_opts);
         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);
@@ -106,6 +112,62 @@ impl<'self> RenderContext<'self>  {
         self.canvas.draw_target.make_current();
         self.canvas.draw_target.fill_rect(&rect, &pattern);
     }
+
+    fn apply_border_style(style: CSSBorderStyle, border_width: AzFloat, dash: &mut [AzFloat], stroke_opts: &mut StrokeOptions){
+        match style{
+            CSSBorderStyleNone => {
+            }
+            CSSBorderStyleHidden => {
+            }
+            //FIXME(sammykim): This doesn't work with dash_pattern and cap_style well. I referred firefox code.
+            CSSBorderStyleDotted => {
+                stroke_opts.line_width = border_width;
+                
+                if border_width > 2.0 {
+                    dash[0] = 0 as AzFloat;
+                    dash[1] = border_width * 2.0;
+
+                    stroke_opts.set_cap_style(AZ_CAP_ROUND as u8);
+                } else {
+                    dash[0] = border_width;
+                    dash[1] = border_width;
+                }
+                stroke_opts.mDashPattern = vec::raw::to_ptr(dash);
+                stroke_opts.mDashLength = dash.len() as size_t;
+            }
+            CSSBorderStyleDashed => {
+                stroke_opts.set_cap_style(AZ_CAP_BUTT as u8);
+                stroke_opts.line_width = border_width;
+                dash[0] = border_width*3 as AzFloat;
+                dash[1] = border_width*3 as AzFloat;
+                stroke_opts.mDashPattern = vec::raw::to_ptr(dash);
+                stroke_opts.mDashLength = dash.len() as size_t;
+            }
+            //FIXME(sammykim): BorderStyleSolid doesn't show proper join-style with comparing firefox.
+            CSSBorderStyleSolid => {
+                stroke_opts.set_cap_style(AZ_CAP_BUTT as u8);
+                stroke_opts.set_join_style(AZ_JOIN_BEVEL as u8);
+                stroke_opts.line_width = border_width; 
+                stroke_opts.mDashLength = 0 as size_t;
+            }            
+            //FIXME(sammykim): Five more styles should be implemented.
+            CSSBorderStyleDouble => {
+
+            }
+            CSSBorderStyleGroove => {
+
+            }
+            CSSBorderStyleRidge => {
+
+            }
+            CSSBorderStyleInset => {
+
+            }
+            CSSBorderStyleOutset => {
+
+            }
+        }
+    }
 }
 
 trait to_float {
diff --git a/src/components/main/layout/box.rs b/src/components/main/layout/box.rs
index a8e5177a155..32d38b3116a 100644
--- a/src/components/main/layout/box.rs
+++ b/src/components/main/layout/box.rs
@@ -27,6 +27,7 @@ use newcss::color::rgb;
 use newcss::complete::CompleteStyle;
 use newcss::units::{Em, Px};
 use newcss::units::{Cursive, Fantasy, Monospace, SansSerif, Serif};
+use newcss::values::{CSSBorderStyleDashed, CSSBorderStyleSolid};
 use newcss::values::{CSSClearNone, CSSClearLeft, CSSClearRight, CSSClearBoth};
 use newcss::values::{CSSFontFamilyFamilyName, CSSFontFamilyGenericFamily};
 use newcss::values::{CSSFontSizeLength, CSSFontStyleItalic, CSSFontStyleNormal};
@@ -637,7 +638,8 @@ impl RenderBox {
                                 extra: ExtraDisplayListData::new(*self),
                             },
                             border: debug_border,
-                            color: SideOffsets2D::new_all_same(rgb(0, 0, 200).to_gfx_color())
+                            color: SideOffsets2D::new_all_same(rgb(0, 0, 200).to_gfx_color()),
+                            style: SideOffsets2D::new_all_same(CSSBorderStyleSolid)
 
                         };
                         list.append_item(BorderDisplayItemClass(border_display_item))
@@ -658,7 +660,8 @@ impl RenderBox {
                                 extra: ExtraDisplayListData::new(*self),
                             },
                             border: debug_border,
-                            color: SideOffsets2D::new_all_same(rgb(0, 200, 0).to_gfx_color())
+                            color: SideOffsets2D::new_all_same(rgb(0, 200, 0).to_gfx_color()),
+                            style: SideOffsets2D::new_all_same(CSSBorderStyleDashed)
 
                         };
                         list.append_item(BorderDisplayItemClass(border_display_item))
@@ -684,7 +687,8 @@ impl RenderBox {
                                 extra: ExtraDisplayListData::new(*self),
                             },
                             border: debug_border,
-                            color: SideOffsets2D::new_all_same(rgb(0, 0, 200).to_gfx_color())
+                            color: SideOffsets2D::new_all_same(rgb(0, 0, 200).to_gfx_color()),
+                            style: SideOffsets2D::new_all_same(CSSBorderStyleSolid)
 
                         };
                         list.append_item(BorderDisplayItemClass(border_display_item))
@@ -915,11 +919,8 @@ impl RenderBox {
             return
         }
 
-        let top_color = self.style().border_top_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();
-
+        let (top_color, right_color, bottom_color, left_color) = (self.style().border_top_color(), self.style().border_right_color(), self.style().border_bottom_color(), self.style().border_left_color());
+        let (top_style, right_style, bottom_style, left_style) = (self.style().border_top_style(), self.style().border_right_style(), self.style().border_bottom_style(), self.style().border_left_style());
         // Append the border to the display list.
         do list.with_mut_ref |list| {
             let border_display_item = ~BorderDisplayItem {
@@ -932,9 +933,13 @@ impl RenderBox {
                                            border.bottom,
                                            border.left),
                 color: SideOffsets2D::new(top_color.to_gfx_color(),
-                                        right_color.to_gfx_color(),
-                                        bottom_color.to_gfx_color(),
-                                        left_color.to_gfx_color())
+                                          right_color.to_gfx_color(),
+                                          bottom_color.to_gfx_color(),
+                                          left_color.to_gfx_color()),
+                style: SideOffsets2D::new(top_style,
+                                          right_style,
+                                          bottom_style,
+                                          left_style)
             };
 
             list.append_item(BorderDisplayItemClass(border_display_item))
diff --git a/src/support/azure/rust-azure b/src/support/azure/rust-azure
-Subproject f564836fb59e3a37b7cd9c903bd6282b61a2fea
+Subproject 35d8fdac4ccb967a510db2feecb5bd3aa810a2a
diff --git a/src/support/css/rust-css b/src/support/css/rust-css
-Subproject d6bec7942ab07857dd65569dacc1a704dc3514d
+Subproject 33df32548180b55cc96a22d1ff84aafe8e38503
diff --git a/src/test/html/test-border.css b/src/test/html/test-border.css
deleted file mode 100644
index e797cdfa2d0..00000000000
--- a/src/test/html/test-border.css
+++ /dev/null
@@ -1,4 +0,0 @@
-img {
-    border-width: 10px;
-    border-color: blue
-}
\ No newline at end of file
diff --git a/src/test/html/test-border.html b/src/test/html/test-border.html
deleted file mode 100644
index 56e448e58c1..00000000000
--- a/src/test/html/test-border.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link rel="stylesheet" href="test-border.css" />
-</head>
-<body>
-    <img src="test.jpeg"></img>
-</body>
-</html>
-
-
diff --git a/src/test/html/test_asymmetric_border_color.html b/src/test/html/test_asymmetric_border_color.html
deleted file mode 100644
index 1ab1b8ea4ce..00000000000
--- a/src/test/html/test_asymmetric_border_color.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<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>
diff --git a/src/test/html/test_border.html b/src/test/html/test_border.html
new file mode 100755
index 00000000000..db8bc8beecd
--- /dev/null
+++ b/src/test/html/test_border.html
@@ -0,0 +1,41 @@
+<html>
+<head>
+<style>
+#none{
+    border-style: none;
+    border-width: 10px;
+    border-color: green red yellow black;
+}
+#hidden{
+    border-style: hidden;
+    border-width: 10px;
+    border-color: green red yellow black;
+}
+#solid{
+    border-style: solid;
+    border-width: 10px;
+    border-color: yellow green red black;
+}
+#dashed{
+    border-style: dashed;
+    border-width: 10px;
+    border-color: green yellow black red;
+}
+#dotted{
+    border-style: dotted;
+    border-width: 10px;
+    border-color: green red yellow black;
+}
+</style>
+</head>
+<body>
+<div id="none"> none test.</div>
+<div id="hidden"> hidden test.</div>
+<!-- It doesn't work well yet. -->
+<div id="solid"> solid test</div>
+<!-- It shows almost same result with firefox. -->
+<div id="dashed"> dashed test</div>
+<!-- It doesn't show anything yet. -->
+<div id="dotted"> dotted test. (dotted isn't supported yet)</div>
+</body>
+</HTML>