aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/gfx/render_context.rs209
-rw-r--r--src/components/style/properties.rs.mako3
-rwxr-xr-xsrc/test/html/test_border.html32
-rw-r--r--src/test/ref/basic.list1
-rw-r--r--src/test/ref/borders.pngbin0 -> 3027 bytes
-rw-r--r--src/test/ref/borders_a.html81
-rw-r--r--src/test/ref/borders_b.html19
7 files changed, 290 insertions, 55 deletions
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<Au>,
- border: SideOffsets2D<f32>,
- color: 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>,
+ border: SideOffsets2D<f32>,
+ 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<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();
+ self.draw_border_path(rect, direction, border, color);
+ }
- 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);
+ 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));
+ }
- 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);
- }
- }
+ 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);
+ }
- let path = path_builder.finish();
- self.draw_target.fill(&path, &ColorPattern(color), &draw_opts);
+ 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 {
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 @@
<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>
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
--- /dev/null
+++ b/src/test/ref/borders.png
Binary files 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 @@
+<!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>
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 @@
+<!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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-05 05:55:06 +0000