mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-27 04:37:22 +00:00
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.
This commit is contained in:
Tim Ledbetter
Sam Atkins
parent
4f663ca6e7
commit
b81d3e813c
Notes:
github-actions[bot]
2025-08-18 11:37:50 +00:00
Author: https://github.com/tcl3
Commit: b81d3e813c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5870
Reviewed-by: https://github.com/AtkinsSJ ✅
18 changed files with 398 additions and 18 deletions
|
|
@ -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())
|
||||
return true;
|
||||
|
||||
if (computed_values().scale().has_value())
|
||||
if (computed_values.scale().has_value() || will_change_property(CSS::PropertyID::Scale))
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue