LibWeb: Establish stacking context when backdrop-filter is not 'none'

2 files changed, 8 insertions, 0 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
index dc5d4bc74c..7a96af036e 100644
--- a/Userland/Libraries/LibWeb/CSS/Properties.json
+++ b/Userland/Libraries/LibWeb/CSS/Properties.json
@@ -29,6 +29,7 @@
   },
   "backdrop-filter": {
     "affects-layout": false,
+    "affects-stacking-context": true,
     "inherited": false,
     "initial": "none",
     "valid-types": [
diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
index a555d5e3c9..951d11578c 100644
--- a/Userland/Libraries/LibWeb/Layout/Node.cpp
+++ b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -117,6 +117,13 @@ bool Node::establishes_stacking_context() const
     if (parent() && parent()->display().is_grid_inside() && computed_values().z_index().has_value())
         return true;
 
+    // https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation
+    // A computed value of other than none results in the creation of both a stacking context [CSS21] and a Containing Block for absolute and fixed position descendants,
+    // unless the element it applies to is a document root element in the current browsing context.
+    // Spec Note: This rule works in the same way as for the filter property.
+    if (!computed_values().backdrop_filter().is_none())
+        return true;
+
     return computed_values().opacity() < 1.0f;
 }