Merge pull request #1300 from Kozea/line-clamp

Add support of line-clamp

docs/features.rst

@@ -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

tests/test_draw/test_text.py

@@ -6,6 +6,8 @@
 
 """
 
+import pytest
+
 from . import assert_pixels
 
 
@@ -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, '''
         _________

tests/test_layout/test_block.py

@@ -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

tests/test_text.py

@@ -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'

weasyprint/css/properties.py

@@ -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',
 
@@ -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',