mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-22 04:25:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Generate ::backdrop pseudo-elements

Browse source
This commit is contained in:
Gingeh 2025-04-07 18:39:32 +10:00 • committed by Sam Atkins
parent 2a17d6d449
commit 4b9f5c6fb8
Notes: github-actions[bot] 2025-04-09 11:11:48 +00:00
11 changed files with 145 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Base/res/ladybird/about-pages/settings.html
View file

@ -152,7 +152,6 @@
}
dialog::backdrop {
/* FIXME: This doesn't work in Ladybird. */
background-color: rgba(0, 0, 0, 0.5);
}

8
Libraries/LibWeb/CSS/Default.css
View file

@ -285,6 +285,14 @@ dialog:popover-open {
background-color: transparent;
}
/* 4.2. The ::backdrop Pseudo-Element
* https://drafts.csswg.org/css-position-4/#backdrop
*/
::backdrop {
position: fixed;
inset: 0;
}
slot {
display: contents;
}

2
Libraries/LibWeb/DOM/Element.cpp
View file

@ -566,6 +566,8 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
recompute_pseudo_element_style(CSS::PseudoElement::Before);
recompute_pseudo_element_style(CSS::PseudoElement::After);
if (m_rendered_in_top_layer)
recompute_pseudo_element_style(CSS::PseudoElement::Backdrop);
if (had_list_marker || m_computed_properties->display().is_list_item())
recompute_pseudo_element_style(CSS::PseudoElement::Marker);

21
Libraries/LibWeb/Layout/TreeBuilder.cpp
View file

@ -567,8 +567,27 @@ void TreeBuilder::update_layout_tree(DOM::Node& dom_node, TreeBuilder::Context&
// generate boxes as if they were siblings of the root element.
TemporaryChange<bool> layout_mask(context.layout_top_layer, true);
for (auto const& top_layer_element : document.top_layer_elements()) {
if (top_layer_element->rendered_in_top_layer())
if (top_layer_element->rendered_in_top_layer()) {
// Each element rendered in the top layer has a ::backdrop pseudo-element, for which it is the originating element.
[&]() {
if (top_layer_element->has_inclusive_ancestor_with_display_none())
return;
auto pseudo_element_style = top_layer_element->pseudo_element_computed_properties(CSS::PseudoElement::Backdrop);
if (!pseudo_element_style)
return;
auto pseudo_element_display = pseudo_element_style->display();
auto pseudo_element_node = DOM::Element::create_layout_node_for_display_type(document, pseudo_element_display, *pseudo_element_style, nullptr);
if (!pseudo_element_node)
return;
top_layer_element->set_pseudo_element_node({}, CSS::PseudoElement::Backdrop, pseudo_element_node);
insert_node_into_inline_or_block_ancestor(*pseudo_element_node, pseudo_element_display, AppendOrPrepend::Append);
}();
update_layout_tree(top_layer_element, context, should_create_layout_node ? MustCreateSubtree::Yes : MustCreateSubtree::No);
}
}
}
pop_parent();

2
Tests/LibWeb/Layout/expected/dialog-open-modal.txt
View file

