LibWeb: Implement ::details-content pseudo element

Details' contents matches a new details-content pseudo element.

Further work is required to make this pseudo-element behave per spec.

This pseudo should be element-backed per
https://drafts.csswg.org/css-pseudo/#element-backed
This commit is contained in:
Luke Warlow 2024-11-30 23:46:26 +00:00 committed by Tim Ledbetter
commit b17bbe6d1f
Notes: github-actions[bot] 2024-12-06 07:17:31 +00:00
7 changed files with 89 additions and 3 deletions

View file

@ -0,0 +1,12 @@
<!DOCTYPE HTML>
<title>Details pseudo-elements</title>
<style>
div { background: aqua }
</style>
<details open>
<summary>The summary</summary>
<div>The details!</div>
</details>

View file

@ -0,0 +1,14 @@
<!DOCTYPE HTML>
<title>::details-content pseudo element is display: block</title>
<style>
#contents { opacity: 0.5; }
details
</style>
<div>
<div>summary</div>
<div id="contents">contents</div>
</div>

View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<title>Details pseudo-elements</title>
<link rel="match" href="../../../../../expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-001-ref.html">
<link rel="help" href="https://github.com/whatwg/html/pull/10265">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo">
<link rel="help" href="https://github.com/dbaron/details-styling">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1469418">
<style>
details::details-content {
background: aqua;
display: block; /* override display: contents for slot */
}
</style>
<details open>
<summary>The summary</summary>
<div>The details!</div>
</details>

View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<title>::details-content pseudo element is display: block</title>
<link rel="match" href="../../../../../expected/wpt-import/html/rendering/the-details-element/details-pseudo-elements-003-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#details-content-pseudo">
<link rel="help" href="https://github.com/whatwg/html/pull/10265">
<link rel="help" href="https://github.com/dbaron/details-styling">
<link rel="help" href="https://crbug.com/1469418">
<style>
summary { display: block }
details::details-content { opacity: 0.5; }
details
</style>
<details open>
<summary>summary</summary>
contents
</details>