1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 05:28:11 +00:00
serenity/Userland/Libraries/LibWeb/Layout/ListItemMarkerBox.cpp
Tobias Christiansen 5338708091 LibWeb: Display <ol> and respect list-style-type in <ul>
In the ListItemMarkerBox render the correct thing when painting.
This covers decimal counting for ordered lists as well as square,
disc, and circle for unordered lists. Thus all currently supported
list-style-types are displayed correctly.

This closes #2059
2021-04-20 18:29:19 +02:00

83 lines
3.3 KiB
C++

/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Tobias Christiansen <tobi@tobyase.de>
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* 1. Redistributions of source code must retain the above copyright notice, this
* list of conditions and the following disclaimer.
*
* 2. Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
* FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
#include <LibGfx/Painter.h>
#include <LibWeb/Layout/ListItemMarkerBox.h>
namespace Web::Layout {
ListItemMarkerBox::ListItemMarkerBox(DOM::Document& document, CSS::ListStyleType style_type, size_t index)
: Box(document, nullptr, CSS::StyleProperties::create())
, m_list_style_type(style_type)
, m_index(index)
{
}
ListItemMarkerBox::~ListItemMarkerBox()
{
}
void ListItemMarkerBox::paint(PaintContext& context, PaintPhase phase)
{
if (phase != PaintPhase::Foreground)
return;
// FIXME: It would be nicer to not have to go via the parent here to get our inherited style.
auto color = parent()->computed_values().color();
auto enclosing = enclosing_int_rect(absolute_rect());
int marker_width = (int)enclosing.height() / 2;
Gfx::IntRect marker_rect { 0, 0, marker_width, marker_width };
marker_rect.center_within(enclosing);
switch (m_list_style_type) {
case CSS::ListStyleType::Square:
context.painter().fill_rect(marker_rect, color);
break;
case CSS::ListStyleType::Circle:
// For some reason for draw_ellipse() the ellipse is outside of the rect while for fill_ellipse() the ellipse is inside.
// Scale the marker_rect with sqrt(2) to get an ellipse arc (circle) that appears as if it was inside of the marker_rect.
marker_rect.set_height(marker_rect.height() / 1.41);
marker_rect.set_width(marker_rect.width() / 1.41);
marker_rect.center_within(enclosing);
context.painter().draw_ellipse_intersecting(marker_rect, color);
break;
case CSS::ListStyleType::Decimal:
context.painter().draw_text(enclosing, String::formatted("{}.", m_index), Gfx::TextAlignment::Center);
break;
case CSS::ListStyleType::Disc:
context.painter().fill_ellipse(marker_rect, color);
break;
case CSS::ListStyleType::None:
return;
default:
VERIFY_NOT_REACHED();
}
}
}