Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support of line-clamp #1300

Merged
merged 18 commits into from
Mar 2, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 25 additions & 11 deletions docs/features.rst
Original file line number Diff line number Diff line change
Expand Up @@ -494,22 +494,36 @@ The ``image-orientation`` property is **not** supported.
.. _Image Values and Replaced Content Module Level 4: http://www.w3.org/TR/css4-images/


CSS Basic User Interface Module Level 3
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS Box Sizing Module Level 3
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The `CSS Box Sizing Module Level 3`_ is a candidate recommendation extending
"the CSS sizing properties with keywords that represent content-based
'intrinsic' sizes and context-based 'extrinsic' sizes."

The new property defined in this document is implemented in WeasyPrint:
``box-sizing``.

The ``min-content``, ``max-content`` and ``fit-content()`` sizing values are
**not** supported.

.. _CSS Box Sizing Module Level 3: https://www.w3.org/TR/css-sizing-3/

The `CSS Basic User Interface Module Level 3`_ also known as CSS3 UI is a
candidate recommendation describing "CSS properties which enable authors to
style user interface related properties and values."

Two new properties defined in this document are implemented in WeasyPrint:
the ``box-sizing`` and ``text-overflow`` properties.
CSS Overflow Module Level 3
~~~~~~~~~~~~~~~~~~~~~~~~~~~

The `CSS Overflow Module Level 3`_ is a working draft containing "the features
of CSS relating to scrollable overflow handling in visual media."

Some of the properties do not apply for WeasyPrint: ``cursor``, ``resize``,
``caret-color``, ``nav-(up|right|down|left)``.
The ``overflow`` property is supported, as defined in CSS2. ``overflow-x``,
``overflow-y``, ``overflow-clip-margin``, ``overflow-inline`` and
``overflow-block`` are **not** supported.

The ``outline-offset`` property is **not** implemented.
The ``text-overflow``, ``block-ellipsis``, ``line-clamp``, ``max-lines`` and
``continue`` properties are supported.

.. _CSS Basic User Interface Module Level 3: http://www.w3.org/TR/css-ui-3/
.. _CSS Overflow Module Level 3: https://www.w3.org/TR/2020/WD-css-overflow-3-20200603/


CSS Values and Units Module Level 3
Expand Down
153 changes: 153 additions & 0 deletions tests/test_draw/test_text.py
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

