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

Ignored grid-template-areas: invalid value #2383

Closed
hikyae opened this issue Feb 15, 2025 · 4 comments
Closed

Ignored grid-template-areas: invalid value #2383

hikyae opened this issue Feb 15, 2025 · 4 comments
Labels
bug Existing features not working as expected

Comments

@hikyae
Copy link

hikyae commented Feb 15, 2025

I created an HTML file below and tried to convert it to PDF using the command weasyprint --verbose invalid.html invalid.pdf

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>invalid</title>
    <style>
        #container {
            display: grid;
            grid-template-areas:
                "A B B"
                "C B B"
                "D E F";
        }
        #A {
            grid-area: A;
        }
        #B {
            grid-area: B;
        }
        #C {
            grid-area: C;
        }
        #D {
            grid-area: D;
        }
        #E {
            grid-area: E;
        }
        #F {
            grid-area: F;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="A">A</div>
        <div id="B">B</div>
        <div id="C">C</div>
        <div id="D">D</div>
        <div id="E">E</div>
        <div id="F">F</div>
    </div>
</body>
</html>

And I got the warning below and the grid was not rendered correctly.

INFO: Step 1 - Fetching and parsing HTML - invalid.html
INFO: Step 2 - Fetching and parsing CSS - CSS string
WARNING: Ignored `grid-template-areas:
                "A B B"
                "C B B"
                "D E F"` at 4:13, invalid value.
INFO: Step 3 - Applying CSS
INFO: Step 4 - Creating formatting structure
INFO: Step 5 - Creating layout - Page 1
INFO: Step 6 - Creating PDF
INFO: Step 7 - Adding PDF metadata

Replacing two Bs in any track into . clears the warning, and the grid-template-areas is no longer ignored.

I mean, these are rendered correctly for instance.

"A . ."
"C B B"
"D E F";

"A B ."
"C B ."
"D E F";

I'm not sure if this is a bug or a known issue, but rendering this on web browsers works fine.

I would appreciate any advice you could provide. Thank you in advance.
@hikyae
Copy link
Author

hikyae commented Feb 15, 2025

The version is the latest 64.0

@liZe
Copy link
Member

liZe commented Feb 16, 2025

Thank you for this bug report.

There are 2 different bugs in your example:

  • the validation in this case is broken,
  • uppercase identifiers in grid-area are broken.

Let’s fix them both!

@liZe liZe added the bug Existing features not working as expected label Feb 16, 2025
liZe added a commit that referenced this issue Feb 16, 2025
@liZe
Fix grid-template-areas validation
73a342e 
Related to #2383.
liZe added a commit that referenced this issue Feb 16, 2025
@liZe
Allow uppercase identifiers for grid lines
b2c6cba 
Related to #2383.
@liZe
Copy link
Member

liZe commented Feb 16, 2025

It’s now fixed and tested, thanks a lot for the detailed report!

@liZe liZe closed this as completed Feb 16, 2025
@hikyae
Copy link
Author

hikyae commented Feb 16, 2025 •
edited
Loading

Thank you very much for the super fast fix!

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
No milestone
Development

No branches or pull requests
2 participants
@liZe @hikyae