LibWeb: Set correct longhand values when using grid-placement shorthand

According to https://www.w3.org/TR/css-grid-2/#placement-shorthands
when setting the 'grid-row' and 'grid-column' shorthand property to a
single <custom-ident> value, both 'grid-row-start'/'grid-column-start'
and 'grid-row-end'/'grid-column-end' should be set to that
<custom_ident>.
This commit is contained in:
Adam Harald Jørgensen 2024-08-28 16:47:30 +02:00 committed by Andreas Kling
commit 3e92ec80f3
Notes: github-actions[bot] 2024-08-29 05:00:53 +00:00
4 changed files with 67 additions and 2 deletions

View file

@ -0,0 +1,27 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x133 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x117 children: not-inline
Box <div.grid-container> at (8,8) content-size 784x117 [GFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.headline> at (8,8) content-size 100x17 [BFC] children: inline
frag 0 from TextNode start: 0, length: 8, rect: [8,8 65.28125x17] baseline: 13.296875
"Headline"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.content> at (8,25) content-size 400x100 [BFC] children: inline
frag 0 from TextNode start: 0, length: 7, rect: [8,25 62.328125x17] baseline: 13.296875
"Content"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x133]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x117]
PaintableBox (Box<DIV>.grid-container) [8,8 784x117]
PaintableWithLines (BlockContainer<DIV>.headline) [8,8 100x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.content) [8,25 400x100]
TextPaintable (TextNode<#text>)

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<style>
.grid-container {
display: grid;
grid-template-rows:
[headline-start]
auto
[headline-end content-start]
auto
[content-end];
grid-template-columns:
[content-start title-start]
100px
[title-end]
repeat(3, 100px)
[content-end];
}
.headline {
grid-row: headline;
grid-column: title;
background-color: lightsalmon;
}
.content {
height: 100px;
grid-row: content;
grid-column: content;
background-color: lightblue;
}
</style>
<div class="grid-container">
<div class="headline">Headline</div>
<div class="content">Content</div>
</div>