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

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

Browse source 
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
This commit is contained in:
bors-servo 2013-09-10 09:43:50 -07:00
commit 2d556303ca
10 changed files with 138 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/gfx/display_list.rs
View file

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

1
src/components/gfx/gfx.rc
View file

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

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

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

27
src/components/main/layout/box.rs
View file

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

2
src/support/azure/rust-azure

@ -1 +1 @@
Subproject commit f564836fb59e3a37b7cd9c903bd6282b61a2fea4
Subproject commit 35d8fdac4ccb967a510db2feecb5bd3aa810a2a4

2
src/support/css/rust-css

@ -1 +1 @@
Subproject commit d6bec7942ab07857dd65569dacc1a704dc3514df
Subproject commit 33df32548180b55cc96a22d1ff84aafe8e38503b

4
src/test/html/test-border.css
View file

@ -1,4 +0,0 @@
img {
border-width: 10px;
border-color: blue
}

11
src/test/html/test-border.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test-border.css" />
</head>
<body>
<img src="test.jpeg"></img>
</body>
</html>

15
src/test/html/test_asymmetric_border_color.html
View file

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

41
src/test/html/test_border.html Executable file
View file

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