mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-23 16:40:03 +00:00
115e5f42af
While 788d5368a7 took care of better text
marker positioning, this improves graphical marker positioning instead.
By looking at how Firefox and Chrome render markers, it's clear that
there are three parts to positioning a graphical marker:
* The containing space that the marker resides in;
* The marker dimensions;
* The distance between the marker and the start of the list item.
The space that the marker can be contained in, is the area to the left
of the list item with a height of the marker's line-height. The marker
dimensions are relative to the marker's font's pixel size: most of them
are a square at 35% of the font size, but the disclosure markers are
sized at 50% instead. Finally, the marker distance is always gauged at
50% of the font size.
So for example, a list item with `list-style-type: disc` and `font-size:
20px`, has 10px between its start and the right side of the marker, and
the marker's dimensions are 7x7.
The percentages I've chosen closely resemble how Firefox lays out its
list item markers.
190 lines
12 KiB
Text
190 lines
12 KiB
Text
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|
BlockContainer <html> at (0,0) content-size 800x400 [BFC] children: not-inline
|
|
BlockContainer <body> at (8,16) content-size 784x368 children: not-inline
|
|
BlockContainer <ol> at (48,16) content-size 744x368 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,16) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,16) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 3, rect: [48,16 29.8125x18] baseline: 13.796875
|
|
"One"
|
|
ListItemMarkerBox <(anonymous)> at (29,17) content-size 18.6875x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,34) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,34) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 10, rect: [48,34 90.796875x18] baseline: 13.796875
|
|
"Twenty-two"
|
|
ListItemMarkerBox <(anonymous)> at (18,35) content-size 29.96875x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,52) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <div> at (48,52) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 12, rect: [48,52 100.609375x18] baseline: 13.796875
|
|
"Ignore these"
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,70) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <div> at (48,70) content-size 744x72 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,70) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 2, rect: [48,70 24.890625x18] baseline: 13.796875
|
|
"+A"
|
|
TextNode <#text>
|
|
BlockContainer <div> at (48,88) content-size 744x54 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,88) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 2, rect: [48,88 19.96875x18] baseline: 13.796875
|
|
"+B"
|
|
TextNode <#text>
|
|
BlockContainer <div> at (48,106) content-size 744x36 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,106) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 2, rect: [48,106 20.9375x18] baseline: 13.796875
|
|
"+C"
|
|
TextNode <#text>
|
|
ListItemBox <div> at (48,124) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 12, rect: [48,124 104.78125x18] baseline: 13.796875
|
|
"Twenty-three"
|
|
ListItemMarkerBox <(anonymous)> at (18,125) content-size 30.25x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,142) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,142) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <p> at (48,158) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 21, rect: [48,158 177.125x18] baseline: 13.796875
|
|
"Ignore this paragraph"
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,192) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <p> at (48,192) content-size 744x18 children: inline
|
|
InlineNode <span>
|
|
frag 0 from TextNode start: 0, length: 1, rect: [48,192 11.5625x18] baseline: 13.796875
|
|
"X"
|
|
TextNode <#text>
|
|
InlineNode <span>
|
|
frag 0 from TextNode start: 0, length: 1, rect: [59.5625,192 11.09375x18] baseline: 13.796875
|
|
"Y"
|
|
TextNode <#text>
|
|
InlineNode <span>
|
|
frag 0 from TextNode start: 0, length: 1, rect: [70.65625,192 12.609375x18] baseline: 13.796875
|
|
"Z"
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,226) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 11, rect: [48,226 97.75x18] baseline: 13.796875
|
|
"Twenty-four"
|
|
ListItemMarkerBox <(anonymous)> at (19,227) content-size 28.90625x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,244) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <div> at (48,244) content-size 744x70 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,244) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 38, rect: [48,244 311.09375x18] baseline: 13.796875
|
|
"List item paragraph inside nested divs"
|
|
TextNode <#text>
|
|
BlockContainer <div> at (48,262) content-size 744x52 children: not-inline
|
|
BlockContainer <(anonymous)> at (48,262) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 4, rect: [48,262 35.671875x18] baseline: 13.796875
|
|
"2025"
|
|
TextNode <#text>
|
|
ListItemBox <p> at (48,296) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 11, rect: [48,296 90.28125x18] baseline: 13.796875
|
|
"Twenty-five"
|
|
ListItemMarkerBox <(anonymous)> at (18,297) content-size 29.609375x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,330) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,330) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,330) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 10, rect: [48,330 85.96875x18] baseline: 13.796875
|
|
"Twenty-six"
|
|
ListItemMarkerBox <(anonymous)> at (18,331) content-size 29.890625x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,348) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <span> at (48,348) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 12, rect: [48,348 106.953125x18] baseline: 13.796875
|
|
"Twenty-seven"
|
|
ListItemMarkerBox <(anonymous)> at (18,349) content-size 29.875x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,366) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
ListItemBox <li> at (48,366) content-size 744x18 children: inline
|
|
frag 0 from TextNode start: 0, length: 12, rect: [48,366 99.359375x18] baseline: 13.796875
|
|
"Twenty-eight"
|
|
ListItemMarkerBox <(anonymous)> at (17,367) content-size 30.640625x16 children: not-inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (48,384) content-size 744x0 children: inline
|
|
TextNode <#text>
|
|
BlockContainer <(anonymous)> at (8,400) content-size 784x0 children: inline
|
|
TextNode <#text>
|
|
|
|
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x400]
|
|
PaintableWithLines (BlockContainer<BODY>) [8,16 784x368]
|
|
PaintableWithLines (BlockContainer<OL>) [8,16 784x368]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,16 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,16 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [29,17 18.6875x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,34 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,34 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [18,35 29.96875x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,52 744x0]
|
|
PaintableWithLines (BlockContainer<DIV>) [48,52 744x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,70 744x0]
|
|
PaintableWithLines (BlockContainer<DIV>) [48,70 744x72]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,70 744x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer<DIV>) [48,88 744x54]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,88 744x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer<DIV>) [48,106 744x36]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,106 744x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (ListItemBox<DIV>) [48,124 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [18,125 30.25x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,142 744x0]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,142 744x0]
|
|
PaintableWithLines (BlockContainer<P>) [48,158 744x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,192 744x0]
|
|
PaintableWithLines (BlockContainer<P>) [48,192 744x18]
|
|
PaintableWithLines (InlineNode<SPAN>) [48,192 35.265625x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (InlineNode<SPAN>) [59.5625,192 23.703125x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (InlineNode<SPAN>) [70.65625,192 12.609375x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (ListItemBox<LI>) [48,226 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [19,227 28.90625x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,244 744x0]
|
|
PaintableWithLines (BlockContainer<DIV>) [48,244 744x70]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,244 744x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer<DIV>) [48,262 744x52]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,262 744x18]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (ListItemBox<P>) [48,296 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [18,297 29.609375x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,330 744x0]
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,330 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,330 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [18,331 29.890625x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,348 744x0]
|
|
PaintableWithLines (ListItemBox<SPAN>) [48,348 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [18,349 29.875x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,366 744x0]
|
|
PaintableWithLines (ListItemBox<LI>) [48,366 744x18]
|
|
MarkerPaintable (ListItemMarkerBox(anonymous)) [17,367 30.640625x16]
|
|
TextPaintable (TextNode<#text>)
|
|
PaintableWithLines (BlockContainer(anonymous)) [48,384 744x0]
|
|
PaintableWithLines (BlockContainer(anonymous)) [8,400 784x0]
|
|
|
|
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
|
|
SC for BlockContainer<HTML> [0,0 800x400] [children: 0] (z-index: auto)
|