LibWeb: Treat grid items with z-index != auto as positioned elements

This commit is contained in:
Aliaksandr Kalenik 2023-08-21 17:07:53 +02:00 committed by Andreas Kling
parent 95a8dec373
commit cca779e7f6
5 changed files with 33 additions and 1 deletions

View file

@ -0,0 +1,8 @@
<!doctype html><style type="text/css">
* { outline: 1px solid black; }
body { display: grid; }
.foo {
grid-area: 1 / 1 / auto / auto;
background: pink;
}
</style><body><div class="foo">foo</div>

View file

@ -0,0 +1,13 @@
<!doctype html><style type="text/css">
* { outline: 1px solid black; }
body { display: grid; }
.foo {
grid-area: 1 / 1 / auto / auto;
background: pink;
}
.bar {
grid-area: 1 / 1 / auto / auto;
background: orange;
z-index: -1;
}
</style><body><div class="foo">foo</div><div class="bar">bar</div>

View file

@ -1,4 +1,5 @@
{
"item-with-negative-z-index.html": "item-with-negative-z-index-ref.html",
"img-srcset-viewport-relative-sizes.html": "img-srcset-viewport-relative-sizes-ref.html",
"grid-items-painting-order.html": "grid-items-painting-order-ref.html",
"square-flex.html": "square-ref.html",

View file

@ -27,6 +27,16 @@ void Paintable::visit_edges(Cell::Visitor& visitor)
visitor.visit(m_containing_block.value());
}
bool Paintable::is_positioned() const
{
if (layout_node().is_grid_item() && computed_values().z_index().has_value()) {
// https://www.w3.org/TR/css-grid-2/#z-order
// grid items with z_index should behave as if position were "relative"
return true;
}
return computed_values().position() != CSS::Position::Static;
}
void Paintable::set_dom_node(JS::GCPtr<DOM::Node> dom_node)
{
m_dom_node = dom_node;

View file

@ -56,7 +56,7 @@ class Paintable
public:
virtual ~Paintable() = default;
[[nodiscard]] bool is_positioned() const { return layout_node().is_positioned(); }
[[nodiscard]] bool is_positioned() const;
[[nodiscard]] bool is_fixed_position() const { return layout_node().is_fixed_position(); }
[[nodiscard]] bool is_absolutely_positioned() const { return layout_node().is_absolutely_positioned(); }
[[nodiscard]] bool is_floating() const { return layout_node().is_floating(); }