LibWeb: Eagerly create stacking context if will-change set for property

If `will-change` is set to a property value where that property could
create a stacking context, then we create a stacking context regardless
of the current value of that property.

Libraries/LibWeb/Layout/Node.cpp

@@ -185,37 +185,50 @@ bool Node::establishes_stacking_context() const
     if (is_root_element())
         return true;
 
-    auto position = computed_values().position();
+    auto const& computed_values = this->computed_values();
+
+    auto position = computed_values.position();
+
+    // https://drafts.csswg.org/css-will-change/#will-change
+    // If any non-initial value of a property would create a stacking context on the element, specifying that property
+    // in will-change must create a stacking context on the element.
+    auto will_change_property = [&](CSS::PropertyID property_id) {
+        return computed_values.will_change().has_property(property_id);
+    };
+
+    auto has_z_index = computed_values.z_index().has_value() || will_change_property(CSS::PropertyID::ZIndex);
 
     // Element with a position value absolute or relative and z-index value other than auto.
     if (position == CSS::Positioning::Absolute || position == CSS::Positioning::Relative) {
-        if (computed_values().z_index().has_value()) {
+        if (has_z_index) {
             return true;
         }
     }
 
     // Element with a position value fixed or sticky.
-    if (position == CSS::Positioning::Fixed || position == CSS::Positioning::Sticky)
+    if (position == CSS::Positioning::Fixed || position == CSS::Positioning::Sticky
+        || will_change_property(CSS::PropertyID::Position)) {
+        return true;
+    }
+
+    if (!computed_values.transformations().is_empty() || will_change_property(CSS::PropertyID::Transform))
         return true;
 
-    if (!computed_values().transformations().is_empty())
+    if (computed_values.translate().has_value() || will_change_property(CSS::PropertyID::Translate))
         return true;
 
-    if (computed_values().translate().has_value())
+    if (computed_values.rotate().has_value() || will_change_property(CSS::PropertyID::Rotate))
         return true;
 
-    if (computed_values().rotate().has_value())
+    if (computed_values.scale().has_value() || will_change_property(CSS::PropertyID::Scale))
-        return true;
-
-    if (computed_values().scale().has_value())
         return true;
 
     // Element that is a child of a flex container, with z-index value other than auto.
-    if (parent() && parent()->display().is_flex_inside() && computed_values().z_index().has_value())
+    if (parent() && parent()->display().is_flex_inside() && has_z_index)
         return true;
 
     // Element that is a child of a grid container, with z-index value other than auto.
-    if (parent() && parent()->display().is_grid_inside() && computed_values().z_index().has_value())
+    if (parent() && parent()->display().is_grid_inside() && has_z_index)
         return true;
 
     // https://drafts.fxtf.org/filter-effects/#FilterProperty
@@ -224,8 +237,11 @@ bool Node::establishes_stacking_context() const
     // [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().has_value() || computed_values().filter().has_value())
+    if (computed_values.backdrop_filter().has_value() || computed_values.filter().has_value()
+        || will_change_property(CSS::PropertyID::BackdropFilter)
+        || will_change_property(CSS::PropertyID::Filter)) {
         return true;
+    }
 
     // Element with any of the following properties with value other than none:
     // - transform
@@ -234,36 +250,40 @@ bool Node::establishes_stacking_context() const
     // - perspective
     // - clip-path
     // - mask / mask-image / mask-border
-    if (computed_values().mask().has_value() || computed_values().clip_path().has_value() || computed_values().mask_image())
+    if (computed_values.mask().has_value() || computed_values.clip_path().has_value() || computed_values.mask_image()
+        || will_change_property(CSS::PropertyID::Mask)
+        || will_change_property(CSS::PropertyID::ClipPath)
+        || will_change_property(CSS::PropertyID::MaskImage)) {
         return true;
+    }
 
     if (is_svg_foreign_object_box())
         return true;
 
     // https://drafts.fxtf.org/compositing/#propdef-isolation
     // For CSS, setting isolation to isolate will turn the element into a stacking context.
-    if (computed_values().isolation() == CSS::Isolation::Isolate)
+    if (computed_values.isolation() == CSS::Isolation::Isolate || will_change_property(CSS::PropertyID::Isolation))
         return true;
 
     // https://drafts.csswg.org/css-contain-2/#containment-types
     // 5. The layout containment box creates a stacking context.
     // 3. The paint containment box creates a stacking context.
-    if (has_layout_containment() || has_paint_containment())
+    if (has_layout_containment() || has_paint_containment() || will_change_property(CSS::PropertyID::Contain))
         return true;
 
     // https://drafts.fxtf.org/compositing/#mix-blend-mode
     // Applying a blendmode other than normal to the element must establish a new stacking context.
-    if (computed_values().mix_blend_mode() != CSS::MixBlendMode::Normal)
+    if (computed_values.mix_blend_mode() != CSS::MixBlendMode::Normal || will_change_property(CSS::PropertyID::MixBlendMode))
         return true;
 
     // https://drafts.csswg.org/css-view-transitions-1/#named-and-transitioning
     // Elements captured in a view transition during a view transition or whose view-transition-name computed value is
     // not 'none' (at any time):
     // - Form a stacking context.
-    if (computed_values().view_transition_name().has_value())
+    if (computed_values.view_transition_name().has_value() || will_change_property(CSS::PropertyID::ViewTransitionName))
         return true;
 
-    return computed_values().opacity() < 1.0f;
+    return computed_values.opacity() < 1.0f || will_change_property(CSS::PropertyID::Opacity);
 }
 
 GC::Ptr<HTML::Navigable> Node::navigable() const

