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.

Sign up for GitHub

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

flexbox: initial attempt to add support for RTL direction #1225

Merged
merged 6 commits into from
Oct 21, 2020
Merged

flexbox: initial attempt to add support for RTL direction #1225

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2511579
added rtl flexbox test
malnajdi Oct 3, 2020
1e35ab3
flexbox: initial attempt to support flex with rtl
malnajdi Oct 3, 2020
ecb97b1
Kozea/WeasyPrint#601: handle flex-direction column
malnajdi Oct 10, 2020
2a01aef
Kozea/WeasyPrint#601: add flex rtl tests row & col
malnajdi Oct 10, 2020
0c2e7b2
Kozea/WeasyPrint#601: remove TODO:handle RTL
malnajdi Oct 10, 2020
a81a82d
Kozea/WeasyPrint#601: fix indentation
malnajdi Oct 11, 2020
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
75 changes: 52 additions & 23 deletions weasyprint/layout/flex.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -650,33 +650,62 @@ def flex_layout(context, box, max_position_y, skip_stack, containing_block,
child.margin_bottom = free_space
free_space = 0

if justify_content == 'flex-end':
position_axis += free_space
elif justify_content == 'center':
position_axis += free_space / 2
elif justify_content == 'space-around':
position_axis += free_space / len(line) / 2
elif justify_content == 'space-evenly':
position_axis += free_space / (len(line) + 1)
if (box.style['direction'] == 'rtl' and
box.style['flex_direction'].startswith('row')):
if justify_content == 'flex-end':
position_axis -= free_space
elif justify_content == 'center':
position_axis -= free_space / 2
elif justify_content == 'space-around':
position_axis -= free_space / len(line) / 2
elif justify_content == 'space-evenly':
position_axis -= free_space / (len(line) - 1)

for i, child in line:
if axis == 'width':
child.position_x = position_axis
if justify_content == 'stretch':
child.width += free_space / len(line)
else:
child.position_y = position_axis
position_axis += (
child.margin_width() if axis == 'width'
else child.margin_height())
if justify_content == 'space-around':
position_axis += free_space / len(line)
elif justify_content == 'space-between':
if len(line) > 1:
position_axis += free_space / (len(line) - 1)
for i, child in line:
if axis == 'width':
child.position_x = position_axis
if justify_content == 'stretch':
child.width -= free_space / len(line)
else:
child.position_y = position_axis
position_axis -= (
child.margin_width() if axis == 'width'
else child.margin_height())
if justify_content == 'space-around':
position_axis -= free_space / len(line)
elif justify_content == 'space-between':
if len(line) > 1:
position_axis -= free_space / (len(line) + 1)
elif justify_content == 'space-evenly':
position_axis -= free_space / (len(line) - 1)
else:
if justify_content == 'flex-end':
position_axis += free_space
elif justify_content == 'center':
position_axis += free_space / 2
elif justify_content == 'space-around':
position_axis += free_space / len(line) / 2
elif justify_content == 'space-evenly':
position_axis += free_space / (len(line) + 1)

for i, child in line:
if axis == 'width':
child.position_x = position_axis
if justify_content == 'stretch':
child.width += free_space / len(line)
else:
child.position_y = position_axis
position_axis += (
child.margin_width() if axis == 'width'
else child.margin_height())
if justify_content == 'space-around':
position_axis += free_space / len(line)
elif justify_content == 'space-between':
if len(line) > 1:
position_axis += free_space / (len(line) - 1)
elif justify_content == 'space-evenly':
position_axis += free_space / (len(line) + 1)

# Step 13
position_cross = (
box.content_box_y() if cross == 'height'
Expand Down
107 changes: 107 additions & 0 deletions weasyprint/tests/test_layout/test_flex.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,33 @@ def test_flex_direction_row():
assert div_1.position_x < div_2.position_x < div_3.position_x


@assert_no_logs
malnajdi marked this conversation as resolved.
Show resolved Hide resolved
def test_flex_direction_row_rtl():
page, = render_pages('''
<article style="display: flex; direction: rtl">
<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 (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@liZe please verify if this test is correct.

div_1.position_x + div_1.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_row_reverse():
page, = render_pages('''
Expand Down Expand Up @@ -64,6 +91,32 @@ def test_flex_direction_row_reverse():
assert div_1.position_x < div_2.position_x < div_3.position_x


@assert_no_logs
def test_flex_direction_row_reverse_rtl():
page, = render_pages('''
<article style="display: flex; flex-direction: row-reverse;
direction: rtl">
<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 == article.position_x
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@liZe please verify if this test is correct.

assert div_1.position_x > div_2.position_x > div_3.position_x


@assert_no_logs
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding tests here with rtl + column is a good idea.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

def test_flex_direction_column():
page, = render_pages('''
Expand All @@ -89,6 +142,32 @@ def test_flex_direction_column():
assert div_1.position_y < div_2.position_y < div_3.position_y


@assert_no_logs
def test_flex_direction_column_rtl():
page, = render_pages('''
<article style="display: flex; flex-direction: column;
direction: rtl">
<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('''
Expand Down Expand Up @@ -116,6 +195,34 @@ def test_flex_direction_column_reverse():
assert div_1.position_y < div_2.position_y < div_3.position_y


@assert_no_logs
def test_flex_direction_column_reverse_rtl():
page, = render_pages('''
<article style="display: flex; flex-direction: column-reverse;
direction: rtl">
<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('''
Expand Down