Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 05:30:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

auto merge of #2465 : bjwbell/servo/groove-ridge-borders, r=pcwalton

Browse source 
Matches Chrome's rendering behavior for groove and ridge borders (I can attach comparison images, if wanted).
This commit is contained in:
bors-servo 2014-05-22 14:11:05 -04:00
commit 4e1c025203
7 changed files with 293 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

205
src/components/gfx/render_context.rs
View file

@ -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,21 +175,70 @@ 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_border_path(&self,
bounds: Rect<f32>,
direction: Direction,
border: SideOffsets2D<f32>,
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<Au>,
@ -245,44 +301,93 @@ impl<'a> RenderContext<'a> {
fn draw_solid_border_segment(&self, direction: Direction, bounds: &Rect<Au>, border: SideOffsets2D<f32>, 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<Au>,
border: SideOffsets2D<f32>,
shrink_factor: f32) -> Rect<f32> {
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<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>,
border: SideOffsets2D<f32>,
color: Color,
style: border_style::T) {
// original bounds as a Rect<f32>, 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<Au>,
border: SideOffsets2D<f32>,
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<f32>
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 {

3
src/components/style/properties.rs.mako
View file

@ -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">

32
src/test/html/test_border.html
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;
@ -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 @@
<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>
<!-- It doesn't show anything yet. -->
<div id="dotted"> dotted test</div>
<div id="groove"> groove test</div>
<div id="ridge"> ridge test</div>
<div id="inset"> inset test</div>
<div id="outset"> outset test</div>
<!-- It's a Diamond -->
<div id="diamond1"></div>
<div id="diamond2"></div>

1
src/test/ref/basic.list
View file

@ -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

BIN
src/test/ref/borders.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

81
src/test/ref/borders_a.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<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;
}
#double{
border-style: double;
border-width: 10px;
border-color: yellow;
}
#solid{
border-style: solid;
border-width: 10px;
border-color: yellow;
}
#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;
}
#groove{
border-style: groove;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:1024px;
}
#ridge{
border-style: ridge;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:1024px;
}
#inset{
border-style: inset;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:1024px;
}
#outset{
border-style: outset;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:1024px;
}
</style>
</head>
<body>
<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>
<div id="ridge"></div>
<div id="inset"></div>
<div id="outset"></div>
</body>
</HTML>

19
src/test/ref/borders_b.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: white;
border: none;
}
body {
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body><img src="borders.png"></body>
</html>