@ -2,6 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (0,0) content-size 800x600 positioned [BFC] children: not-inline
Box <dialog#modal> at (358.84375,291.5) content-size 82.3125x17 positioned flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
@ -15,6 +16,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x600]
PaintableBox (Box<DIALOG>#modal) [339.84375,272.5 120.3125x55]
PaintableWithLines (BlockContainer<SPAN>) [358.84375,291.5 82.3125x17]
TextPaintable (TextNode<#text>)

2
Tests/LibWeb/Layout/expected/popovertarget-button.txt
View file

@ -8,6 +8,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (0,0) content-size 800x600 positioned [BFC] children: not-inline
BlockContainer <div#pop> at (358.84375,291.5) content-size 82.3125x17 positioned [BFC] children: inline
TextNode <#text>
InlineNode <span>
@ -22,6 +23,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<BUTTON>#button) [8,17 10x4]
PaintableWithLines (BlockContainer(anonymous)) [13,19 0x0]
PaintableWithLines (BlockContainer(anonymous)) [13,19 0x0]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x600]
PaintableWithLines (BlockContainer<DIV>#pop) [351.84375,284.5 96.3125x31]
PaintableWithLines (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)

2
Tests/LibWeb/Layout/expected/top-layer.txt
View file

@ -2,6 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (0,0) content-size 800x600 positioned [BFC] children: not-inline
BlockContainer <dialog#dialog> at (196.671875,275.5) content-size 406.65625x49 positioned [BFC] children: not-inline
BlockContainer <p> at (196.671875,291.5) content-size 406.65625x17 children: inline
frag 0 from TextNode start: 0, length: 50, rect: [196.671875,291.5 406.65625x17] baseline: 13.296875
@ -11,6 +12,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x600]
PaintableWithLines (BlockContainer<DIALOG>#dialog) [177.671875,256.5 444.65625x87]
PaintableWithLines (BlockContainer<P>) [196.671875,291.5 406.65625x17]
TextPaintable (TextNode<#text>)

5
Tests/LibWeb/Ref/expected/wpt-import/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop-ref.html Normal file
View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<body>
Test that ::backdrop is not shown for non-open or non-modal dialogs.
The test passes if there is no red shown.
</body>

42
Tests/LibWeb/Ref/expected/wpt-import/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop-ref.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<style>
.dialog-default-ua-style {
position: absolute;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
}
#dialog {
margin: auto;
height: 100px;
width: 100px;
top: 100px;
z-index: 1000;
background: green;
}
#backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.1);
z-index: 100;
}
</style>
<body>
Test for the default user agent style of dialog::backdrop. The test passes if
there is a green box, above a very lightly translucent gray box spanning the
viewport.
<div id="backdrop"></div>
<div class="dialog-default-ua-style" id="dialog"></div>
</body>

41
Tests/LibWeb/Ref/input/wpt-import/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<link rel="match" href="../../../../../../expected/wpt-import/html/semantics/interactive-elements/the-dialog-element/dialogs-with-no-backdrop-ref.html">
<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element">
<style>
dialog::backdrop {
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
background: red;
}
#display-none-backdrop::backdrop {
display: none;
}
</style>
<body>
Test that ::backdrop is not shown for non-open or non-modal dialogs.
The test passes if there is no red shown.
<dialog id="never-opened-dialog"></dialog>
<dialog id="display-none-dialog" style="display: none"></dialog>
<dialog id="non-modal-dialog" style="visibility: hidden"></dialog>
<dialog id="display-none-backdrop" style="visibility: hidden"></dialog>
<dialog id="closed-dialog"></dialog>
<dialog id="removed-dialog"></dialog>
<script>
document.getElementById('display-none-dialog').showModal();
document.getElementById('non-modal-dialog').show();
document.getElementById('display-none-backdrop').showModal();
var closedDialog = document.getElementById('closed-dialog');
closedDialog.showModal();
closedDialog.close();
var removedDialog = document.getElementById('removed-dialog');
removedDialog.showModal();
removedDialog.parentNode.removeChild(removedDialog);
</script>
</body>

21
Tests/LibWeb/Ref/input/wpt-import/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="match" href="../../../../../../expected/wpt-import/html/semantics/interactive-elements/the-dialog-element/modal-dialog-backdrop-ref.html">
<link rel="help" href="https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults">
<style>
dialog {
top: 100px;
height: 100px;
width: 100px;
background: green;
outline: none;
}
</style>
<body>
Test for the default user agent style of dialog::backdrop. The test passes if
there is a green box, above a very lightly translucent gray box spanning the
viewport.
<dialog></dialog>
<script>
document.querySelector('dialog').showModal();
</script>
</body>