2020-06-07 17:55:46 +02:00
|
|
|
/*
|
|
|
|
* Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
|
2021-08-09 21:28:56 +02:00
|
|
|
* Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
|
2023-03-30 15:46:05 +01:00
|
|
|
* Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
|
2020-06-07 17:55:46 +02:00
|
|
|
*
|
2021-04-22 01:24:48 -07:00
|
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
2020-06-07 17:55:46 +02:00
|
|
|
*/
|
|
|
|
|
2021-06-12 00:50:16 +02:00
|
|
|
#include <AK/NonnullOwnPtr.h>
|
|
|
|
#include <AK/Variant.h>
|
2022-04-09 09:28:38 +02:00
|
|
|
#include <LibGfx/Font/Font.h>
|
2021-09-23 13:13:51 +02:00
|
|
|
#include <LibGfx/Rect.h>
|
2020-06-07 17:55:46 +02:00
|
|
|
#include <LibWeb/CSS/Length.h>
|
2022-01-14 12:23:54 +00:00
|
|
|
#include <LibWeb/CSS/Percentage.h>
|
2020-06-07 17:55:46 +02:00
|
|
|
#include <LibWeb/DOM/Document.h>
|
2021-11-18 15:01:28 +01:00
|
|
|
#include <LibWeb/HTML/BrowsingContext.h>
|
2020-07-26 15:08:16 +02:00
|
|
|
#include <LibWeb/HTML/HTMLHtmlElement.h>
|
2020-06-07 17:55:46 +02:00
|
|
|
|
2020-07-26 20:01:35 +02:00
|
|
|
namespace Web::CSS {
|
2020-06-07 17:55:46 +02:00
|
|
|
|
2021-09-30 22:57:35 +02:00
|
|
|
Length::Length(int value, Type type)
|
|
|
|
: m_type(type)
|
|
|
|
, m_value(value)
|
|
|
|
{
|
|
|
|
}
|
|
|
|
Length::Length(float value, Type type)
|
|
|
|
: m_type(type)
|
|
|
|
, m_value(value)
|
|
|
|
{
|
|
|
|
}
|
2022-09-13 17:42:39 +02:00
|
|
|
Length::~Length() = default;
|
2021-09-30 22:57:35 +02:00
|
|
|
|
|
|
|
Length Length::make_auto()
|
|
|
|
{
|
|
|
|
return Length(0, Type::Auto);
|
|
|
|
}
|
2022-01-14 12:23:54 +00:00
|
|
|
|
2022-10-24 17:16:08 +01:00
|
|
|
Length Length::make_px(CSSPixels value)
|
|
|
|
{
|
|
|
|
return Length(value.value(), Type::Px);
|
|
|
|
}
|
|
|
|
|
2022-01-14 12:23:54 +00:00
|
|
|
Length Length::percentage_of(Percentage const& percentage) const
|
|
|
|
{
|
2022-02-18 16:50:17 +00:00
|
|
|
if (is_auto()) {
|
|
|
|
dbgln("Attempting to get percentage of an auto length, this seems wrong? But for now we just return the original length.");
|
2022-01-14 12:23:54 +00:00
|
|
|
return *this;
|
|
|
|
}
|
|
|
|
|
|
|
|
return Length { percentage.as_fraction() * raw_value(), m_type };
|
|
|
|
}
|
|
|
|
|
2022-02-18 16:17:27 +00:00
|
|
|
Length Length::resolved(Layout::Node const& layout_node) const
|
2021-09-30 22:57:35 +02:00
|
|
|
{
|
|
|
|
if (is_relative())
|
|
|
|
return make_px(to_px(layout_node));
|
2022-07-06 13:05:31 +02:00
|
|
|
if (!isfinite(m_value))
|
|
|
|
return make_auto();
|
2021-09-30 22:57:35 +02:00
|
|
|
return *this;
|
|
|
|
}
|
|
|
|
|
2023-03-17 23:08:45 +01:00
|
|
|
CSSPixels Length::relative_length_to_px(CSSPixelRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, CSSPixels font_size, CSSPixels root_font_size, CSSPixels line_height, CSSPixels root_line_height) const
|
2020-06-07 17:55:46 +02:00
|
|
|
{
|
|
|
|
switch (m_type) {
|
|
|
|
case Type::Em:
|
2022-02-21 16:24:12 +01:00
|
|
|
return m_value * font_size;
|
2023-04-24 14:34:44 +01:00
|
|
|
case Type::Rem:
|
|
|
|
return m_value * root_font_size;
|
|
|
|
case Type::Ex:
|
|
|
|
return m_value * font_metrics.x_height;
|
2021-08-05 16:31:15 +02:00
|
|
|
case Type::Ch:
|
2023-03-03 19:32:19 +01:00
|
|
|
// FIXME: Use layout_node.font().pixel_size() when writing-mode is not horizontal-tb (it has to be implemented first)
|
2022-03-28 12:01:10 +02:00
|
|
|
return m_value * (font_metrics.advance_of_ascii_zero + font_metrics.glyph_spacing);
|
2023-04-24 14:34:44 +01:00
|
|
|
case Type::Lh:
|
|
|
|
return m_value * line_height;
|
|
|
|
case Type::Rlh:
|
|
|
|
return m_value * root_line_height;
|
2020-09-08 20:39:09 +02:00
|
|
|
case Type::Vw:
|
2021-09-23 13:13:51 +02:00
|
|
|
return viewport_rect.width() * (m_value / 100);
|
2020-09-08 20:39:09 +02:00
|
|
|
case Type::Vh:
|
2021-09-23 13:13:51 +02:00
|
|
|
return viewport_rect.height() * (m_value / 100);
|
|
|
|
case Type::Vmin:
|
|
|
|
return min(viewport_rect.width(), viewport_rect.height()) * (m_value / 100);
|
|
|
|
case Type::Vmax:
|
|
|
|
return max(viewport_rect.width(), viewport_rect.height()) * (m_value / 100);
|
2020-06-07 17:55:46 +02:00
|
|
|
default:
|
2021-02-23 20:42:32 +01:00
|
|
|
VERIFY_NOT_REACHED();
|
2020-06-07 17:55:46 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-08 17:29:52 +00:00
|
|
|
CSSPixels Length::to_px(Layout::Node const& layout_node) const
|
2021-09-23 13:13:51 +02:00
|
|
|
{
|
2022-03-24 18:02:41 +01:00
|
|
|
if (is_absolute())
|
|
|
|
return absolute_length_to_px();
|
|
|
|
|
2021-09-23 13:13:51 +02:00
|
|
|
if (!layout_node.document().browsing_context())
|
|
|
|
return 0;
|
2022-11-09 12:32:20 +00:00
|
|
|
auto const& viewport_rect = layout_node.document().browsing_context()->viewport_rect();
|
2021-09-23 13:13:51 +02:00
|
|
|
auto* root_element = layout_node.document().document_element();
|
|
|
|
if (!root_element || !root_element->layout_node())
|
|
|
|
return 0;
|
2023-03-17 23:08:45 +01:00
|
|
|
return to_px(viewport_rect, layout_node.font().pixel_metrics(), layout_node.computed_values().font_size(), root_element->layout_node()->computed_values().font_size(), layout_node.line_height(), root_element->layout_node()->line_height());
|
2021-09-23 13:13:51 +02:00
|
|
|
}
|
|
|
|
|
2023-01-06 19:02:26 +01:00
|
|
|
ErrorOr<String> Length::to_string() const
|
2022-02-21 17:35:52 +00:00
|
|
|
{
|
|
|
|
if (is_auto())
|
2023-02-25 16:40:37 +01:00
|
|
|
return "auto"_string;
|
2023-01-06 19:02:26 +01:00
|
|
|
return String::formatted("{}{}", m_value, unit_name());
|
2022-02-21 17:35:52 +00:00
|
|
|
}
|
|
|
|
|
2022-04-01 20:58:27 +03:00
|
|
|
char const* Length::unit_name() const
|
2020-06-07 17:55:46 +02:00
|
|
|
{
|
|
|
|
switch (m_type) {
|
2023-04-24 14:34:44 +01:00
|
|
|
case Type::Em:
|
|
|
|
return "em";
|
|
|
|
case Type::Rem:
|
|
|
|
return "rem";
|
|
|
|
case Type::Ex:
|
|
|
|
return "ex";
|
|
|
|
case Type::Ch:
|
|
|
|
return "ch";
|
|
|
|
case Type::Lh:
|
|
|
|
return "lh";
|
|
|
|
case Type::Rlh:
|
|
|
|
return "rlh";
|
|
|
|
case Type::Vw:
|
|
|
|
return "vw";
|
|
|
|
case Type::Vh:
|
|
|
|
return "vh";
|
|
|
|
case Type::Vmin:
|
|
|
|
return "vmin";
|
|
|
|
case Type::Vmax:
|
|
|
|
return "vmax";
|
2020-09-29 19:06:58 +01:00
|
|
|
case Type::Cm:
|
|
|
|
return "cm";
|
|
|
|
case Type::Mm:
|
|
|
|
return "mm";
|
|
|
|
case Type::Q:
|
|
|
|
return "Q";
|
2023-04-24 14:34:44 +01:00
|
|
|
case Type::In:
|
|
|
|
return "in";
|
|
|
|
case Type::Pt:
|
|
|
|
return "pt";
|
2020-10-05 16:18:07 +01:00
|
|
|
case Type::Pc:
|
|
|
|
return "pc";
|
2023-04-24 14:34:44 +01:00
|
|
|
case Type::Px:
|
|
|
|
return "px";
|
2020-06-07 17:55:46 +02:00
|
|
|
case Type::Auto:
|
|
|
|
return "auto";
|
|
|
|
}
|
2021-02-23 20:42:32 +01:00
|
|
|
VERIFY_NOT_REACHED();
|
2020-06-07 17:55:46 +02:00
|
|
|
}
|
|
|
|
|
2022-02-22 12:10:48 +00:00
|
|
|
Optional<Length::Type> Length::unit_from_name(StringView name)
|
|
|
|
{
|
2023-04-24 14:34:44 +01:00
|
|
|
if (name.equals_ignoring_ascii_case("em"sv)) {
|
|
|
|
return Length::Type::Em;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("rem"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Rem;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("ex"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Ex;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("ch"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Ch;
|
2023-04-24 14:34:44 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("lh"sv)) {
|
|
|
|
return Length::Type::Lh;
|
|
|
|
} else if (name.equals_ignoring_ascii_case("rlh"sv)) {
|
|
|
|
return Length::Type::Rlh;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("vw"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Vw;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("vh"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Vh;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("vmin"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Vmin;
|
2023-04-24 14:34:44 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("vmax"sv)) {
|
|
|
|
return Length::Type::Vmax;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("cm"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Cm;
|
2023-04-24 14:34:44 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("mm"sv)) {
|
|
|
|
return Length::Type::Mm;
|
2023-03-10 08:48:54 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("Q"sv)) {
|
2022-02-22 12:10:48 +00:00
|
|
|
return Length::Type::Q;
|
2023-04-24 14:34:44 +01:00
|
|
|
} else if (name.equals_ignoring_ascii_case("in"sv)) {
|
|
|
|
return Length::Type::In;
|
|
|
|
} else if (name.equals_ignoring_ascii_case("pt"sv)) {
|
|
|
|
return Length::Type::Pt;
|
|
|
|
} else if (name.equals_ignoring_ascii_case("pc"sv)) {
|
|
|
|
return Length::Type::Pc;
|
|
|
|
} else if (name.equals_ignoring_ascii_case("px"sv)) {
|
|
|
|
return Length::Type::Px;
|
2022-02-22 12:10:48 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return {};
|
|
|
|
}
|
|
|
|
|
2023-03-30 15:01:23 +01:00
|
|
|
Optional<Length> Length::absolutize(CSSPixelRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, CSSPixels font_size, CSSPixels root_font_size, CSSPixels line_height, CSSPixels root_line_height) const
|
|
|
|
{
|
|
|
|
if (is_px())
|
|
|
|
return {};
|
|
|
|
if (is_absolute() || is_relative()) {
|
|
|
|
auto px = to_px(viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height);
|
|
|
|
return CSS::Length::make_px(px);
|
|
|
|
}
|
|
|
|
return {};
|
|
|
|
}
|
|
|
|
|
|
|
|
Length Length::absolutized(CSSPixelRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, CSSPixels font_size, CSSPixels root_font_size, CSSPixels line_height, CSSPixels root_line_height) const
|
|
|
|
{
|
|
|
|
return absolutize(viewport_rect, font_metrics, font_size, root_font_size, line_height, root_line_height).value_or(*this);
|
|
|
|
}
|
|
|
|
|
2020-06-07 17:55:46 +02:00
|
|
|
}
|