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: Add ::slotted() pseudo-element support

Browse Source 
Implements `::slotted()` to enough extent we could pass the imported WPT
test and make substantial layout correctness improvement on
https://www.rottentomatoes.com/
This commit is contained in:
Aliaksandr Kalenik
2025-09-03 14:58:35 +02:00
committed by Sam Atkins
parent 8986e1f1ec
commit 4c7da460dc
Notes: github-actions[bot] 2025-09-04 08:52:46 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/4c7da460dc2
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6061
Reviewed-by: https://github.com/AtkinsSJ ✅
8 changed files with 115 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
Tests/LibWeb/Ref/input/wpt-import/css/css-scoping/css-scoping-shadow-slotted-rule.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Scoping Module Level 1 - :slotted pseudo element must allow selecting elements assigned to a slot element</title>
<link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
<link rel="help" href="http://www.w3.org/TR/css-scoping-1/#slotted-pseudo">
<link rel="match" href="../../../../expected/wpt-import/css/css-scoping/reference/green-box.html"/>
</head>
<body>
<style>
my-host {
display: block;
width: 100px;
height: 100px;
color: red;
background: green;
}
my-host > div, nested-host {
display: block;
width: 100px;
height: 25px;
}
</style>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<my-host>
<div class="green">FAIL1</div>
<myelem><span>FAIL2</span></myelem>
<nested-host>
<span>FAIL3</span>
</nested-host>
<another-host>
<b>FAIL4</b>
</another-host>
</my-host>
<script>
try {
var shadowHost = document.querySelector('my-host');
shadowRoot = shadowHost.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<slot></slot><style> ::slotted(.green), ::slotted(myelem) { color:green; } </style>';
shadowHost = document.querySelector('nested-host');
shadowRoot = shadowHost.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<style> .mydiv ::slotted(*) { color:green; } </style><div class=mydiv><slot></slot></div>';
shadowHost = document.querySelector('another-host');
shadowRoot = shadowHost.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<style> ::slotted(*) { color:green; } </style><slot></slot>';
} catch (exception) {
document.body.appendChild(document.createTextNode(exception));
}
</script>
</body>
</html>