LibWeb: Return computed grid-template-rows/columns if there's no used

If grid-template-rows or grid-template-columns queried for a box that is
not a grid container, the result should be computed value instead of
null.

Fixes crashing in inspector.
This commit is contained in:
Aliaksandr Kalenik 2024-09-09 18:13:24 +02:00 committed by Andreas Kling
parent b2aff403fc
commit 1d7c9cd1e1
Notes: github-actions[bot] 2024-09-09 19:11:16 +00:00
3 changed files with 30 additions and 12 deletions

View file

@ -1,2 +1,3 @@
100px 100px 100px 100px
50px 50px 50px 50px
auto auto

View file

@ -10,12 +10,25 @@
height: 50px; height: 50px;
background-color: lightblue; background-color: lightblue;
} }
.not-a-grid {
grid-template-columns: auto auto;
}
</style> </style>
<div class="grid-container" style="grid-template-columns: auto auto"><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div><div class="grid-item"></div></div> <div class="grid-container" style="grid-template-columns: auto auto">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="not-a-grid"></div>
<script> <script>
test(() => { test(() => {
const grid = document.querySelector(".grid-container"); const grid = document.querySelector(".grid-container");
println(getComputedStyle(grid).gridTemplateColumns); println(getComputedStyle(grid).gridTemplateColumns);
println(getComputedStyle(grid).gridTemplateRows); println(getComputedStyle(grid).gridTemplateRows);
const not_a_grid = document.querySelector(".not-a-grid");
println(getComputedStyle(not_a_grid).gridTemplateColumns);
}); });
</script> </script>

View file

@ -250,16 +250,6 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
return style_value_for_shadow(layout_node.computed_values().box_shadow()); return style_value_for_shadow(layout_node.computed_values().box_shadow());
case PropertyID::Color: case PropertyID::Color:
return CSSColorValue::create_from_color(layout_node.computed_values().color()); return CSSColorValue::create_from_color(layout_node.computed_values().color());
// For grid-template-columns and grid-template-rows the resolved value is the used value.
// https://www.w3.org/TR/css-grid-2/#resolved-track-list-standalone
case PropertyID::GridTemplateColumns: {
auto const& paintable_box = verify_cast<Painting::PaintableBox const>(*layout_node.paintable());
return paintable_box.used_values_for_grid_template_columns();
}
case PropertyID::GridTemplateRows: {
auto const& paintable_box = verify_cast<Painting::PaintableBox const>(*layout_node.paintable());
return paintable_box.used_values_for_grid_template_rows();
}
case PropertyID::OutlineColor: case PropertyID::OutlineColor:
return CSSColorValue::create_from_color(layout_node.computed_values().outline_color()); return CSSColorValue::create_from_color(layout_node.computed_values().outline_color());
case PropertyID::TextDecorationColor: case PropertyID::TextDecorationColor:
@ -530,6 +520,20 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
dbgln_if(LIBWEB_CSS_DEBUG, "Computed style for custom properties was requested (?)"); dbgln_if(LIBWEB_CSS_DEBUG, "Computed style for custom properties was requested (?)");
return nullptr; return nullptr;
default: default:
// For grid-template-columns and grid-template-rows the resolved value is the used value.
// https://www.w3.org/TR/css-grid-2/#resolved-track-list-standalone
if (property_id == PropertyID::GridTemplateColumns) {
auto const& paintable_box = verify_cast<Painting::PaintableBox const>(*layout_node.paintable());
if (auto used_values_for_grid_template_columns = paintable_box.used_values_for_grid_template_columns()) {
return used_values_for_grid_template_columns;
}
} else if (property_id == PropertyID::GridTemplateRows) {
auto const& paintable_box = verify_cast<Painting::PaintableBox const>(*layout_node.paintable());
if (auto used_values_for_grid_template_rows = paintable_box.used_values_for_grid_template_rows()) {
return used_values_for_grid_template_rows;
}
}
if (!property_is_shorthand(property_id)) if (!property_is_shorthand(property_id))
return get_computed_value(property_id); return get_computed_value(property_id);