Add some tests for flex

Related to #601.
Kozea · Sep 20, 2018 · d1d9641 · d1d9641
1 parent 419d14e
commit d1d9641
Showing 1 changed file with 203 additions and 0 deletions.
diff --git a/weasyprint/tests/test_layout/test_flex.py b/weasyprint/tests/test_layout/test_flex.py
@@ -8,3 +8,206 @@
     :license: BSD, see LICENSE for details.
 
 """
+
+
+from ..test_boxes import render_pages
+from ..testing_utils import assert_no_logs
+
+
+@assert_no_logs
+def test_flex_direction_row():
+    page, = render_pages('''
+      <article style="display: flex">
+        <div>A</div>
+        <div>B</div>
+        <div>C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'A'
+    assert div_2.children[0].children[0].text == 'B'
+    assert div_3.children[0].children[0].text == 'C'
+    assert (
+        div_1.position_y ==
+        div_2.position_y ==
+        div_3.position_y ==
+        article.position_y)
+    assert div_1.position_x == article.position_x
+    assert div_1.position_x < div_2.position_x < div_3.position_x
+
+
+@assert_no_logs
+def test_flex_direction_row_reverse():
+    page, = render_pages('''
+      <article style="display: flex; flex-direction: row-reverse">
+        <div>A</div>
+        <div>B</div>
+        <div>C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'C'
+    assert div_2.children[0].children[0].text == 'B'
+    assert div_3.children[0].children[0].text == 'A'
+    assert (
+        div_1.position_y ==
+        div_2.position_y ==
+        div_3.position_y ==
+        article.position_y)
+    assert (
+        div_3.position_x + div_3.width ==
+        article.position_x + article.width)
+    assert div_1.position_x < div_2.position_x < div_3.position_x
+
+
+@assert_no_logs
+def test_flex_direction_column():
+    page, = render_pages('''
+      <article style="display: flex; flex-direction: column">
+        <div>A</div>
+        <div>B</div>
+        <div>C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'A'
+    assert div_2.children[0].children[0].text == 'B'
+    assert div_3.children[0].children[0].text == 'C'
+    assert (
+        div_1.position_x ==
+        div_2.position_x ==
+        div_3.position_x ==
+        article.position_x)
+    assert div_1.position_y == article.position_y
+    assert div_1.position_y < div_2.position_y < div_3.position_y
+
+
+@assert_no_logs
+def test_flex_direction_column_reverse():
+    page, = render_pages('''
+      <article style="display: flex; flex-direction: column-reverse">
+        <div>A</div>
+        <div>B</div>
+        <div>C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'C'
+    assert div_2.children[0].children[0].text == 'B'
+    assert div_3.children[0].children[0].text == 'A'
+    assert (
+        div_1.position_x ==
+        div_2.position_x ==
+        div_3.position_x ==
+        article.position_x)
+    assert (
+        div_3.position_y + div_3.height ==
+        article.position_y + article.height)
+    assert div_1.position_y < div_2.position_y < div_3.position_y
+
+
+@assert_no_logs
+def test_flex_row_wrap():
+    page, = render_pages('''
+      <article style="display: flex; flex-flow: wrap; width: 50px">
+        <div style="width: 20px">A</div>
+        <div style="width: 20px">B</div>
+        <div style="width: 20px">C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'A'
+    assert div_2.children[0].children[0].text == 'B'
+    assert div_3.children[0].children[0].text == 'C'
+    assert div_1.position_y == div_2.position_y == article.position_y
+    assert div_3.position_y == article.position_y + div_2.height
+    assert div_1.position_x == div_3.position_x == article.position_x
+    assert div_1.position_x < div_2.position_x
+
+
+@assert_no_logs
+def test_flex_column_wrap():
+    page, = render_pages('''
+      <article style="display: flex; flex-flow: column wrap; height: 50px">
+        <div style="height: 20px">A</div>
+        <div style="height: 20px">B</div>
+        <div style="height: 20px">C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'A'
+    assert div_2.children[0].children[0].text == 'B'
+    assert div_3.children[0].children[0].text == 'C'
+    assert div_1.position_x == div_2.position_x == article.position_x
+    assert div_3.position_x == article.position_x + div_2.width
+    assert div_1.position_y == div_3.position_y == article.position_y
+    assert div_1.position_y < div_2.position_y
+
+
+@assert_no_logs
+def test_flex_row_wrap_reverse():
+    page, = render_pages('''
+      <article style="display: flex; flex-flow: wrap-reverse; width: 50px">
+        <div style="width: 20px">A</div>
+        <div style="width: 20px">B</div>
+        <div style="width: 20px">C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'C'
+    assert div_2.children[0].children[0].text == 'A'
+    assert div_3.children[0].children[0].text == 'B'
+    assert div_1.position_y == article.position_y
+    assert (
+        div_2.position_y ==
+        div_3.position_y ==
+        article.position_y + div_2.height)
+    assert div_1.position_x == div_2.position_x == article.position_x
+    assert div_2.position_x < div_3.position_x
+
+
+@assert_no_logs
+def test_flex_column_wrap_reverse():
+    page, = render_pages('''
+      <article style="display: flex; flex-flow: column wrap-reverse;
+                      height: 50px">
+        <div style="height: 20px">A</div>
+        <div style="height: 20px">B</div>
+        <div style="height: 20px">C</div>
+      </article>
+    ''')
+    html, = page.children
+    body, = html.children
+    article, = body.children
+    div_1, div_2, div_3 = article.children
+    assert div_1.children[0].children[0].text == 'C'
+    assert div_2.children[0].children[0].text == 'A'
+    assert div_3.children[0].children[0].text == 'B'
+    assert div_1.position_x == article.position_x
+    assert (
+        div_2.position_x ==
+        div_3.position_x ==
+        article.position_x + div_2.width)
+    assert div_1.position_y == div_2.position_y == article.position_y
+    assert div_2.position_y < div_3.position_y