"""

import pytest

from . import assert_pixels


Expand Down Expand Up @@ -118,6 +120,157 @@ def test_text_align_rtl_trailing_whitespace():
''')


def test_max_lines_ellipsis():
assert_pixels('max_lines_ellipsis', 10, 10, '''
BBBBBBBB__
BBBBBBBB__
BBBBBBBBBB
BBBBBBBBBB
__________
__________
__________
__________
__________
__________
''', '''
<style>
@page {size: 10px 10px;}
@font-face {src: url(weasyprint.otf); font-family: weasyprint}
p {
block-ellipsis: auto;
color: blue;
font-family: weasyprint;
font-size: 2px;
max-lines: 2;
}
</style>
<p>
abcd efgh ijkl
</p>
''')


@pytest.mark.xfail
def test_max_lines_nested():
assert_pixels('max_lines_nested', 10, 12, '''
BBBBBBBBBB
BBBBBBBBBB
BBBBBBBBBB
BBBBBBBBBB
rrrrrrrrrr
rrrrrrrrrr
rrrrrrrrrr
rrrrrrrrrr
BBBBBBBBBB
BBBBBBBBBB
__________
__________
''', '''
<style>
@page {size: 10px 12px;}
@font-face {src: url(weasyprint.otf); font-family: weasyprint}
div {
continue: discard;
font-family: weasyprint;
font-size: 2px;
}
#a {
color: blue;
max-lines: 5;
}
#b {
color: red
max-lines: 2;
}
</style>
<div id=a>
aaaaa
aaaaa
<div id=b>
bbbbb
bbbbb
bbbbb
bbbbb
</div>
aaaaa
aaaaa
</div>
''')


def test_line_clamp():
assert_pixels('line_clamp', 10, 10, '''
BBBB__BB__
BBBB__BB__
BBBB__BB__
BBBB__BB__
BBBBBBBBBB
BBBBBBBBBB
__________
__________
__________
__________
''', '''
<style>
@page {size: 10px 10px;}
@font-face {src: url(weasyprint.otf); font-family: weasyprint}
p {
color: blue;
font-family: weasyprint;
font-size: 2px;
line-clamp: 3 "(…)";
}
</style>

<p>
aa a
bb b
cc c
dddd
eeee
ffff
gggg
hhhh
</p>
''')


@pytest.mark.xfail
def test_ellipsis_nested():
assert_pixels('ellipsis_nested', 10, 10, '''
BBBBBB____
BBBBBB____
BBBBBB____
BBBBBB____
BBBBBB____
BBBBBB____
BBBBBB____
BBBBBB____
BBBBBBBB__
BBBBBBBB__
''', '''
<style>
@page {size: 10px 10px;}
@font-face {src: url(weasyprint.otf); font-family: weasyprint}
div {
block-ellipsis: auto;
color: blue;
continue: discard;
font-family: weasyprint;
font-size: 2px;
}
</style>
<div>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
''')


def test_text_align_right():
assert_pixels('text_align_right', 9, 6, '''
_________
Expand Down
59 changes: 59 additions & 0 deletions tests/test_layout/test_block.py
Original file line number Diff line number Diff line change
Expand Up @@ -775,3 +775,62 @@ def test_box_margin_top_repagination():
div, h1 = body.children
assert div.margin_top == 0
assert div.padding_box_y() == 0


@assert_no_logs
def test_continue_discard():
page_1, = parse('''
<style>
@page { size: 80px; margin: 0 }
div { display: inline-block; width: 100%; height: 25px }
article { continue: discard; border: 1px solid; line-height: 1 }
</style>
<article>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</article>''')
html, = page_1.children
body, = html.children
article, = body.children
assert article.height == 3 * 25
div_1, div_2, div_3 = article.children
assert div_1.position_y == 1
assert div_2.position_y == 1 + 25
assert div_3.position_y == 1 + 25 * 2
assert article.border_bottom_width == 1


@assert_no_logs
def test_continue_discard_children():
page_1, = parse('''
<style>
@page { size: 80px; margin: 0 }
div { display: inline-block; width: 100%; height: 25px }
section { border: 1px solid }
article { continue: discard; border: 1px solid; line-height: 1 }
</style>
<article>
<section>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</section>
</article>''')
html, = page_1.children
body, = html.children
article, = body.children
assert article.height == 2 + 3 * 25
section, = article.children
assert section.height == 3 * 25
div_1, div_2, div_3 = section.children
assert div_1.position_y == 2
assert div_2.position_y == 2 + 25
assert div_3.position_y == 2 + 25 * 2
assert article.border_bottom_width == 1
56 changes: 56 additions & 0 deletions tests/test_text.py
Original file line number Diff line number Diff line change
Expand Up @@ -1050,3 +1050,59 @@ def test_text_floating_pre_line():
<div style="float: left; white-space: pre-line">This is
oh this end </div>
''')


@pytest.mark.xfail
@assert_no_logs
def test_max_lines():
page, = render_pages('''
<style>
@page {size: 10px 10px;}
@font-face {src: url(weasyprint.otf); font-family: weasyprint}
p {
font-family: weasyprint;
font-size: 2px;
max-lines: 2;
}
</style>
<p>
abcd efgh ijkl
</p>
''')
html, = page.children
body, = html.children
p1, p2 = body.children
line1, line2 = p1.children
line3, = p2.children
text1, = line1.children
text2, = line2.children
text3, = line3.children
assert text1.text == 'abcd'
assert text2.text == 'efgh'
assert text3.text == 'ijkl'


@assert_no_logs
def test_continue():
page, = render_pages('''
<style>
@page {size: 10px 4px;}
@font-face {src: url(weasyprint.otf); font-family: weasyprint}
div {
continue: discard;
font-family: weasyprint;
font-size: 2px;
}
</style>
<div>
abcd efgh ijkl
</div>
''')
html, = page.children
body, = html.children
p, = body.children
line1, line2 = p.children
text1, = line1.children
text2, = line2.children
assert text1.text == 'abcd'
assert text2.text == 'efgh'
4 changes: 4 additions & 0 deletions weasyprint/css/properties.py
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,9 @@
'text_decoration_style': 'solid',

# Overflow Module 3 (WD): https://www.w3.org/TR/css-overflow-3/
'block_ellipsis': 'none',
'continue': 'auto',
'max_lines': 'none',
'overflow': 'visible',
'text_overflow': 'clip',

Expand Down Expand Up @@ -218,6 +221,7 @@
# link: click events normally bubble up to link ancestors
# See http://lists.w3.org/Archives/Public/www-style/2012Jun/0315.html
INHERITED = {
'block_ellipsis',
'border_collapse',
'border_spacing',
'caption_side',
Expand Down
Loading