diff --git a/src/components/gfx/render_context.rs b/src/components/gfx/render_context.rs index 95b834c3d5d..d5df16b45ca 100644 --- a/src/components/gfx/render_context.rs +++ b/src/components/gfx/render_context.rs @@ -145,22 +145,29 @@ impl<'a> RenderContext<'a> { }; match style_select{ - border_style::none => { + border_style::none => { } - border_style::hidden => { + border_style::hidden => { } //FIXME(sammykim): This doesn't work with dash_pattern and cap_style well. I referred firefox code. - border_style::dotted => { + border_style::dotted => { self.draw_dashed_border_segment(direction, bounds, border, color_select, DottedBorder); } - border_style::dashed => { + border_style::dashed => { self.draw_dashed_border_segment(direction, bounds, border, color_select, DashedBorder); } - border_style::solid => { + border_style::solid => { self.draw_solid_border_segment(direction,bounds,border,color_select); } - //FIXME(sammykim): Five more styles should be implemented. - //double, groove, ridge, inset, outset + border_style::double => { + self.draw_double_border_segment(direction, bounds, border, color_select); + } + border_style::groove | border_style::ridge => { + self.draw_groove_ridge_border_segment(direction, bounds, border, color_select, style_select); + } + border_style::inset | border_style::outset => { + self.draw_inset_outset_border_segment(direction, bounds, border, style_select, color_select); + } } } @@ -168,26 +175,75 @@ impl<'a> RenderContext<'a> { let border = SideOffsets2D::new_all_same(bounds.size.width).to_float_px(); match style{ - border_style::none | border_style::hidden => {} - border_style::dotted => { + border_style::none | border_style::hidden => {} + border_style::dotted => { self.draw_dashed_border_segment(Right, bounds, border, color, DottedBorder); } - border_style::dashed => { + border_style::dashed => { self.draw_dashed_border_segment(Right, bounds, border, color, DashedBorder); } - border_style::solid => { + border_style::solid => { self.draw_solid_border_segment(Right,bounds,border,color); } - //FIXME(sankha93): Five more styles should be implemented. - //double, groove, ridge, inset, outset + border_style::double => { + self.draw_double_border_segment(Right, bounds, border, color); + } + border_style::groove | border_style::ridge => { + self.draw_groove_ridge_border_segment(Right, bounds, border, color, style); + } + border_style::inset | border_style::outset => { + self.draw_inset_outset_border_segment(Right, bounds, border, style, color); + } } } - fn draw_dashed_border_segment(&self, - direction: Direction, - bounds: &Rect, - border: SideOffsets2D, - color: Color, + fn draw_border_path(&self, + bounds: Rect, + direction: Direction, + border: SideOffsets2D, + color: Color) { + let left_top = bounds.origin; + let right_top = left_top + Point2D(bounds.size.width, 0.0); + let left_bottom = left_top + Point2D(0.0, bounds.size.height); + let right_bottom = left_top + Point2D(bounds.size.width, bounds.size.height); + let draw_opts = DrawOptions(1.0, 0); + let path_builder = self.draw_target.create_path_builder(); + match direction { + Top => { + path_builder.move_to(left_top); + path_builder.line_to(right_top); + path_builder.line_to(right_top + Point2D(-border.right, border.top)); + path_builder.line_to(left_top + Point2D(border.left, border.top)); + } + Left => { + path_builder.move_to(left_top); + path_builder.line_to(left_top + Point2D(border.left, border.top)); + path_builder.line_to(left_bottom + Point2D(border.left, -border.bottom)); + path_builder.line_to(left_bottom); + } + Right => { + path_builder.move_to(right_top); + path_builder.line_to(right_bottom); + path_builder.line_to(right_bottom + Point2D(-border.right, -border.bottom)); + path_builder.line_to(right_top + Point2D(-border.right, border.top)); + } + Bottom => { + path_builder.move_to(left_bottom); + path_builder.line_to(left_bottom + Point2D(border.left, -border.bottom)); + path_builder.line_to(right_bottom + Point2D(-border.right, -border.bottom)); + path_builder.line_to(right_bottom); + } + } + let path = path_builder.finish(); + self.draw_target.fill(&path, &ColorPattern(color), &draw_opts); + + } + + fn draw_dashed_border_segment(&self, + direction: Direction, + bounds: &Rect, + border: SideOffsets2D, + color: Color, dash_size: DashSize) { let rect = bounds.to_azure_rect(); let draw_opts = DrawOptions(1 as AzFloat, 0 as uint16_t); @@ -245,44 +301,93 @@ impl<'a> RenderContext<'a> { fn draw_solid_border_segment(&self, direction: Direction, bounds: &Rect, border: SideOffsets2D, color: Color) { let rect = bounds.to_azure_rect(); - let draw_opts = DrawOptions(1.0 , 0); - let path_builder = self.draw_target.create_path_builder(); - - let left_top = Point2D(rect.origin.x, rect.origin.y); - let right_top = Point2D(rect.origin.x + rect.size.width, rect.origin.y); - let left_bottom = Point2D(rect.origin.x, rect.origin.y + rect.size.height); - let right_bottom = Point2D(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height); - - match direction { - Top => { - path_builder.move_to(left_top); - path_builder.line_to(right_top); - path_builder.line_to(right_top + Point2D(-border.right, border.top)); - path_builder.line_to(left_top + Point2D(border.left, border.top)); - } - Left => { - path_builder.move_to(left_top); - path_builder.line_to(left_top + Point2D(border.left, border.top)); - path_builder.line_to(left_bottom + Point2D(border.left, -border.bottom)); - path_builder.line_to(left_bottom); - } - Right => { - path_builder.move_to(right_top); - path_builder.line_to(right_bottom); - path_builder.line_to(right_bottom + Point2D(-border.right, -border.bottom)); - path_builder.line_to(right_top + Point2D(-border.right, border.top)); - } - Bottom => { - path_builder.move_to(left_bottom); - path_builder.line_to(left_bottom + Point2D(border.left, -border.bottom)); - path_builder.line_to(right_bottom + Point2D(-border.right, -border.bottom)); - path_builder.line_to(right_bottom); - } - } - - let path = path_builder.finish(); - self.draw_target.fill(&path, &ColorPattern(color), &draw_opts); + self.draw_border_path(rect, direction, border, color); } + + fn get_scaled_bounds(&self, + bounds: &Rect, + border: SideOffsets2D, + shrink_factor: f32) -> Rect { + let rect = bounds.to_azure_rect(); + let scaled_border = SideOffsets2D::new(shrink_factor * border.top, + shrink_factor * border.right, + shrink_factor * border.bottom, + shrink_factor * border.left); + let left_top = Point2D(rect.origin.x, rect.origin.y); + let scaled_left_top = left_top + Point2D(scaled_border.left, + scaled_border.top); + return Rect(scaled_left_top, + Size2D(rect.size.width - 2.0 * scaled_border.right, rect.size.height - 2.0 * scaled_border.bottom)); + } + + fn scale_color(&self, color: Color, scale_factor: f32) -> Color { + return Color(color.r * scale_factor, color.g * scale_factor, color.b * scale_factor, color.a); + } + + fn draw_double_border_segment(&self, direction: Direction, bounds: &Rect, border: SideOffsets2D, color: Color) { + let scaled_border = SideOffsets2D::new((1.0/3.0) * border.top, + (1.0/3.0) * border.right, + (1.0/3.0) * border.bottom, + (1.0/3.0) * border.left); + let inner_scaled_bounds = self.get_scaled_bounds(bounds, border, 2.0/3.0); + // draw the outer portion of the double border. + self.draw_solid_border_segment(direction, bounds, scaled_border, color); + // draw the inner portion of the double border. + self.draw_border_path(inner_scaled_bounds, direction, scaled_border, color); + } + + fn draw_groove_ridge_border_segment(&self, + direction: Direction, + bounds: &Rect, + border: SideOffsets2D, + color: Color, + style: border_style::T) { + // original bounds as a Rect, with no scaling. + let original_bounds = self.get_scaled_bounds(bounds, border, 0.0); + // shrink the bounds by 1/2 of the border, leaving the innermost 1/2 of the border + let inner_scaled_bounds = self.get_scaled_bounds(bounds, border, 0.5); + let scaled_border = SideOffsets2D::new(0.5 * border.top, + 0.5 * border.right, + 0.5 * border.bottom, + 0.5 * border.left); + let is_groove = match style { + border_style::groove => true, + border_style::ridge => false, + _ => fail!("invalid border style") + }; + let darker_color = self.scale_color(color, if is_groove { 1.0/3.0 } else { 2.0/3.0 }); + let (outer_color, inner_color) = match (direction, is_groove) { + (Top, true) | (Left, true) | (Right, false) | (Bottom, false) => (darker_color, color), + (Top, false) | (Left, false) | (Right, true) | (Bottom, true) => (color, darker_color) + }; + // outer portion of the border + self.draw_border_path(original_bounds, direction, scaled_border, outer_color); + // inner portion of the border + self.draw_border_path(inner_scaled_bounds, direction, scaled_border, inner_color); + } + + fn draw_inset_outset_border_segment(&self, + direction: Direction, + bounds: &Rect, + border: SideOffsets2D, + style: border_style::T, + color: Color) { + let is_inset = match style { + border_style::inset => true, + border_style::outset => false, + _ => fail!("invalid border style") + }; + // original bounds as a Rect + let original_bounds = self.get_scaled_bounds(bounds, border, 0.0); + // select and scale the color appropriately. + let scaled_color = match direction { + Top => self.scale_color(color, if is_inset { 2.0/3.0 } else { 1.0 }), + Left => self.scale_color(color, if is_inset { 1.0/6.0 } else { 0.5 }), + Right | Bottom => self.scale_color(color, if is_inset { 1.0 } else { 2.0/3.0 }) + }; + self.draw_border_path(original_bounds, direction, border, scaled_color); + } + } trait ToAzureRect { diff --git a/src/components/style/properties.rs.mako b/src/components/style/properties.rs.mako index 08d4c3f3968..2f928bfa812 100644 --- a/src/components/style/properties.rs.mako +++ b/src/components/style/properties.rs.mako @@ -221,8 +221,7 @@ pub mod longhands { ${predefined_type("border-%s-color" % side, "CSSColor", "CurrentColor")} % endfor - // double groove ridge insed outset - ${single_keyword("border-top-style", values="none solid dotted dashed hidden")} + ${single_keyword("border-top-style", values="none solid double dotted dashed hidden groove ridge inset outset")} % for side in ["right", "bottom", "left"]: <%self:longhand name="border-${side}-style", no_super="True"> diff --git a/src/test/html/test_border.html b/src/test/html/test_border.html index 7015102d726..6e8d60f5d1a 100755 --- a/src/test/html/test_border.html +++ b/src/test/html/test_border.html @@ -16,6 +16,11 @@ border-width: 10px; border-color: yellow green red black; } +#double{ + border-style: double; + border-width: 10px; + border-color: yellow green red black; +} #dashed{ border-style: dashed; border-width: 10px; @@ -26,6 +31,27 @@ border-width: 10px; border-color: green red yellow black; } +#groove{ + border-style: groove; + border-width: 10px; + border-color: green red yellow black; +} +#ridge{ + border-style: ridge; + border-width: 10px; + border-color: green red yellow black; +} +#inset{ + border-style: inset; + border-width: 10px; + border-color: green red yellow black; +} +#outset{ + border-style: outset; + border-width: 10px; + border-color: green red yellow black; +} + #diamond1{ width: 0; height: 0; @@ -46,9 +72,13 @@
none test.
hidden test.
solid test
+
double test
dashed test
-
dotted test
+
groove test
+
ridge test
+
inset test
+
outset test
diff --git a/src/test/ref/basic.list b/src/test/ref/basic.list index ac56fbfabe6..5911e544cf9 100644 --- a/src/test/ref/basic.list +++ b/src/test/ref/basic.list @@ -16,6 +16,7 @@ == root_height_a.html root_height_b.html == png_rgba_colorspace_a.html png_rgba_colorspace_b.html == border_style_none_a.html border_style_none_b.html +== borders_a.html borders_b.html == acid1_a.html acid1_b.html # text_decoration_propagation_a.html text_decoration_propagation_b.html # inline_text_align_a.html inline_text_align_b.html diff --git a/src/test/ref/borders.png b/src/test/ref/borders.png new file mode 100644 index 00000000000..7d7ee68b35a Binary files /dev/null and b/src/test/ref/borders.png differ diff --git a/src/test/ref/borders_a.html b/src/test/ref/borders_a.html new file mode 100644 index 00000000000..42657346f47 --- /dev/null +++ b/src/test/ref/borders_a.html @@ -0,0 +1,81 @@ + + + + + + +
+
+
+
+
+
+
+
+
+
+ + diff --git a/src/test/ref/borders_b.html b/src/test/ref/borders_b.html new file mode 100644 index 00000000000..d7d6399ced6 --- /dev/null +++ b/src/test/ref/borders_b.html @@ -0,0 +1,19 @@ + + + + + + +