Support for object-fit css property

[guojiaqi1027]

Hi:

I'm using WeasyPrint for generate PDF and the css property object-fit is not supported yet.

Do you have a plan to support this feature as this is really common used in my project.

Thanks.

[liZe]

Hello,

It's not supported yet, but it looks pretty easy to handle (in draw.py, draw_background_image function). If anyone is interested in adding this feature, I'd be happy to help!

[mbarkhau]

Very tempting.

[mbarkhau]

Not quite so simple (at least for me). I think I at least have the css parsing working. There must be some other code path than draw_background_image for normal <img> elements.

[liZe]

There must be some other code path than draw_background_image for normal <img> elements.

Yes, it's in RasterImage.draw() and SVGImage.draw(), in images.py. You have to change the context.scale() with the adapted context.scale() and context.translate() according to the object-fit value.

[mbarkhau]

I think I have object-fit working now, but I guess object-position is also not supported...

[liZe]

I think I have object-fit working now

Thanks a lot! 🎈 🎉

but I guess object-position is also not supported

No, it's not. I can do it if you don't want to!

[mbarkhau]

I'm going to try and continue tomorrow, but if you want to give feedback I'd appreciate it. I think the layout code that is still missing the use of object-position is better to move out of draw.py, probably to replaced.py.

[mbarkhau]

I have a file that I'm testing with and manually comparing to what browsers render. What would the appropriate approach be to write tests for this?

[liZe]

I'm going to try and continue tomorrow, but if you want to give feedback I'd appreciate it.

Your PR is simple and clean, I really appreciate it. Thank you.

The major thing I'd change is to put percentage in layout/percentage.py and not in a module on its own.

I think the layout code that is still missing the use of object-position is better to move out of draw.py, probably to replaced.py.

Yes, it's probably better in replaced.py.

I have a file that I'm testing with and manually comparing to what browsers render. What would the appropriate approach be to write tests for this?

You can rely on what's drawn, as it's done in test_draw/test_image.py. It's pretty painful, so if you don't want to add tests I'll write them, no problem.

[mbarkhau]

The major thing I'd change is to put percentage in layout/percentage.py and not in a module on its own.

I actually started out doing that, but I ran into circular imports when changing the various modules that had their own percentage functions. I think the main culprit is from ..images import LinearGradient, RadialGradient in css/utils.py. It seems to me that the css module should have it's own representation of a gradient, rather than instantiate a class that is used to generate the actual pattern.

It's pretty painful

I created PR #876 to maybe help with that.

[mbarkhau]

My test case now appears to work. In the pair of images the top are using object-fit and object-position the bottom use the equivalent background positioning.

The only ones that appear different are the ones to test object-position: none, but if I compare the test file to that in chrome it appears to be an issue with how the backround is positioned, so I'll leave that for now.

I think the only thing left are tests (and the percentage function issue).

[liZe]

I actually started out doing that, but I ran into circular imports when changing the various modules that had their own percentage functions.

OK, I'll check that.

My test case now appears to work. In the pair of images the top are using object-fit and object-position the bottom use the equivalent background positioning.

Nice! 😄

The only ones that appear different are the ones to test object-position: none, but if I compare the test file to that in chrome it appears to be an issue with how the backround is positioned, so I'll leave that for now.

No problem.

I think the only thing left are tests (and the percentage function issue).

Thank you very much. I'll merge your pull request, add tests and clean a couple of things. Thanks too for parse_pixels, it will be very useful!

[liZe]

It works perfectly!

it appears to be an issue with how the backround is positioned, so I'll leave that for now.

Could you please provide your example? I'd like to fix this bug too 😄.

[mbarkhau]

Here you go: https://codepen.io/mbarkhau/pen/NVoPBe

[liZe]

Here you go: https://codepen.io/mbarkhau/pen/NVoPBe

Thank you, it's now fixed.