From 3faff34bf6a290e4df1c73f92e8c7d992a78a8e0 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sat, 20 Jul 2024 11:05:20 +0200 Subject: [PATCH] LibWeb: Make details and summary elements display:block in the UA style This is the expected behavior per the HTML spec. Fixes an issue where styling these elements wouldn't have the expected effect unless you also set the display property. --- .../LibWeb/Layout/expected/details-closed.txt | 26 ++++++------ Tests/LibWeb/Layout/expected/details-open.txt | 40 +++++++++---------- .../details-summary-default-ua-style.txt | 19 +++++++++ .../details-summary-default-ua-style.html | 6 +++ Userland/Libraries/LibWeb/CSS/Default.css | 6 ++- 5 files changed, 61 insertions(+), 36 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/details-summary-default-ua-style.txt create mode 100644 Tests/LibWeb/Layout/input/details-summary-default-ua-style.html 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;