mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
layout: Implement outline-offset
per CSS-UI-3 § 5.5.
This commit is contained in:
parent
a88e668091
commit
af7cf26e76
6 changed files with 62 additions and 4 deletions
|
@ -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();
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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"]:
|
||||
|
|
|
@ -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
|
||||
|
|
22
tests/ref/outline_offset_a.html
Normal file
22
tests/ref/outline_offset_a.html
Normal 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>
|
||||
|
24
tests/ref/outline_offset_ref.html
Normal file
24
tests/ref/outline_offset_ref.html
Normal 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>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue