mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-22 02:01:55 +00:00
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:
parent
77718c0a66
commit
3e92ec80f3
Notes:
github-actions[bot]
2024-08-29 05:00:53 +00:00
Author: https://github.com/adamjoer
Commit: 3e92ec80f3
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1214
4 changed files with 67 additions and 2 deletions
|
@ -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>)
|
|
@ -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>
|
|
@ -6795,7 +6795,7 @@ RefPtr<CSSStyleValue> Parser::parse_grid_auto_track_sizes(TokenStream<ComponentV
|
||||||
return GridTrackSizeListStyleValue::create(GridTrackSizeList(move(track_list)));
|
return GridTrackSizeListStyleValue::create(GridTrackSizeList(move(track_list)));
|
||||||
}
|
}
|
||||||
|
|
||||||
RefPtr<CSSStyleValue> Parser::parse_grid_track_placement(TokenStream<ComponentValue>& tokens)
|
RefPtr<GridTrackPlacementStyleValue> Parser::parse_grid_track_placement(TokenStream<ComponentValue>& tokens)
|
||||||
{
|
{
|
||||||
// FIXME: This shouldn't be needed. Right now, the below code returns a CSSStyleValue even if no tokens are consumed!
|
// FIXME: This shouldn't be needed. Right now, the below code returns a CSSStyleValue even if no tokens are consumed!
|
||||||
if (!tokens.has_next_token())
|
if (!tokens.has_next_token())
|
||||||
|
@ -6924,6 +6924,10 @@ RefPtr<CSSStyleValue> Parser::parse_grid_track_placement_shorthand_value(Propert
|
||||||
auto parsed_start_value = parse_grid_track_placement(track_start_placement_token_stream);
|
auto parsed_start_value = parse_grid_track_placement(track_start_placement_token_stream);
|
||||||
if (parsed_start_value && track_end_placement_tokens.is_empty()) {
|
if (parsed_start_value && track_end_placement_tokens.is_empty()) {
|
||||||
transaction.commit();
|
transaction.commit();
|
||||||
|
if (parsed_start_value->grid_track_placement().has_identifier()) {
|
||||||
|
auto custom_ident = parsed_start_value.release_nonnull();
|
||||||
|
return ShorthandStyleValue::create(property_id, { start_property, end_property }, { custom_ident, custom_ident });
|
||||||
|
}
|
||||||
return ShorthandStyleValue::create(property_id,
|
return ShorthandStyleValue::create(property_id,
|
||||||
{ start_property, end_property },
|
{ start_property, end_property },
|
||||||
{ parsed_start_value.release_nonnull(), GridTrackPlacementStyleValue::create(GridTrackPlacement::make_auto()) });
|
{ parsed_start_value.release_nonnull(), GridTrackPlacementStyleValue::create(GridTrackPlacement::make_auto()) });
|
||||||
|
|
|
@ -322,7 +322,7 @@ private:
|
||||||
RefPtr<CSSStyleValue> parse_grid_auto_track_sizes(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_grid_auto_track_sizes(TokenStream<ComponentValue>&);
|
||||||
RefPtr<GridAutoFlowStyleValue> parse_grid_auto_flow_value(TokenStream<ComponentValue>&);
|
RefPtr<GridAutoFlowStyleValue> parse_grid_auto_flow_value(TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_grid_track_size_list_shorthand_value(PropertyID, TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_grid_track_size_list_shorthand_value(PropertyID, TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_grid_track_placement(TokenStream<ComponentValue>&);
|
RefPtr<GridTrackPlacementStyleValue> parse_grid_track_placement(TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_grid_track_placement_shorthand_value(PropertyID, TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_grid_track_placement_shorthand_value(PropertyID, TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_grid_template_areas_value(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_grid_template_areas_value(TokenStream<ComponentValue>&);
|
||||||
RefPtr<CSSStyleValue> parse_grid_area_shorthand_value(TokenStream<ComponentValue>&);
|
RefPtr<CSSStyleValue> parse_grid_area_shorthand_value(TokenStream<ComponentValue>&);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue