Gradient stops are positioned incorrectly

jochenberger commented 2 years ago

Consider the following HTML

<html>
<head>
<style>
div {
  border: 1mm dashed black;
  background-image: linear-gradient(to top, red 0, red 5mm, white 5mm, white);
  margin: 5mm;
}
.h1 { height: 1cm; }
.h3 { height: 3cm; }
.w1 { width: 1cm; }
.w3 { width: 3cm; }
</style>
</head>
<body>
<div class="h1 w1"/>
<div class="h1 w3"/>
<div class="h3 w1"/>
<div class="h3 w3"/>
</body>
</html>

All the divs should have a 5mm red bar at the bottom. But the result looks like this: grafik

I think we can ignore the blur, that's probably https://github.com/mozilla/pdf.js/issues/10572. But at least the red bars should all have the same height since it's given in mm.

Btw, if you change the gradient to to right, all the bars have the same width: grafik

So it's probably got something to do with the y coordinates.

jochenberger commented 2 years ago

I assume that there's something wrong with the com.openhtmltopdf.css.style.derived.FSLinearGradient.endPointsFromAngle(float, int, int) method.

jochenberger commented 2 years ago

After some debugging, I think that the problem is that the wrong distance is passed to com.openhtmltopdf.pdfboxout.GradientHelper.buildType3Function(List<StopPoint>, float). But I haven't yet figured out all of the math that's done there.

jochenberger commented 6 months ago

@siegelzc, do you think this is something we could address in the fork?

siegelzc commented 6 months ago

@siegelzc, do you think this is something we could address in the fork?

Of course. I'm not going to personally commit to implementing it though.

danfickle / openhtmltopdf

Gradient stops are positioned incorrectly #883