mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 20:29:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Update the <details> layout tree when it is opened/closed

Browse source 
Otherwise, the arrow painted next to the <details> element does not
update.

Using a screenshot test here because apparently the direction of the
arrow has no effect on the layout or paint trees.
This commit is contained in:
Timothy Flynn 2025-05-09 10:35:07 -04:00 • committed by Andreas Kling
commit 30e8f3f1ad
Notes: github-actions[bot] 2025-05-09 19:40:29 +00:00
5 changed files with 23 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Libraries/LibWeb/DOM/Node.h
View file

@ -112,6 +112,7 @@ enum class SetNeedsLayoutReason {
#define ENUMERATE_SET_NEEDS_LAYOUT_TREE_UPDATE_REASONS(X) \ #define ENUMERATE_SET_NEEDS_LAYOUT_TREE_UPDATE_REASONS(X) \
X(ElementSetInnerHTML) \ X(ElementSetInnerHTML) \
X(DetailsElementOpenedOrClosed) \
X(HTMLInputElementSrcAttribute) \ X(HTMLInputElementSrcAttribute) \
X(HTMLObjectElementUpdateLayoutAndChildObjects) \ X(HTMLObjectElementUpdateLayoutAndChildObjects) \
X(KeyframeEffect) \ X(KeyframeEffect) \

3
Libraries/LibWeb/HTML/HTMLDetailsElement.cpp
View file

@ -16,6 +16,7 @@
#include <LibWeb/HTML/HTMLSlotElement.h> #include <LibWeb/HTML/HTMLSlotElement.h>
#include <LibWeb/HTML/HTMLSummaryElement.h> #include <LibWeb/HTML/HTMLSummaryElement.h>
#include <LibWeb/HTML/ToggleEvent.h> #include <LibWeb/HTML/ToggleEvent.h>
#include <LibWeb/Layout/Node.h>
#include <LibWeb/Namespace.h> #include <LibWeb/Namespace.h>
namespace Web::HTML { namespace Web::HTML {
@ -308,6 +309,8 @@ void HTMLDetailsElement::update_shadow_tree_style()
content-visibility: hidden; content-visibility: hidden;
)~~~"_string)); )~~~"_string));
} }
shadow_root()->set_needs_layout_tree_update(true, DOM::SetNeedsLayoutTreeUpdateReason::DetailsElementOpenedOrClosed);
} }
} }

10
Tests/LibWeb/Screenshot/expected/details-open-then-closed-ref.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<img src="../images/details-open-then-closed.png">

BIN
Tests/LibWeb/Screenshot/images/details-open-then-closed.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

9
Tests/LibWeb/Screenshot/input/details-open-then-closed.html Normal file
View file

@ -0,0 +1,9 @@
<!doctype html>
<link rel="match" href="../expected/details-open-then-closed-ref.html" />
<details id="details" open>
<summary>I'm a summary</summary>
<span>I'm a node</span>
</details>
<script>
details.removeAttribute("open");
</script>