mirrors/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-21 12:05:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Make details and summary elements display:block in the UA style

Browse source 
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.
This commit is contained in:
Andreas Kling 2024-07-20 11:05:20 +02:00 • committed by Andreas Kling
parent 4b9649282e
commit 3faff34bf6
Notes: github-actions[bot] 2024-07-20 11:10:24 +00:00
5 changed files with 61 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
Tests/LibWeb/Layout/expected/details-closed.txt
View file

@ -1,24 +1,22 @@
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 784x17 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
InlineNode <details>
ListItemBox <summary> 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 <slot> at (8,25) content-size 784x0 children: not-inline
BlockContainer <details> at (8,8) content-size 784x17 children: not-inline
ListItemBox <summary> 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 <slot> 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<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
InlinePaintable (InlineNode<DETAILS>)
PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
PaintableWithLines (BlockContainer<SLOT>) [8,25 784x0]
PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x17]
PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
PaintableWithLines (BlockContainer<SLOT>) [8,25 784x0]
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]

40
Tests/LibWeb/Layout/expected/details-open.txt
View file

@ -1,33 +1,31 @@
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 784x34 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
InlineNode <details>
ListItemBox <summary> 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 <slot> at (8,25) content-size 784x17 children: inline
TextNode <#text>
TextNode <#text>
InlineNode <span>
frag 0 from TextNode start: 0, length: 10, rect: [8,25 82.3125x17] baseline: 13.296875
"I'm a node"
BlockContainer <details> at (8,8) content-size 784x34 children: not-inline
ListItemBox <summary> 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 <slot> at (8,25) content-size 784x17 children: inline
TextNode <#text>
TextNode <#text>
InlineNode <span>
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<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
InlinePaintable (InlineNode<DETAILS>)
PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
PaintableWithLines (BlockContainer<SLOT>) [8,25 784x17]
InlinePaintable (InlineNode<SPAN>)
PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x34]
PaintableWithLines (ListItemBox<SUMMARY>) [32,8 760x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [8,8 12x17]
PaintableWithLines (BlockContainer<SLOT>) [8,25 784x17]
InlinePaintable (InlineNode<SPAN>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0]

19
Tests/LibWeb/Layout/expected/details-summary-default-ua-style.txt Normal file
View file

@ -0,0 +1,19 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x153 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x137 children: not-inline
BlockContainer <details> at (68,68) content-size 664x17 children: not-inline
ListItemBox <summary> 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 <slot> at (68,85) content-size 664x0 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x153]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x137]
PaintableWithLines (BlockContainer<DETAILS>) [8,8 784x137]
PaintableWithLines (ListItemBox<SUMMARY>) [92,68 640x17]
TextPaintable (TextNode<#text>)
MarkerPaintable (ListItemMarkerBox(anonymous)) [68,68 12x17]
PaintableWithLines (BlockContainer<SLOT>) [68,85 664x0]

6
Tests/LibWeb/Layout/input/details-summary-default-ua-style.html Normal file
View file

@ -0,0 +1,6 @@
<!doctype html><style>
details {
border: 10px solid black;
padding: 50px;
}
</style><details><summary>hello

6
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -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;