mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Add basic borders
This commit is contained in:
parent
928eec48b4
commit
7aa07816d4
11 changed files with 114 additions and 9 deletions
|
@ -1 +1 @@
|
||||||
Subproject commit 06d659d6a875c6e48e78cf3e3082e11cf7bbb169
|
Subproject commit 6ca8a28d2575379ad6e47ae72aa4c879743f3cf7
|
|
@ -165,6 +165,8 @@ impl TokenReader : ParserMethods {
|
||||||
~"font-size" => parse_font_size(val).extract(|res| FontSize(res)),
|
~"font-size" => parse_font_size(val).extract(|res| FontSize(res)),
|
||||||
~"height" => parse_box_sizing(val).extract(|res| Height(res)),
|
~"height" => parse_box_sizing(val).extract(|res| Height(res)),
|
||||||
~"width" => parse_box_sizing(val).extract(|res| Width(res)),
|
~"width" => parse_box_sizing(val).extract(|res| Width(res)),
|
||||||
|
~"border-width" => parse_length(val).map(|res| BorderWidth(Specified(*res))),
|
||||||
|
~"border-color" => parse_color(val).map(|res| BorderColor(Specified(BdrColor(*res)))),
|
||||||
_ => { #debug["Recieved unknown style property '%s'", val]; None }
|
_ => { #debug["Recieved unknown style property '%s'", val]; None }
|
||||||
};
|
};
|
||||||
match desc {
|
match desc {
|
||||||
|
|
|
@ -64,7 +64,7 @@ fn parse_box_sizing(str : &str) -> ParseResult<BoxSizing> {
|
||||||
match str.to_str() {
|
match str.to_str() {
|
||||||
~"auto" => Value(BoxAuto),
|
~"auto" => Value(BoxAuto),
|
||||||
~"inherit" => CSSInherit,
|
~"inherit" => CSSInherit,
|
||||||
_ => Fail,
|
_ => Fail
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -181,7 +181,9 @@ impl Node : PrivStyleMethods {
|
||||||
FontSize(size) => layout.style.font_size = size,
|
FontSize(size) => layout.style.font_size = size,
|
||||||
Height(size) => layout.style.height = size,
|
Height(size) => layout.style.height = size,
|
||||||
Color(col) => layout.style.text_color = col,
|
Color(col) => layout.style.text_color = col,
|
||||||
Width(size) => layout.style.width = size
|
Width(size) => layout.style.width = size,
|
||||||
|
BorderColor(col) => layout.style.border_color = col,
|
||||||
|
BorderWidth(size) => layout.style.border_width = size,
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,10 @@ type SpecifiedStyle = {mut background_color : CSSValue<CSSBackgroundColor>,
|
||||||
mut font_size : CSSValue<CSSFontSize>,
|
mut font_size : CSSValue<CSSFontSize>,
|
||||||
mut height : CSSValue<BoxSizing>,
|
mut height : CSSValue<BoxSizing>,
|
||||||
mut text_color : CSSValue<CSSColor>,
|
mut text_color : CSSValue<CSSColor>,
|
||||||
mut width : CSSValue<BoxSizing>
|
mut width : CSSValue<BoxSizing>,
|
||||||
|
mut border_color : CSSValue<CSSBorderColor>,
|
||||||
|
mut border_style : CSSValue<CSSBorderStyle>,
|
||||||
|
mut border_width : CSSValue<Length>
|
||||||
};
|
};
|
||||||
|
|
||||||
trait DefaultStyleMethods {
|
trait DefaultStyleMethods {
|
||||||
|
@ -83,7 +86,10 @@ fn empty_style_for_node_kind(kind: &NodeKind) -> SpecifiedStyle {
|
||||||
mut font_size : Initial,
|
mut font_size : Initial,
|
||||||
mut height : Initial,
|
mut height : Initial,
|
||||||
mut text_color : Initial,
|
mut text_color : Initial,
|
||||||
mut width : Initial}
|
mut width : Initial,
|
||||||
|
mut border_color : Initial,
|
||||||
|
mut border_style : Initial,
|
||||||
|
mut border_width : Initial}
|
||||||
}
|
}
|
||||||
|
|
||||||
trait StyleMethods {
|
trait StyleMethods {
|
||||||
|
|
|
@ -117,6 +117,24 @@ enum CSSBackgroundImage {
|
||||||
BgImageNone,
|
BgImageNone,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
enum CSSBorderColor {
|
||||||
|
BdrColor(SharedColor),
|
||||||
|
BdrColorTransparent
|
||||||
|
}
|
||||||
|
|
||||||
|
enum CSSBorderStyle {
|
||||||
|
BdrStyleNone,
|
||||||
|
BdrStyleHidden,
|
||||||
|
BdrStyleDotted,
|
||||||
|
BdrStyleDashed,
|
||||||
|
BdrStyleSolid,
|
||||||
|
BdrStyleDouble,
|
||||||
|
BdrStyleGroove,
|
||||||
|
BdrStyleRidge,
|
||||||
|
BdrStyleInset,
|
||||||
|
BdrStyleOutset,
|
||||||
|
}
|
||||||
|
|
||||||
enum CSSColor {
|
enum CSSColor {
|
||||||
TextColor(SharedColor)
|
TextColor(SharedColor)
|
||||||
}
|
}
|
||||||
|
@ -165,7 +183,9 @@ enum StyleDeclaration {
|
||||||
FontSize(CSSValue<CSSFontSize>),
|
FontSize(CSSValue<CSSFontSize>),
|
||||||
Height(CSSValue<BoxSizing>),
|
Height(CSSValue<BoxSizing>),
|
||||||
Color(CSSValue<CSSColor>),
|
Color(CSSValue<CSSColor>),
|
||||||
Width(CSSValue<BoxSizing>)
|
Width(CSSValue<BoxSizing>),
|
||||||
|
BorderColor(CSSValue<CSSBorderColor>),
|
||||||
|
BorderWidth(CSSValue<Length>)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub enum Attr {
|
pub enum Attr {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
use azure::azure_hl::DrawTarget;
|
use azure::azure_hl::DrawTarget;
|
||||||
use gfx::render_task::{draw_solid_color, draw_image, draw_text};
|
use gfx::render_task::{draw_solid_color, draw_image, draw_text, draw_border};
|
||||||
use gfx::geometry::*;
|
use gfx::geometry::*;
|
||||||
use geom::rect::Rect;
|
use geom::rect::Rect;
|
||||||
use image::base::Image;
|
use image::base::Image;
|
||||||
|
@ -27,6 +27,7 @@ pub enum DisplayItemData {
|
||||||
// TODO: don't copy text runs, ever.
|
// TODO: don't copy text runs, ever.
|
||||||
TextData(~SendableTextRun, uint, uint),
|
TextData(~SendableTextRun, uint, uint),
|
||||||
ImageData(ARC<~image::base::Image>),
|
ImageData(ARC<~image::base::Image>),
|
||||||
|
BorderData(au, u8, u8, u8)
|
||||||
}
|
}
|
||||||
|
|
||||||
fn draw_SolidColor(self: &DisplayItem, ctx: &RenderContext) {
|
fn draw_SolidColor(self: &DisplayItem, ctx: &RenderContext) {
|
||||||
|
@ -53,6 +54,13 @@ fn draw_Image(self: &DisplayItem, ctx: &RenderContext) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fn draw_Border(self: &DisplayItem, ctx: &RenderContext) {
|
||||||
|
match self.data {
|
||||||
|
BorderData(width, r, g, b) => draw_border(ctx, &self.bounds, width, r, g, b),
|
||||||
|
_ => fail
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
pub fn SolidColor(bounds: Rect<au>, r: u8, g: u8, b: u8) -> DisplayItem {
|
pub fn SolidColor(bounds: Rect<au>, r: u8, g: u8, b: u8) -> DisplayItem {
|
||||||
DisplayItem {
|
DisplayItem {
|
||||||
draw: |self, ctx| draw_SolidColor(self, ctx),
|
draw: |self, ctx| draw_SolidColor(self, ctx),
|
||||||
|
@ -61,6 +69,14 @@ pub fn SolidColor(bounds: Rect<au>, r: u8, g: u8, b: u8) -> DisplayItem {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn Border(bounds: Rect<au>, width: au, r: u8, g: u8, b: u8) -> DisplayItem {
|
||||||
|
DisplayItem {
|
||||||
|
draw: |self, ctx| draw_Border(self, ctx),
|
||||||
|
bounds: bounds,
|
||||||
|
data: BorderData(width, r, g, b)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
pub fn Text(bounds: Rect<au>, run: ~SendableTextRun, offset: uint, length: uint) -> DisplayItem {
|
pub fn Text(bounds: Rect<au>, run: ~SendableTextRun, offset: uint, length: uint) -> DisplayItem {
|
||||||
DisplayItem {
|
DisplayItem {
|
||||||
draw: |self, ctx| draw_Text(self, ctx),
|
draw: |self, ctx| draw_Text(self, ctx),
|
||||||
|
|
|
@ -6,7 +6,7 @@ use azure::bindgen::AzDrawTargetFillGlyphs;
|
||||||
use azure::cairo::{cairo_font_face_t, cairo_scaled_font_t};
|
use azure::cairo::{cairo_font_face_t, cairo_scaled_font_t};
|
||||||
use azure::cairo_hl::ImageSurface;
|
use azure::cairo_hl::ImageSurface;
|
||||||
use azure::{AzDrawOptions, AzFloat, AzGlyph, AzGlyphBuffer};
|
use azure::{AzDrawOptions, AzFloat, AzGlyph, AzGlyphBuffer};
|
||||||
use azure_hl::{AsAzureRect, B8G8R8A8, Color, ColorPattern, DrawOptions, DrawSurfaceOptions};
|
use azure_hl::{AsAzureRect, B8G8R8A8, Color, ColorPattern, DrawOptions, DrawSurfaceOptions, StrokeOptions};
|
||||||
use azure_hl::{DrawTarget, Linear};
|
use azure_hl::{DrawTarget, Linear};
|
||||||
use comm::*;
|
use comm::*;
|
||||||
use compositor::Compositor;
|
use compositor::Compositor;
|
||||||
|
@ -19,6 +19,7 @@ use mod gfx::render_layers;
|
||||||
use gfx::render_layers::RenderLayer;
|
use gfx::render_layers::RenderLayer;
|
||||||
use image::base::Image;
|
use image::base::Image;
|
||||||
use libc::size_t;
|
use libc::size_t;
|
||||||
|
use libc::types::common::c99::uint16_t;
|
||||||
use pipes::{Port, Chan};
|
use pipes::{Port, Chan};
|
||||||
use platform::osmain;
|
use platform::osmain;
|
||||||
use ptr::to_unsafe_ptr;
|
use ptr::to_unsafe_ptr;
|
||||||
|
@ -141,6 +142,20 @@ pub fn draw_solid_color(ctx: &RenderContext, bounds: &Rect<au>, r: u8, g: u8, b:
|
||||||
ctx.canvas.draw_target.fill_rect(&bounds.to_azure_rect(), &ColorPattern(color));
|
ctx.canvas.draw_target.fill_rect(&bounds.to_azure_rect(), &ColorPattern(color));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
pub fn draw_border(ctx: &RenderContext, bounds: &Rect<au>, width: au, r: u8, g: u8, b: u8) {
|
||||||
|
let rect = bounds.to_azure_rect();
|
||||||
|
let color = Color(r.to_float() as AzFloat,
|
||||||
|
g.to_float() as AzFloat,
|
||||||
|
b.to_float() as AzFloat,
|
||||||
|
1f as AzFloat);
|
||||||
|
let pattern = ColorPattern(color);
|
||||||
|
let stroke_fields = 2; // CAP_SQUARE
|
||||||
|
let stroke_opts = StrokeOptions(au::to_px(width) as AzFloat, 10 as AzFloat, stroke_fields);
|
||||||
|
let draw_opts = DrawOptions(1 as AzFloat, 0 as uint16_t);
|
||||||
|
|
||||||
|
ctx.canvas.draw_target.stroke_rect(&rect, &pattern, &stroke_opts, &draw_opts);
|
||||||
|
}
|
||||||
|
|
||||||
pub fn draw_image(ctx: &RenderContext, bounds: Rect<au>, image: ARC<~Image>) {
|
pub fn draw_image(ctx: &RenderContext, bounds: Rect<au>, image: ARC<~Image>) {
|
||||||
let image = std::arc::get(&image);
|
let image = std::arc::get(&image);
|
||||||
let size = Size2D(image.width as i32, image.height as i32);
|
let size = Size2D(image.width as i32, image.height as i32);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
/* Fundamental layout structures and algorithms. */
|
/* Fundamental layout structures and algorithms. */
|
||||||
|
|
||||||
|
use servo_util::color::rgb;
|
||||||
use arc = std::arc;
|
use arc = std::arc;
|
||||||
use arc::ARC;
|
use arc::ARC;
|
||||||
use au = gfx::geometry;
|
use au = gfx::geometry;
|
||||||
|
@ -8,7 +9,7 @@ use core::dvec::DVec;
|
||||||
use core::to_str::ToStr;
|
use core::to_str::ToStr;
|
||||||
use core::rand;
|
use core::rand;
|
||||||
use css::styles::SpecifiedStyle;
|
use css::styles::SpecifiedStyle;
|
||||||
use css::values::{BoxSizing, Length, Px, CSSDisplay, Specified, BgColor, BgColorTransparent};
|
use css::values::{BoxSizing, Length, Px, CSSDisplay, Specified, BgColor, BgColorTransparent, BdrColor};
|
||||||
use dl = gfx::display_list;
|
use dl = gfx::display_list;
|
||||||
use dom::element::{ElementKind, HTMLDivElement, HTMLImageElement};
|
use dom::element::{ElementKind, HTMLDivElement, HTMLImageElement};
|
||||||
use dom::node::{Element, Node, NodeData, NodeKind, NodeTree};
|
use dom::node::{Element, Node, NodeData, NodeKind, NodeTree};
|
||||||
|
@ -410,6 +411,8 @@ impl RenderBox : RenderBoxMethods {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
self.add_border_to_list(list, bounds);
|
||||||
}
|
}
|
||||||
|
|
||||||
fn add_bgcolor_to_list(list: &dl::DisplayList, bounds: Rect<au>) {
|
fn add_bgcolor_to_list(list: &dl::DisplayList, bounds: Rect<au>) {
|
||||||
|
@ -424,6 +427,32 @@ impl RenderBox : RenderBoxMethods {
|
||||||
list.push(~dl::SolidColor(bounds, bgcolor.red, bgcolor.green, bgcolor.blue));
|
list.push(~dl::SolidColor(bounds, bgcolor.red, bgcolor.green, bgcolor.blue));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fn add_border_to_list(list: &dl::DisplayList, bounds: Rect<au>) {
|
||||||
|
let style = self.d().node.style();
|
||||||
|
match style.border_width {
|
||||||
|
Specified(Px(px)) => {
|
||||||
|
// If there's a border, let's try to display *something*
|
||||||
|
let border_width = au::from_frac_px(px);
|
||||||
|
let bounds = Rect {
|
||||||
|
origin: Point2D {
|
||||||
|
x: bounds.origin.x - border_width / au(2),
|
||||||
|
y: bounds.origin.y - border_width / au(2),
|
||||||
|
},
|
||||||
|
size: Size2D {
|
||||||
|
width: bounds.size.width + border_width,
|
||||||
|
height: bounds.size.height + border_width
|
||||||
|
}
|
||||||
|
};
|
||||||
|
let color = match style.border_color {
|
||||||
|
Specified(BdrColor(color)) => color,
|
||||||
|
_ => rgb(0, 0, 0) // FIXME
|
||||||
|
};
|
||||||
|
list.push(~dl::Border(bounds, border_width, color.red, color.green, color.blue));
|
||||||
|
}
|
||||||
|
_ => () // TODO
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
impl RenderBox : BoxedDebugMethods {
|
impl RenderBox : BoxedDebugMethods {
|
||||||
|
|
4
src/test/test-border.css
Normal file
4
src/test/test-border.css
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
img {
|
||||||
|
border-width: 10px;
|
||||||
|
border-color: blue
|
||||||
|
}
|
11
src/test/test-border.html
Normal file
11
src/test/test-border.html
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="test-border.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="test.jpeg"></img>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue