Double border support

This commit is contained in:
Bryan Bell 2014-05-21 16:30:15 -07:00
parent 432b8cdb3b
commit 13bfaeb97d
5 changed files with 31 additions and 2 deletions

View file

@ -159,6 +159,9 @@ impl<'a> RenderContext<'a> {
border_style::solid => {
self.draw_solid_border_segment(direction,bounds,border,color_select);
}
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);
}
@ -182,6 +185,9 @@ impl<'a> RenderContext<'a> {
border_style::solid => {
self.draw_solid_border_segment(Right,bounds,border,color);
}
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);
}
@ -329,6 +335,18 @@ impl<'a> RenderContext<'a> {
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<Au>, border: SideOffsets2D<f32>, 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<Au>,

View file

@ -221,8 +221,7 @@ pub mod longhands {
${predefined_type("border-%s-color" % side, "CSSColor", "CurrentColor")}
% endfor
// double
${single_keyword("border-top-style", values="none solid dotted dashed hidden groove ridge inset outset")}
${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">

View file

@ -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;
@ -67,6 +72,7 @@
<div id="none"> none test.</div>
<div id="hidden"> hidden test.</div>
<div id="solid"> solid test</div>
<div id="double"> double test</div>
<div id="dashed"> dashed test</div>
<div id="dotted"> dotted test</div>
<div id="groove"> groove test</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

View file

@ -12,6 +12,11 @@
border-width: 10px;
border-color: green red yellow black;
}
#double{
border-style: double;
border-width: 10px;
border-color: yellow;
}
#solid{
border-style: solid;
border-width: 10px;
@ -65,6 +70,7 @@
<div id="none"></div>
<div id="hidden"></div>
<div id="solid"></div>
<div id="double"></div>
<div id="dashed"></div>
<div id="dotted"></div>
<div id="groove"></div>