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

Support CSS Grid layout #2121

Merged
merged 71 commits into from
Apr 30, 2024
Merged
Changes from 1 commit
Commits
Show all changes
71 commits
Select commit Hold shift + click to select a range
645772d
Add grid properties and move shared properties
grewn0uille Mar 8, 2024
93cde86
Update default values for column-gap and justify-content
grewn0uille Mar 8, 2024
09f8deb
Support normal value for align-items, align-content and align-self
grewn0uille Mar 8, 2024
e7fda1f
WIP: partial validation of grid-auto-* properties
grewn0uille Mar 8, 2024
47d7341
Finish grid-auto-columns / grid-auto-rows validation, add grid-auto-f…
liZe Mar 25, 2024
9b51762
Add grid-template-columns and grid-template-rows validation and tests
grewn0uille Mar 25, 2024
45dd7e0
Add grid-template-areas validation and tests
grewn0uille Mar 25, 2024
5183e89
Fix returned structure for grid-template-columns and grid-template-rows
grewn0uille Mar 26, 2024
6fca0f0
Compute grid values
grewn0uille Mar 26, 2024
8b8caf5
Create explicit grid
grewn0uille Mar 26, 2024
acebb06
Validate grid-[row|column]-[start—end]
liZe Mar 26, 2024
43dc230
Remove useless whitespaces
liZe Mar 26, 2024
4da84ff
Validate grid-[column|row] shorthand
liZe Apr 28, 2024
d550a83
Validate grid-area shorthand
liZe Mar 27, 2024
2a63ff5
Place grid items that are not auto-positioned
grewn0uille Mar 29, 2024
e6a1272
Handle conflicts in grid values
grewn0uille Mar 29, 2024
bb5a9b7
Allow "dense" value for grid-auto-flow
liZe Mar 31, 2024
8928304
Add last steps of grid item placement algorithm
liZe Mar 31, 2024
191044d
Add false preferred widths for grid containers
liZe Apr 2, 2024
49c3826
Add last steps of grid layout
liZe Apr 2, 2024
43ff05e
Clean grid layout code
liZe Apr 2, 2024
49fdec1
Add functions to detect lengths and flexible sizing
liZe Apr 2, 2024
9d07d14
De-duplicate line parsing
liZe Apr 2, 2024
582ffa0
Handle simple cases of repeat()
liZe Apr 3, 2024
78e3f48
Handle simple cases of grid-template
liZe Apr 3, 2024
ec19627
Fix grid-template-areas validation
liZe Apr 3, 2024
3e11840
Use a real boxes instead of (width, height) as grid item renderer
liZe Apr 3, 2024
4a1efef
Make grid items with z-index create stacking contexts
liZe Apr 3, 2024
8a4e98b
Fix _get_placement() calls
liZe Apr 3, 2024
fb87505
Fix crash when no column is occupied
liZe Apr 3, 2024
7ebf63a
Include column-placed elements in remaining grid items
liZe Apr 3, 2024
ac37ee9
Add baseline to inline grid containers
liZe Apr 3, 2024
dbc0502
Simplify algorithm to calculate implicit columns
liZe Apr 3, 2024
74af20e
Fix span assert
liZe Apr 4, 2024
af49441
Don’t support grid shorthand for now
liZe Apr 4, 2024
c2b6442
Fix computed value for minmax() function
liZe Apr 4, 2024
ae067a1
Fix is_grid_item value for inline-level grid items
liZe Apr 4, 2024
c548ca0
Ignore subgrids
liZe Apr 4, 2024
50a7a46
Improve comments
liZe Apr 4, 2024
d03317a
Avoid many crashes with W3C testing suite
liZe Apr 4, 2024
fbda837
Allow grid containers as root boxes
liZe Apr 5, 2024
bb9cd48
Only replace base size for percentage calculation
liZe Apr 5, 2024
2c38c49
Fix wrong variable name
liZe Apr 5, 2024
d6fa72b
Fix flexible size calculation
liZe Apr 5, 2024
5e6950e
Add some tests for grid
liZe Apr 5, 2024
7c66168
Fix coding style
liZe Apr 5, 2024
56d88d1
Add and test grid shorthand
liZe Apr 5, 2024
a388e0d
Add gap expander
liZe Apr 5, 2024
d78b462
Fix grid shorthand
liZe Apr 5, 2024
78a2c9d
Add and test new values of CSS alignment
liZe Apr 5, 2024
9eaeafe
Set baseline for inline grid containers
liZe Apr 6, 2024
d80dcc9
Add and clean TODOs
liZe Apr 6, 2024
5c1d393
Support grid alignment
liZe Apr 8, 2024
68eac8a
Don’t ignore margins, borders, padding for grid items
liZe Apr 8, 2024
e4bda5a
Fix minor problems with *-gap properties
liZe Apr 8, 2024
c09c823
Display gutters
liZe Apr 8, 2024
d06fa21
Add missing space
liZe Apr 8, 2024
f9369c3
Add naive fragmentation
liZe Apr 8, 2024
748aee1
Add TODOs for fragmentation in grid rows and items
liZe Apr 9, 2024
a91a6d2
Add TODO message
liZe Apr 9, 2024
44bffdd
Handle legacy grid properties
liZe Apr 15, 2024
4fea1ff
Really expand stretched children
liZe Apr 18, 2024
157bfc7
Handle undefined free space
liZe Apr 18, 2024
b70a770
Really increment the cursor when placing unplaced elements
liZe Apr 24, 2024
2ba55b9
Add documentation for grid
liZe Apr 28, 2024
6bab2d4
Add warnings for missing grid features
liZe Apr 28, 2024
8be64a7
Keep child tags when wrapping grid items
liZe Apr 28, 2024
0ba51ed
Copy style of blockified grid items
liZe Apr 28, 2024
d116b19
Add more tests for grid
liZe Apr 28, 2024
7fa7c49
Fix and test padding, border and margin for grid items
liZe Apr 29, 2024
061dbcf
Simplify width and height management for grid items
liZe Apr 29, 2024
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
Prev Previous commit
Next Next commit
Fix and test padding, border and margin for grid items
  • Loading branch information
