Skip to content

Commit

Permalink
Merge pull request #2343 from xavidotron/main
Browse files Browse the repository at this point in the history
Add support for outline-offset CSS property.
  • Loading branch information
liZe authored Jan 9, 2025
2 parents 5c95212 + 9193822 commit 61c044f
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 5 deletions.
2 changes: 1 addition & 1 deletion docs/api_reference.rst
Original file line number Diff line number Diff line change
Expand Up @@ -814,7 +814,7 @@ The `CSS Basic User Interface Module Level 3/4`_ "enables authors to style user
interface related properties and values."

The ``outline-width``, ``outline-style``, ``outline-color`` properties and the
``outline`` shorthand are supported. The ``outline-offset`` property is **not**
``outline`` shorthand are supported. The ``outline-offset`` property is also
supported.

The ``resize``, ``cursor``, ``caret-*`` and ``nav-*`` properties are **not**
Expand Down
61 changes: 61 additions & 0 deletions tests/draw/test_box.py
Original file line number Diff line number Diff line change
Expand Up @@ -657,3 +657,64 @@ def test_mask_border_fill(assert_pixels):
</style>
<div></div>
''')


@assert_no_logs
def test_outline_and_border(assert_pixels):
assert_pixels('''
__________
_BBBBBBBB_
_BRRRRRRB_
_BR____RB_
_BRRRRRRB_
_BBBBBBBB_
__________
''', '''
<style>
@page {
size: 10px 7px;
}
div {
border: 1px solid red;
outline: 1px solid blue;
height: 1px;
margin: 2px;
min-height: auto;
min-width: auto;
width: 4px;
}
</style>
<div></div>
''')


@assert_no_logs
def test_outline_offset(assert_pixels):
assert_pixels('''
____________
_BBBBBBBBBB_
_B________B_
_B_RRRRRR_B_
_B_R____R_B_
_B_RRRRRR_B_
_B________B_
_BBBBBBBBBB_
____________
''', '''
<style>
@page {
size: 12px 9px;
}
div {
border: 1px solid red;
outline: 1px solid blue;
outline-offset: 1px;
height: 1px;
margin: 3px;
min-height: auto;
min-width: auto;
width: 4px;
}
</style>
<div></div>
''')
5 changes: 3 additions & 2 deletions weasyprint/css/computed_values.py
Original file line number Diff line number Diff line change
Expand Up @@ -429,8 +429,9 @@ def border_image_repeat(style, name, values):


@register_computer('column-width')
def column_width(style, name, value):
"""Compute the ``column-width`` property."""
@register_computer('outline-offset')
def length_pixels_only(style, name, value):
"""Compute a pixel length property."""
return length(style, name, value, pixels_only=True)


Expand Down
1 change: 1 addition & 0 deletions weasyprint/css/properties.py
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@
'outline_color': 'currentcolor', # invert is not supported
'outline_style': 'none',
'outline_width': 3, # computed value for 'medium'
'outline_offset': 0,

# Sizing 3 (WD): https://www.w3.org/TR/css-sizing-3/
'box_sizing': 'content-box',
Expand Down
9 changes: 9 additions & 0 deletions weasyprint/css/validation/properties.py
Original file line number Diff line number Diff line change
Expand Up @@ -1009,6 +1009,15 @@ def spacing(token):
return length


@property()
@single_token
def outline_offset(token):
"""Validation for ``outline-offset``."""
length = get_length(token)
if length:
return length


@property()
@single_token
def line_height(token):
Expand Down
7 changes: 5 additions & 2 deletions weasyprint/draw/border.py
Original file line number Diff line number Diff line change
Expand Up @@ -616,12 +616,15 @@ def draw_line(stream, x1, y1, x2, y2, thickness, style, color, offset=0):

def draw_outline(stream, box):
width = box.style['outline_width']
offset = box.style['outline_offset']
color = get_color(box.style, 'outline_color')
style = box.style['outline_style']
if box.style['visibility'] == 'visible' and width and color.alpha:
outline_box = (
box.border_box_x() - width, box.border_box_y() - width,
box.border_width() + 2 * width, box.border_height() + 2 * width)
box.border_box_x() - width - offset,
box.border_box_y() - width - offset,
box.border_width() + 2 * width + 2 * offset,
box.border_height() + 2 * width + 2 * offset)
for side in SIDES:
with stacked(stream):
clip_border_segment(stream, style, width, side, outline_box)
Expand Down

0 comments on commit 61c044f

Please sign in to comment.