Tests/LibWeb/Ref/expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change reference</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px; background: green }
+</style>
+<body>
+  <div></div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-backdrop-filter-1.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: will-change: backdrop-filter should create a stacking context.</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=960953">
+<link rel="help" href="https://drafts.csswg.org/css-will-change/#will-change">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<style>
+  html, body { margin: 0; }
+  .indicator {
+    position: absolute;
+    background-color: green;
+    z-index: 1;
+  }
+  .willchange {
+    will-change: backdrop-filter;
+    z-index: 0;
+  }
+  .child {
+    position: relative;
+    background-color: red;
+    z-index: 2;
+  }
+  .box {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div class="indicator box"></div>
+<div class="willchange box">
+  <!-- Because will-change: backdrop-filter creates a stacking context, this
+       child remains on bottom even though it has a higher z-index than the
+       indicator box. -->
+  <div class="child box"></div>
+</div>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-clip-path-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: clip-path' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css-masking/#the-clip-path">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: clip-path; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-filter-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: filter' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/filter-effects/#FilterProperty">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: filter; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-isolation-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: isolation' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/compositing-1/#isolation">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: isolation; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-mask-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: mask' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css-masking/#the-mask-image">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: mask; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-mask-image-1.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: mask-image' creates a stacking context</title>
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css-masking/#the-mask-image">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: mask-image; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-mix-blend-mode-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: mix-blend-mode; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-opacity-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: opacity' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="https://drafts.csswg.org/css-color-3/#transparency">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: opacity; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-position-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: position' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-positioning/#sticky-pos">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: position; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-transform-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: transform' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: transform; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-translate-1.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: translate' creates a stacking context</title>
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: translate; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-view-transition-name-1.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: view-transition-name' creates a stacking context</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/#named-and-transitioning">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: view-transition-name; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-z-index-1.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: z-index' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-positioning/#layered-presentation">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: z-index; background: red; position: relative }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-z-index-2.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Test: `will-change: z-index`</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#painting">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11827">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="
+  `will-change: z-index` establishes a stacking context on a flex item.
+">
+<style>
+.test {
+  will-change: z-index;
+  width: 100px;
+  background: red;
+}
+.test::before {
+  content: "";
+  display: block;
+  position: relative;
+  z-index: -1;
+  height: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: flex">
+  <div class="test"></div>
+</div>

Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-z-index-3.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Test: `will-change: z-index`</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident">
+<link rel="help" href="https://www.w3.org/TR/css-grid-2/#z-order">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11827">
+<link rel="match" href="../../../../expected/wpt-import/css/css-will-change/../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="
+  `will-change: z-index` establishes a stacking context on a grid item.
+">
+<style>
+.test {
+  will-change: z-index;
+  width: 100px;
+  background: red;
+}
+.test::before {
+  content: "";
+  display: block;
+  position: relative;
+  z-index: -1;
+  height: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid">
+  <div class="test"></div>
+</div>

Tests/LibWeb/TestConfig.ini

@@ -333,3 +333,8 @@ Text/input/wpt-import/html/browsers/sandboxing/sandbox-navigation-timing.tentati
 
 ; Not a ref test, but a subfile of the sandbox-parse-noscript ref test
 Ref/input/wpt-import/html/browsers/sandboxing/noscript-iframe.html
+
+; This test fails because we don't establish a stacking context when stacking context creating properties are animated
+; with @keyframes.
+; https://github.com/LadybirdBrowser/ladybird/issues/5875
+Ref/input/wpt-import/css/css-transforms/individual-transform/stacking-context-001.html