mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-02 22:30:31 +00:00
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:
parent
2249f09267
commit
b17bbe6d1f
Notes:
github-actions[bot]
2024-12-06 07:17:31 +00:00
Author: https://github.com/lukewarlow
Commit: b17bbe6d1f
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2669
Reviewed-by: https://github.com/tcl3 ✅
7 changed files with 89 additions and 3 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue