layout: Implement outline-offset per CSS-UI-3 § 5.5.

This commit is contained in:
Patrick Walton 2015-01-01 13:27:50 -05:00
parent a88e668091
commit af7cf26e76
6 changed files with 62 additions and 4 deletions

View file

@ -569,10 +569,11 @@ impl FragmentDisplayListBuilding for Fragment {
// Outlines are not accounted for in the dimensions of the border box, so adjust the
// absolute bounds.
let mut bounds = *bounds;
bounds.origin.x = bounds.origin.x - width;
bounds.origin.y = bounds.origin.y - width;
bounds.size.width = bounds.size.width + width + width;
bounds.size.height = bounds.size.height + width + width;
let offset = width + style.get_outline().outline_offset;
bounds.origin.x = bounds.origin.x - offset;
bounds.origin.y = bounds.origin.y - offset;
bounds.size.width = bounds.size.width + offset + offset;
bounds.size.height = bounds.size.height + offset + offset;
// Append the outline to the display list.
let color = style.resolve_color(style.get_outline().outline_color).to_gfx_color();

View file

@ -933,6 +933,14 @@ pub mod computed {
}
}
}
#[allow(non_snake_case)]
#[inline]
pub fn compute_Length(value: specified::Length, context: &Context) -> Au {
compute_Au(value, context)
}
pub type Length = Au;
}
pub fn parse_url(input: &str, base_url: &Url) -> Url {

View file

@ -381,6 +381,8 @@ pub mod longhands {
}
</%self:longhand>
${predefined_type("outline-offset", "Length", "Au(0)")}
${new_style_struct("PositionOffsets", is_inherited=False)}
% for side in ["top", "right", "bottom", "left"]:

View file

@ -225,3 +225,4 @@ fragment=top != ../html/acid2.html acid2_ref.html
== stacking_context_overflow_a.html stacking_context_overflow_ref.html
== stacking_context_overflow_relative_outline_a.html stacking_context_overflow_relative_outline_ref.html
== word_break_a.html word_break_ref.html
== outline_offset_a.html outline_offset_ref.html

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
}
section {
background: red;
outline: solid green 32px;
outline-offset: 32px;
width: 32px;
height: 32px;
margin: 64px;
}
</style>
</head>
<body>
<section></section>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
}
section {
border: solid green 32px;
width: 96px;
}
div {
width: 32px;
height: 32px;
border: solid white 32px;
background: red;
}
</style>
</head>
<body>
<section><div></div></section>
</body>
</html>