diff --git a/Tests/LibWeb/Layout/expected/details-closed.txt b/Tests/LibWeb/Layout/expected/details-closed.txt
index 1a08c616add..337b6538d5a 100644
--- a/Tests/LibWeb/Layout/expected/details-closed.txt
+++ b/Tests/LibWeb/Layout/expected/details-closed.txt
@@ -1,24 +1,22 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer
at (8,8) content-size 784x17 children: not-inline
- BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
- InlineNode
- ListItemBox at (32,8) content-size 760x17 children: inline
- frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
- "I'm a summary"
- TextNode <#text>
- ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
- BlockContainer at (8,25) content-size 784x0 children: not-inline
+ BlockContainer at (8,8) content-size 784x17 children: not-inline
+ ListItemBox at (32,8) content-size 760x17 children: inline
+ frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
+ "I'm a summary"
+ TextNode <#text>
+ ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
+ BlockContainer at (8,25) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer) [0,0 800x600]
PaintableWithLines (BlockContainer) [8,8 784x17]
- PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
- InlinePaintable (InlineNode)
- PaintableWithLines (ListItemBox) [32,8 760x17]
- TextPaintable (TextNode<#text>)
- MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
- PaintableWithLines (BlockContainer) [8,25 784x0]
+ PaintableWithLines (BlockContainer) [8,8 784x17]
+ PaintableWithLines (ListItemBox) [32,8 760x17]
+ TextPaintable (TextNode<#text>)
+ MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
+ PaintableWithLines (BlockContainer) [8,25 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]
diff --git a/Tests/LibWeb/Layout/expected/details-open.txt b/Tests/LibWeb/Layout/expected/details-open.txt
index 21733d43cb2..9db76021564 100644
--- a/Tests/LibWeb/Layout/expected/details-open.txt
+++ b/Tests/LibWeb/Layout/expected/details-open.txt
@@ -1,33 +1,31 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer at (8,8) content-size 784x34 children: not-inline
- BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
- InlineNode
- ListItemBox at (32,8) content-size 760x17 children: inline
- frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
- "I'm a summary"
- TextNode <#text>
- ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
- BlockContainer at (8,25) content-size 784x17 children: inline
- TextNode <#text>
- TextNode <#text>
- InlineNode
- frag 0 from TextNode start: 0, length: 10, rect: [8,25 82.3125x17] baseline: 13.296875
- "I'm a node"
+ BlockContainer at (8,8) content-size 784x34 children: not-inline
+ ListItemBox at (32,8) content-size 760x17 children: inline
+ frag 0 from TextNode start: 0, length: 13, rect: [32,8 114.625x17] baseline: 13.296875
+ "I'm a summary"
+ TextNode <#text>
+ ListItemMarkerBox <(anonymous)> at (8,8) content-size 12x17 children: not-inline
+ BlockContainer at (8,25) content-size 784x17 children: inline
+ TextNode <#text>
+ TextNode <#text>
+ InlineNode
+ frag 0 from TextNode start: 0, length: 10, rect: [8,25 82.3125x17] baseline: 13.296875
+ "I'm a node"
+ TextNode <#text>
TextNode <#text>
- TextNode <#text>
BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer) [0,0 800x600]
PaintableWithLines (BlockContainer) [8,8 784x34]
- PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
- InlinePaintable (InlineNode)
- PaintableWithLines (ListItemBox) [32,8 760x17]
- TextPaintable (TextNode<#text>)
- MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
- PaintableWithLines (BlockContainer) [8,25 784x17]
- InlinePaintable (InlineNode)
+ PaintableWithLines (BlockContainer) [8,8 784x34]
+ PaintableWithLines (ListItemBox) [32,8 760x17]
TextPaintable (TextNode<#text>)
+ MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
+ PaintableWithLines (BlockContainer) [8,25 784x17]
+ InlinePaintable (InlineNode)
+ TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0]
diff --git a/Tests/LibWeb/Layout/expected/details-summary-default-ua-style.txt b/Tests/LibWeb/Layout/expected/details-summary-default-ua-style.txt
new file mode 100644
index 00000000000..ec464d6a665
--- /dev/null
+++ b/Tests/LibWeb/Layout/expected/details-summary-default-ua-style.txt
@@ -0,0 +1,19 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+ BlockContainer at (0,0) content-size 800x153 [BFC] children: not-inline
+ BlockContainer at (8,8) content-size 784x137 children: not-inline
+ BlockContainer at (68,68) content-size 664x17 children: not-inline
+ ListItemBox at (92,68) content-size 640x17 children: inline
+ frag 0 from TextNode start: 0, length: 5, rect: [92,68 36.84375x17] baseline: 13.296875
+ "hello"
+ TextNode <#text>
+ ListItemMarkerBox <(anonymous)> at (68,68) content-size 12x17 children: not-inline
+ BlockContainer at (68,85) content-size 664x0 children: not-inline
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+ PaintableWithLines (BlockContainer) [0,0 800x153]
+ PaintableWithLines (BlockContainer) [8,8 784x137]
+ PaintableWithLines (BlockContainer) [8,8 784x137]
+ PaintableWithLines (ListItemBox) [92,68 640x17]
+ TextPaintable (TextNode<#text>)
+ MarkerPaintable (ListItemMarkerBox(anonymous)) [68,68 12x17]
+ PaintableWithLines (BlockContainer) [68,85 664x0]
diff --git a/Tests/LibWeb/Layout/input/details-summary-default-ua-style.html b/Tests/LibWeb/Layout/input/details-summary-default-ua-style.html
new file mode 100644
index 00000000000..fa1c61ded7d
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/details-summary-default-ua-style.html
@@ -0,0 +1,6 @@
+hello
diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css
index 4d57cc5444b..d5a11860e0e 100644
--- a/Userland/Libraries/LibWeb/CSS/Default.css
+++ b/Userland/Libraries/LibWeb/CSS/Default.css
@@ -801,10 +801,14 @@ input[type=image i][align=bottom i], object[align=bottom i] {
vertical-align: bottom;
}
-/* 15.5.4 The details and summary elements
+/* 15.5.5 The details and summary elements
* https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements
*/
+details, summary {
+ display: block;
+}
+
details > summary:first-of-type {
display: list-item;
counter-increment: list-item 0;