mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-03 21:12:08 +02: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
committed by
Sam Atkins
Sam Atkins
parent
4f663ca6e7
commit
b81d3e813c
Notes:
github-actions[bot]
2025-08-18 11:37:50 +00:00
Author: https://github.com/tcl3 Commit: https://github.com/LadybirdBrowser/ladybird/commit/b81d3e813c3 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5870 Reviewed-by: https://github.com/AtkinsSJ ✅
@@ -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>
|
||||
Reference in New Issue
Block a user