liZe committed Apr 29, 2024
commit 7fa7c49a483f9a31740f791c1b8c7fd7f665da6e
129 changes: 129 additions & 0 deletions tests/layout/test_grid.py
Original file line number Diff line number Diff line change
@@ -671,3 +671,132 @@ def test_grid_undefined_free_space():
assert div_r11.height == div_r12.height == div_r21.height == div_r22.height == 4
assert div_r11.width == div_r12.width == div_r21.width == div_r22.width == 4
assert div_c.width == 8


@assert_no_logs
def test_grid_padding():
page, = render_pages('''
<style>
@font-face { src: url(weasyprint.otf); font-family: weasyprint }
article {
display: grid;
font-family: weasyprint;
font-size: 2px;
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr;
line-height: 1;
width: 14px;
}
</style>
<article>
<div style="padding: 1px">a</div> <div>b</div>
<div>c</div> <div style="padding: 2px">d</div>
</article>
''')
html, = page.children
body, = html.children
article, = body.children
div_a, div_b, div_c, div_d = article.children
assert div_a.position_x == div_c.position_x == div_c.content_box_x() == 0
assert div_a.content_box_x() == 1
assert div_b.position_x == div_b.content_box_x() == div_d.position_x == 4
assert div_d.content_box_x() == 6
assert div_a.width == 2
assert div_b.width == 10
assert div_c.width == 4
assert div_d.width == 6
assert article.width == 14
assert div_a.position_y == div_b.position_y == div_b.content_box_y() == 0
assert div_a.content_box_y() == 1
assert div_c.position_y == div_c.content_box_y() == div_d.position_y == 4
assert div_d.content_box_y() == 6
assert div_a.height == div_d.height == 2
assert div_b.height == 4
assert div_c.height == 6
assert article.height == 10


@assert_no_logs
def test_grid_border():
page, = render_pages('''
<style>
@font-face { src: url(weasyprint.otf); font-family: weasyprint }
article {
display: grid;
font-family: weasyprint;
font-size: 2px;
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr;
line-height: 1;
width: 14px;
}
</style>
<article>
<div style="border: 1px solid">a</div> <div>b</div>
<div>c</div> <div style="border: 2px solid">d</div>
</article>
''')
html, = page.children
body, = html.children
article, = body.children
div_a, div_b, div_c, div_d = article.children
assert div_a.position_x == div_c.position_x == div_c.padding_box_x() == 0
assert div_a.padding_box_x() == 1
assert div_b.position_x == div_b.padding_box_x() == div_d.position_x == 4
assert div_d.padding_box_x() == 6
assert div_a.width == 2
assert div_b.width == 10
assert div_c.width == 4
assert div_d.width == 6
assert article.width == 14
assert div_a.position_y == div_b.position_y == div_b.padding_box_y() == 0
assert div_a.padding_box_y() == 1
assert div_c.position_y == div_c.padding_box_y() == div_d.position_y == 4
assert div_d.padding_box_y() == 6
assert div_a.height == div_d.height == 2
assert div_b.height == 4
assert div_c.height == 6
assert article.height == 10


@assert_no_logs
def test_grid_margin():
page, = render_pages('''
<style>
@font-face { src: url(weasyprint.otf); font-family: weasyprint }
article {
display: grid;
font-family: weasyprint;
font-size: 2px;
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr;
line-height: 1;
width: 14px;
}
</style>
<article>
<div style="margin: 1px">a</div> <div>b</div>
<div>c</div> <div style="margin: 2px">d</div>
</article>
''')
html, = page.children
body, = html.children
article, = body.children
div_a, div_b, div_c, div_d = article.children
assert div_a.position_x == div_c.position_x == div_c.border_box_x() == 0
assert div_a.border_box_x() == 1
assert div_b.position_x == div_b.border_box_x() == div_d.position_x == 4
assert div_d.border_box_x() == 6
assert div_a.width == 2
assert div_b.width == 10
assert div_c.width == 4
assert div_d.width == 6
assert article.width == 14
assert div_a.position_y == div_b.position_y == div_b.border_box_y() == 0
assert div_a.border_box_y() == 1
assert div_c.position_y == div_c.border_box_y() == div_d.position_y == 4
assert div_d.border_box_y() == 6
assert div_a.height == div_d.height == 2
assert div_b.height == 4
assert div_c.height == 6
assert article.height == 10
2 changes: 2 additions & 0 deletions weasyprint/layout/grid.py
Original file line number Diff line number Diff line change
@@ -1148,6 +1148,7 @@ def grid_layout(context, box, bottom_space, skip_stack, containing_block,
new_child.translate(diff / 2, 0)
elif justify_self & {'right', 'end', 'flex-end', 'self-end'}:
new_child.translate(diff, 0)
new_child.width -= new_child.margin_width() - new_child.width

# TODO: Apply auto margins.
height -= new_child.margin_height() - new_child.height
@@ -1159,6 +1160,7 @@ def grid_layout(context, box, bottom_space, skip_stack, containing_block,
new_child.translate(0, diff / 2)
elif align_self & {'end', 'flex-end', 'self-end'}:
new_child.translate(0, diff)
new_child.height -= new_child.margin_height() - new_child.height

# TODO: Take care of page fragmentation.
new_children.append(new_child)
Loading
Oops, something went wrong.