1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
/*
* Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibGfx/AntiAliasingPainter.h>
#include <LibGfx/StylePainter.h>
#include <LibWeb/Layout/ListItemMarkerBox.h>
#include <LibWeb/Painting/MarkerPaintable.h>
namespace Web::Painting {
JS::NonnullGCPtr<MarkerPaintable> MarkerPaintable::create(Layout::ListItemMarkerBox const& layout_box)
{
return layout_box.heap().allocate_without_realm<MarkerPaintable>(layout_box);
}
MarkerPaintable::MarkerPaintable(Layout::ListItemMarkerBox const& layout_box)
: PaintableBox(layout_box)
{
}
Layout::ListItemMarkerBox const& MarkerPaintable::layout_box() const
{
return static_cast<Layout::ListItemMarkerBox const&>(layout_node());
}
constexpr float sin_60_deg = 0.866025403f;
void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
{
if (phase == PaintPhase::Overlay)
PaintableBox::paint(context, phase);
if (phase != PaintPhase::Foreground)
return;
// FIXME: All this does is round to the nearest whole CSS pixel, but it's goofy.
CSSPixelRect enclosing = absolute_rect().to_type<double>().to_type<float>().to_rounded<float>().to_type<CSSPixels>();
auto device_enclosing = context.enclosing_device_rect(enclosing);
CSSPixels marker_width = enclosing.height() / 2.0;
if (auto const* list_style_image = layout_box().list_style_image()) {
CSSPixelRect image_rect {
0, 0,
list_style_image->natural_width().value_or(marker_width.value()),
list_style_image->natural_height().value_or(marker_width.value())
};
image_rect.center_within(enclosing);
auto device_image_rect = context.enclosing_device_rect(image_rect);
list_style_image->resolve_for_size(layout_box(), image_rect.size());
list_style_image->paint(context, device_image_rect, computed_values().image_rendering());
return;
}
CSSPixelRect marker_rect { 0, 0, marker_width, marker_width };
marker_rect.center_within(enclosing);
auto device_marker_rect = context.enclosing_device_rect(marker_rect);
float left = device_marker_rect.x().value();
float right = left + device_marker_rect.width().value();
float top = device_marker_rect.y().value();
float bottom = top + device_marker_rect.height().value();
auto color = computed_values().color();
Gfx::AntiAliasingPainter aa_painter { context.painter() };
switch (layout_box().list_style_type()) {
case CSS::ListStyleType::Square:
context.painter().fill_rect(device_marker_rect.to_type<int>(), color);
break;
case CSS::ListStyleType::Circle:
aa_painter.draw_ellipse(device_marker_rect.to_type<int>(), color, 1);
break;
case CSS::ListStyleType::Disc:
aa_painter.fill_ellipse(device_marker_rect.to_type<int>(), color);
break;
case CSS::ListStyleType::DisclosureClosed: {
// https://drafts.csswg.org/css-counter-styles-3/#disclosure-closed
// For the disclosure-open and disclosure-closed counter styles, the marker must be an image or character suitable for indicating the open and closed states of a disclosure widget, such as HTML’s details element.
// FIXME: If the image is directional, it must respond to the writing mode of the element, similar to the bidi-sensitive images feature of the Images 4 module.
// Draw an equilateral triangle pointing right.
auto path = Gfx::Path();
path.move_to({ left, top });
path.line_to({ left + sin_60_deg * (right - left), (top + bottom) / 2 });
path.line_to({ left, bottom });
path.close();
aa_painter.fill_path(path, color);
break;
}
case CSS::ListStyleType::DisclosureOpen: {
// https://drafts.csswg.org/css-counter-styles-3/#disclosure-open
// For the disclosure-open and disclosure-closed counter styles, the marker must be an image or character suitable for indicating the open and closed states of a disclosure widget, such as HTML’s details element.
// FIXME: If the image is directional, it must respond to the writing mode of the element, similar to the bidi-sensitive images feature of the Images 4 module.
// Draw an equilateral triangle pointing down.
auto path = Gfx::Path();
path.move_to({ left, top });
path.line_to({ right, top });
path.line_to({ (left + right) / 2, top + sin_60_deg * (bottom - top) });
path.close();
aa_painter.fill_path(path, color);
break;
}
case CSS::ListStyleType::Decimal:
case CSS::ListStyleType::DecimalLeadingZero:
case CSS::ListStyleType::LowerAlpha:
case CSS::ListStyleType::LowerLatin:
case CSS::ListStyleType::LowerRoman:
case CSS::ListStyleType::UpperAlpha:
case CSS::ListStyleType::UpperLatin:
case CSS::ListStyleType::UpperRoman:
if (layout_box().text().is_null())
break;
// FIXME: This should use proper text layout logic!
// This does not line up with the text in the <li> element which looks very sad :(
context.painter().draw_text(device_enclosing.to_type<int>(), layout_box().text(), layout_box().scaled_font(context), Gfx::TextAlignment::Center);
break;
case CSS::ListStyleType::None:
return;
default:
VERIFY_NOT_REACHED();
}
}
}
|
