danfickle/neoflyingsaucer

linear-gradient when height > width renders only until height == width

cneijenhuis opened this issue · 6 comments

cneijenhuis commented

Happy New Year everyone!
I ran into an issue with linear-gradient backgrounds. The following html is rendered correctly:

<body style="margin: 0">
  <div style="height: 1024px; width: 1024px; background: linear-gradient(180deg, red, green);">
  </div>
</body>

screen shot 2015-01-02 at 12 36 53
Whereas

height: 1024px; width: 512px;

renders incorrectly to:
screen shot 2015-01-02 at 12 36 03
The gradient is cut off at a height of 512px, although the colors have been computed correctly until that point.
The opposite (height smaller than width) works correctly, though: Image
Using a plain color also works fine.

I have a workaround, so it's not a blocker for me currently (= enjoy your holidays :)). I also had a quick look at the code relating to linear-gradient, and I may poke around it more later when I've got more time.
Best,
Chris

danfickle commented

Happy new year to you too. Thanks for the report. That is weird behaviour. Can you confirm this is the master branch and Java2D renderer? I'll investigate further in the next couple of days.

danfickle commented

Hi, I added a test case on the displaylist branch, which is planned to replace master and the test is rendering ok. This suggests that I inadvertently fixed it or something else is going on. Could it be a clipping issue? Is your test case a simple solitary div?

Thanks, Daniel.

cneijenhuis commented

Hi Daniel, sorry for not getting back earlier, I'm currently on the road...
I indeed tested with a single div to rule out any other problems that may be caused by my html/css. I'm using the ImageRender in flying-saucer-examples to rule out any problems on my side...
I switched to the displaylist branch and also tried to render your new test case, which works. However, my original test file still does not work. I'm absolutely failing to see why! Tried to align my file with yours (xml and xmlns declarations, move css into style tag) but nothing seems to have an effect...

For reference, here is the content of the file I'm using for testing:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body style="margin: 0">
    <div style="height: 1024px; width: 512px; background: linear-gradient(180deg, red, green);">
    </div>
  </body>
</html>

I'll be on the road for the next 2 days, but maybe I'll find some time afterwards to dive into the code :-)

Thanks for your time! Best, Chris

danfickle commented

@cneijenhuis - I notice you are still using the old Java2DOutputDevice in core. Any chance, at your leisure, you could test this with the new Java2D-out and PDF2-out modules? If you open the problematic file in the browser(which uses the old output device) and then export to PDF you'll get three files (the PDF, the paged image and a continuous image). These are generated with the new output modules and should tell us if the error persists anywhere else.

Thanks again, Daniel.

cneijenhuis commented

I just tested that. This specific problem is gone!

For a background with a height of 512px, everything works as expected.

If the height is 1024px, the paging variant only puts out one page where the background is clipped after 842 pixels. I don't know if a second page should be there, as it contains no text - however, the div has a height of 1024px, so... what's the expected output for that? :)

danfickle commented

Thanks. I think that was because it was only outputting the first page. I've fixed that and added a test case for linear gradients across pages so I think we can now close this issue. Feel free to reopen if you have any more problems.