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

LibWeb: Grid layout with grid-row: calc(...) does not work #22802

Open
awesomekling opened this issue Jan 16, 2024 · 0 comments
Open

LibWeb: Grid layout with grid-row: calc(...) does not work #22802

awesomekling opened this issue Jan 16, 2024 · 0 comments
Labels
bug Something isn't working reduction-of-web-content Issue has a simplified reduction based on real-world web content. web compatibility

Comments

@awesomekling
Copy link
Contributor

This news section on https://kotlinlang.org/ looks pretty wonky:
image

Simplified reduction:

<!DOCTYPE html><style>
  * {
    outline: 1px solid black;
  }
  body {
    display: grid;
    width: 600px;
  }
  .column {
    display: contents;
  }
  .title {
    grid-column: var(--column-index);
    grid-row: calc(3);
  }
  .text {
    grid-column: var(--column-index);
    grid-row: calc(4);
  }
</style>
<body>
  <div class="column" style="--column-index: 1">
    <div class="title">title 1</div>
    <div class="text">text 1</div>
  </div>
  <div class="column" style="--column-index: 2">
    <div class="title">title 2</div>
    <div class="text">text 2</div>
  </div>
  <div class="column" style="--column-index: 3">
    <div class="title">title 3</div>
    <div class="text">text 3</div>
  </div>
</body>
@awesomekling awesomekling added bug Something isn't working web compatibility reduction-of-web-content Issue has a simplified reduction based on real-world web content. labels Jan 16, 2024
kalenikaliaksandr added a commit to kalenikaliaksandr/serenity that referenced this issue Jan 17, 2024
@kalenikaliaksandr
LibWeb/CSS: Support calc() in grid placement values
b196d42 
Fixes reduction in SerenityOS#22802
but does not result in visual improvement on https://kotlinlang.org/
kalenikaliaksandr added a commit to kalenikaliaksandr/serenity that referenced this issue Jan 17, 2024
@kalenikaliaksandr
LibWeb/CSS: Support calc() in grid placement values
55b2617 
Fixes reduction in SerenityOS#22802
but does not result in visual improvement on https://kotlinlang.org/
@kalenikaliaksandr kalenikaliaksandr mentioned this issue Jan 17, 2024
Merged
awesomekling pushed a commit that referenced this issue Jan 17, 2024
@kalenikaliaksandr @awesomekling
LibWeb/CSS: Support calc() in grid placement values
a22ef08 
Fixes reduction in #22802
but does not result in visual improvement on https://kotlinlang.org/
kalenikaliaksandr added a commit to kalenikaliaksandr/serenity that referenced this issue Jan 18, 2024
@kalenikaliaksandr
LibWeb/CSS: Preserving number type after token construction
8fa4a48 
When parsing grid track placement (grid-column-start, grid-column-end,
etc.), it is necessary to determine if calc() evaluates to a number
with an integer type. This change ensures that this information is not
lost by avoiding the unwrapping of the number value to a double before
it is passed to the constructor.

Fixes SerenityOS#22802
kalenikaliaksandr added a commit to kalenikaliaksandr/serenity that referenced this issue Jan 18, 2024
@kalenikaliaksandr
LibWeb/CSS: Preserve number type after token construction
794498b 
When parsing grid track placement (grid-column-start, grid-column-end,
etc.), it is necessary to determine if calc() evaluates to a number
with an integer type. This change ensures that this information is not
lost by avoiding the unwrapping of the number value to a double before
it is passed to the constructor.

Fixes SerenityOS#22802
kalenikaliaksandr added a commit to kalenikaliaksandr/serenity that referenced this issue Jan 18, 2024
@kalenikaliaksandr
LibWeb/CSS: Preserve number type after token construction
40a3728 
When parsing grid track placement (grid-column-start, grid-column-end,
etc.), it is necessary to determine if calc() evaluates to a number
with an integer type. This change ensures that this information is not
lost by avoiding the unwrapping of the number value to a double before
it is passed to the constructor.

Fixes SerenityOS#22802
@kalenikaliaksandr kalenikaliaksandr mentioned this issue Jan 18, 2024
Closed
kalenikaliaksandr added a commit to kalenikaliaksandr/serenity that referenced this issue Jan 18, 2024
@kalenikaliaksandr
LibWeb/CSS: Do not check integer type in grid placement parser
206d90f 
The token may not be of integer type, yet it can still qualify as a
valid grid line number because:

"Additionally, math functions that resolve to <number> can be used in
any place that only accepts <integer>; the value is rounded to the
nearest integer as it resolves."
From w3.org/TR/css-values-4/#calc-type-checking

Fixes SerenityOS#22802
kleinesfilmroellchen pushed a commit to kleinesfilmroellchen/serenity that referenced this issue Jan 23, 2024
@kalenikaliaksandr @kleinesfilmroellchen
LibWeb/CSS: Support calc() in grid placement values
83317a1 
Fixes reduction in SerenityOS#22802
but does not result in visual improvement on https://kotlinlang.org/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working reduction-of-web-content Issue has a simplified reduction based on real-world web content. web compatibility
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

LibWeb/CSS: Preserve number type after token construction kalenikaliaksandr/serenity
1 participant
@awesomekling