eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-27 18:17:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
2025-08-16 08:46:51 +01:00
committed by 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 ✅
18 changed files with 398 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Tests/LibWeb/Ref/input/wpt-import/css/css-will-change/will-change-stacking-context-position-1.html Normal file
View File

@@ -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>