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

Jump to bottom

Linear gradient background invisible since 63.0 #2360

Closed
leducvin opened this issue Jan 23, 2025 · 3 comments
Closed

Linear gradient background invisible since 63.0 #2360

leducvin opened this issue Jan 23, 2025 · 3 comments
Labels
bug Existing features not working as expected
Milestone
64.0

Comments

@leducvin
Copy link

leducvin commented Jan 23, 2025 •
edited
Loading

Hi, I noticed on recent versions of WeasyPrint linear gradient backgrounds do not appear. Using linear-gradient or repeating-linear-gradient gives the same empty background result.

test.html:

<!DOCTYPE html>
<html lang="en-CA">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <section>
    <p class="important">[p] This is an important note or a warning about a hazard.</p>
  </section>
</body>

</html>

test.css:

p.important {
    font-weight: normal;
    color: hsl(0, 0%, 4%);
    border-style: solid;
    border-width: 2px;
    border-radius: 0.5rem;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.5rem 0.5em 0.5em 2.5em;
    text-align: justify;
    border-color: hsl(4, 85%, 58%);
    background: repeating-linear-gradient(-55deg, hsl(4, 85%, 97%), hsl(4, 85%, 97%) 30px, hsl(4, 85%, 95%) 30px, hsl(4, 85%, 95%) 60px);
    /* background: linear-gradient(-55deg, hsl(4, 85%, 97%), hsl(4, 85%, 97%) 30px, hsl(4, 85%, 95%) 30px, hsl(4, 85%, 95%) 60px); */
}

p.important::before {
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    width: 1rem;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    font-size: 1.75rem;
    line-height: 1rem;
    position: relative;
    left: -1.9rem;
    bottom: -0.1rem;
    margin-right: -0.8rem;
    content: '⚠';
    color: hsl(4, 85%, 58%);
}

cat test.html | weasyprint -s test.css - test.pdf

WeasyPrint >= 63.0:
Image

WeasyPrint 62.3:
Image
@liZe liZe added the bug Existing features not working as expected label Jan 23, 2025
@liZe
Copy link
Member

liZe commented Jan 24, 2025

Thanks for the report!

That’s a bug here:

WeasyPrint/weasyprint/images.py

Lines 503 to 505 in 8ca4131

color_couples = [
[colors[i][:3], colors[i + 1][:3], 1]
for i in range(len(colors) - 1)]

We assume that colors are RGB colors when we create gradients. It should be possible to handle "easy" cases, when all the colors use the same color spaces in a gradient (and that’s the case for you). I’m not sure that there’s a solution in PDF when color spaces are mixed.

@liZe liZe added this to the 64.0 milestone Jan 24, 2025
@liZe liZe closed this as completed in 80129e2 Jan 24, 2025
@liZe
Copy link
Member

liZe commented Jan 24, 2025

It’s now fixed for simple cases, TODOs are left in the code for more complex cases.

@leducvin
Copy link
Author

So it was because I was not using RGB... Thanks, and thank you this wonderful project!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
64.0
Development

No branches or pull requests
2 participants
@liZe @leducvin