From 0b0755b970e43e4ba329b20330fa1b8f136ee4d0 Mon Sep 17 00:00:00 2001 From: Sangeun Kim Date: Mon, 26 Aug 2013 15:13:13 +0900 Subject: [PATCH 1/5] Add css module to use border-style --- src/components/gfx/gfx.rc | 1 + 1 file changed, 1 insertion(+) 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"); From 03fb29e0662a678cd2f457710e87e14ea55f863d Mon Sep 17 00:00:00 2001 From: Sangeun Kim Date: Mon, 26 Aug 2013 15:19:44 +0900 Subject: [PATCH 2/5] Add style field to render them in RenderContext --- src/components/gfx/display_list.rs | 9 +++++++-- src/components/main/layout/box.rs | 27 ++++++++++++++++----------- 2 files changed, 23 insertions(+), 13 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 { /// The border widths border: SideOffsets2D, - /// The color of the border. + /// The border colors. color: SideOffsets2D, + + /// The border styles. + style: SideOffsets2D } impl DisplayItem { @@ -151,7 +155,8 @@ impl DisplayItem { BorderDisplayItemClass(ref border) => { render_context.draw_border(&border.base.bounds, border.border, - border.color) + border.color, + border.style) } } } 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)) From 09f1192fa52295489cc0f32284de9e09ef5cfade Mon Sep 17 00:00:00 2001 From: Sangeun Kim Date: Mon, 26 Aug 2013 15:38:34 +0900 Subject: [PATCH 3/5] Add apply_border_style to apply each CSSBorderStyle --- src/components/gfx/render_context.rs | 80 ++++++++++++++++++++++++---- 1 file changed, 71 insertions(+), 9 deletions(-) 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, border: SideOffsets2D, - color: SideOffsets2D) { + color: SideOffsets2D, + style: SideOffsets2D) { 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 { From 160753ee2772aac9d770a099202c4bfe4fd1d58f Mon Sep 17 00:00:00 2001 From: Sangeun Kim Date: Wed, 28 Aug 2013 16:24:22 +0900 Subject: [PATCH 4/5] Update submodules --- src/support/azure/rust-azure | 2 +- src/support/css/rust-css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/support/azure/rust-azure b/src/support/azure/rust-azure index f564836fb59..35d8fdac4cc 160000 --- a/src/support/azure/rust-azure +++ b/src/support/azure/rust-azure @@ -1 +1 @@ -Subproject commit f564836fb59e3a37b7cd9c903bd6282b61a2fea4 +Subproject commit 35d8fdac4ccb967a510db2feecb5bd3aa810a2a4 diff --git a/src/support/css/rust-css b/src/support/css/rust-css index d6bec7942ab..33df3254818 160000 --- a/src/support/css/rust-css +++ b/src/support/css/rust-css @@ -1 +1 @@ -Subproject commit d6bec7942ab07857dd65569dacc1a704dc3514df +Subproject commit 33df32548180b55cc96a22d1ff84aafe8e38503b From f96a0ac8b4acd2d579b08cf45a3edac52d87d8d3 Mon Sep 17 00:00:00 2001 From: Sangeun Kim Date: Thu, 29 Aug 2013 14:02:16 +0900 Subject: [PATCH 5/5] Add more test codes for border-style. And remove a file for same test --- src/test/html/test-border.css | 4 -- src/test/html/test-border.html | 11 ----- .../html/test_asymmetric_border_color.html | 15 ------- src/test/html/test_border.html | 41 +++++++++++++++++++ 4 files changed, 41 insertions(+), 30 deletions(-) delete mode 100644 src/test/html/test-border.css delete mode 100644 src/test/html/test-border.html delete mode 100644 src/test/html/test_asymmetric_border_color.html create mode 100755 src/test/html/test_border.html 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 @@ - - - - - - - - - - - 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 @@ - - - Examples of margins, padding, and borders - - - -
  • Second element of list is a bit longer to illustrate wrapping. - - 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 @@ + + + + + +
    none test.
    +
    hidden test.
    + +
    solid test
    + +
    dashed test
    + +
    dotted test. (dotted isn't supported yet)
    + +