2020-01-18 09:38:21 +01:00
|
|
|
/*
|
2024-08-02 14:28:24 +02:00
|
|
|
* Copyright (c) 2018-2024, Andreas Kling <andreas@ladybird.org>
|
2023-02-14 15:07:50 +00:00
|
|
|
* Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
|
2020-01-18 09:38:21 +01:00
|
|
|
*
|
2021-04-22 01:24:48 -07:00
|
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
2020-01-18 09:38:21 +01:00
|
|
|
*/
|
|
|
|
|
2019-07-01 17:17:32 +02:00
|
|
|
#pragma once
|
|
|
|
|
2023-01-06 19:02:26 +01:00
|
|
|
#include <AK/String.h>
|
2021-09-23 13:13:51 +02:00
|
|
|
#include <LibGfx/Forward.h>
|
2023-06-02 12:39:39 +02:00
|
|
|
#include <LibGfx/Rect.h>
|
2020-06-07 17:55:46 +02:00
|
|
|
#include <LibWeb/Forward.h>
|
2022-10-24 17:16:08 +01:00
|
|
|
#include <LibWeb/PixelUnits.h>
|
2019-07-03 07:55:22 +02:00
|
|
|
|
2020-07-26 20:01:35 +02:00
|
|
|
namespace Web::CSS {
|
2020-03-07 10:27:02 +01:00
|
|
|
|
2019-07-01 17:17:32 +02:00
|
|
|
class Length {
|
|
|
|
public:
|
|
|
|
enum class Type {
|
2023-04-24 14:34:44 +01:00
|
|
|
// Font-relative
|
|
|
|
Em,
|
|
|
|
Rem,
|
|
|
|
Ex,
|
2023-04-28 16:58:12 +01:00
|
|
|
Rex,
|
2023-04-28 17:10:30 +01:00
|
|
|
Cap,
|
|
|
|
Rcap,
|
2023-04-24 14:34:44 +01:00
|
|
|
Ch,
|
2023-04-28 16:58:12 +01:00
|
|
|
Rch,
|
2023-04-28 17:18:18 +01:00
|
|
|
Ic,
|
|
|
|
Ric,
|
2023-04-24 14:34:44 +01:00
|
|
|
Lh,
|
|
|
|
Rlh,
|
|
|
|
|
|
|
|
// Viewport-relative
|
|
|
|
Vw,
|
2023-04-28 17:46:49 +01:00
|
|
|
Svw,
|
|
|
|
Lvw,
|
|
|
|
Dvw,
|
2023-04-24 14:34:44 +01:00
|
|
|
Vh,
|
2023-04-28 17:46:49 +01:00
|
|
|
Svh,
|
|
|
|
Lvh,
|
|
|
|
Dvh,
|
2023-04-28 19:50:09 +01:00
|
|
|
Vi,
|
|
|
|
Svi,
|
|
|
|
Lvi,
|
|
|
|
Dvi,
|
|
|
|
Vb,
|
|
|
|
Svb,
|
|
|
|
Lvb,
|
|
|
|
Dvb,
|
2023-04-24 14:34:44 +01:00
|
|
|
Vmin,
|
2023-04-28 17:46:49 +01:00
|
|
|
Svmin,
|
|
|
|
Lvmin,
|
|
|
|
Dvmin,
|
2023-04-24 14:34:44 +01:00
|
|
|
Vmax,
|
2023-04-28 17:46:49 +01:00
|
|
|
Svmax,
|
|
|
|
Lvmax,
|
|
|
|
Dvmax,
|
2023-04-24 14:34:44 +01:00
|
|
|
|
|
|
|
// Absolute
|
2020-09-29 19:06:58 +01:00
|
|
|
Cm,
|
|
|
|
Mm,
|
|
|
|
Q,
|
2023-04-24 14:34:44 +01:00
|
|
|
In,
|
2020-06-28 15:25:32 +02:00
|
|
|
Pt,
|
2020-10-05 16:18:07 +01:00
|
|
|
Pc,
|
2023-04-24 14:34:44 +01:00
|
|
|
Px,
|
|
|
|
|
|
|
|
// FIXME: Remove auto somehow
|
|
|
|
Auto,
|
2019-07-01 17:17:32 +02:00
|
|
|
};
|
|
|
|
|
2023-04-28 16:29:12 +01:00
|
|
|
struct FontMetrics {
|
2024-01-12 12:39:40 +01:00
|
|
|
FontMetrics(CSSPixels font_size, Gfx::FontPixelMetrics const&);
|
2023-04-28 16:29:12 +01:00
|
|
|
|
|
|
|
CSSPixels font_size;
|
|
|
|
CSSPixels x_height;
|
2023-04-28 17:10:30 +01:00
|
|
|
CSSPixels cap_height;
|
2023-04-28 16:29:12 +01:00
|
|
|
CSSPixels zero_advance;
|
|
|
|
CSSPixels line_height;
|
2025-02-21 16:45:07 +00:00
|
|
|
|
|
|
|
bool operator==(FontMetrics const&) const = default;
|
2023-04-28 16:29:12 +01:00
|
|
|
};
|
|
|
|
|
2022-02-22 12:10:48 +00:00
|
|
|
static Optional<Type> unit_from_name(StringView);
|
|
|
|
|
2023-05-24 10:50:57 +02:00
|
|
|
Length(double value, Type type);
|
2022-09-13 17:42:39 +02:00
|
|
|
~Length();
|
2019-07-01 17:17:32 +02:00
|
|
|
|
2021-09-30 22:57:35 +02:00
|
|
|
static Length make_auto();
|
2025-01-23 16:48:03 +00:00
|
|
|
static Length make_px(double value);
|
2022-10-24 17:16:08 +01:00
|
|
|
static Length make_px(CSSPixels value);
|
2022-01-14 12:23:54 +00:00
|
|
|
Length percentage_of(Percentage const&) const;
|
2020-06-24 11:08:46 +02:00
|
|
|
|
2019-07-01 17:17:32 +02:00
|
|
|
bool is_auto() const { return m_type == Type::Auto; }
|
2022-02-18 20:26:09 +01:00
|
|
|
bool is_px() const { return m_type == Type::Px; }
|
2020-09-29 19:06:58 +01:00
|
|
|
|
|
|
|
bool is_absolute() const
|
|
|
|
{
|
|
|
|
return m_type == Type::Cm
|
|
|
|
|| m_type == Type::Mm
|
2023-04-24 14:56:14 +01:00
|
|
|
|| m_type == Type::Q
|
|
|
|
|| m_type == Type::In
|
2020-09-29 19:06:58 +01:00
|
|
|
|| m_type == Type::Pt
|
2020-10-05 16:18:07 +01:00
|
|
|
|| m_type == Type::Pc
|
2023-04-24 14:56:14 +01:00
|
|
|
|| m_type == Type::Px;
|
2020-09-29 19:06:58 +01:00
|
|
|
}
|
|
|
|
|
2023-04-26 17:37:57 +01:00
|
|
|
bool is_font_relative() const
|
2020-09-08 20:39:09 +02:00
|
|
|
{
|
2023-04-24 14:56:14 +01:00
|
|
|
return m_type == Type::Em
|
2020-09-08 20:39:09 +02:00
|
|
|
|| m_type == Type::Rem
|
2023-04-24 14:56:14 +01:00
|
|
|
|| m_type == Type::Ex
|
2023-04-28 16:58:12 +01:00
|
|
|
|| m_type == Type::Rex
|
2023-04-28 17:10:30 +01:00
|
|
|
|| m_type == Type::Cap
|
|
|
|
|| m_type == Type::Rcap
|
2023-04-24 14:56:14 +01:00
|
|
|
|| m_type == Type::Ch
|
2023-04-28 16:58:12 +01:00
|
|
|
|| m_type == Type::Rch
|
2023-04-28 17:18:18 +01:00
|
|
|
|| m_type == Type::Ic
|
|
|
|
|| m_type == Type::Ric
|
2023-04-24 14:56:14 +01:00
|
|
|
|| m_type == Type::Lh
|
2023-04-26 17:37:57 +01:00
|
|
|
|| m_type == Type::Rlh;
|
|
|
|
}
|
|
|
|
|
|
|
|
bool is_viewport_relative() const
|
|
|
|
{
|
|
|
|
return m_type == Type::Vw
|
2023-04-28 17:46:49 +01:00
|
|
|
|| m_type == Type::Svw
|
|
|
|
|| m_type == Type::Lvw
|
|
|
|
|| m_type == Type::Dvw
|
2023-04-24 14:56:14 +01:00
|
|
|
|| m_type == Type::Vh
|
2023-04-28 17:46:49 +01:00
|
|
|
|| m_type == Type::Svh
|
|
|
|
|| m_type == Type::Lvh
|
|
|
|
|| m_type == Type::Dvh
|
2023-04-28 19:50:09 +01:00
|
|
|
|| m_type == Type::Vi
|
|
|
|
|| m_type == Type::Svi
|
|
|
|
|| m_type == Type::Lvi
|
|
|
|
|| m_type == Type::Dvi
|
|
|
|
|| m_type == Type::Vb
|
|
|
|
|| m_type == Type::Svb
|
|
|
|
|| m_type == Type::Lvb
|
|
|
|
|| m_type == Type::Dvb
|
2023-03-17 23:08:45 +01:00
|
|
|
|| m_type == Type::Vmin
|
2023-04-28 17:46:49 +01:00
|
|
|
|| m_type == Type::Svmin
|
|
|
|
|| m_type == Type::Lvmin
|
|
|
|
|| m_type == Type::Dvmin
|
|
|
|
|| m_type == Type::Vmax
|
|
|
|
|| m_type == Type::Svmax
|
|
|
|
|| m_type == Type::Lvmax
|
|
|
|
|| m_type == Type::Dvmax;
|
2020-09-08 20:39:09 +02:00
|
|
|
}
|
2019-07-01 17:17:32 +02:00
|
|
|
|
2023-04-26 17:37:57 +01:00
|
|
|
bool is_relative() const
|
|
|
|
{
|
|
|
|
return is_font_relative() || is_viewport_relative();
|
|
|
|
}
|
|
|
|
|
2023-04-11 12:57:32 +01:00
|
|
|
Type type() const { return m_type; }
|
2023-05-24 10:50:57 +02:00
|
|
|
double raw_value() const { return m_value; }
|
2024-08-14 16:25:48 +01:00
|
|
|
StringView unit_name() const;
|
2021-09-23 13:13:51 +02:00
|
|
|
|
2023-06-02 12:39:39 +02:00
|
|
|
struct ResolutionContext {
|
2025-02-21 16:45:07 +00:00
|
|
|
[[nodiscard]] static ResolutionContext for_window(HTML::Window const&);
|
|
|
|
[[nodiscard]] static ResolutionContext for_layout_node(Layout::Node const&);
|
2023-06-02 12:39:39 +02:00
|
|
|
|
|
|
|
CSSPixelRect viewport_rect;
|
|
|
|
FontMetrics font_metrics;
|
|
|
|
FontMetrics root_font_metrics;
|
2025-02-21 16:45:07 +00:00
|
|
|
|
|
|
|
bool operator==(ResolutionContext const&) const = default;
|
2023-06-02 12:39:39 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
[[nodiscard]] CSSPixels to_px(ResolutionContext const&) const;
|
|
|
|
|
2024-03-02 11:17:06 +01:00
|
|
|
[[nodiscard]] ALWAYS_INLINE CSSPixels to_px(Layout::Node const& node) const
|
|
|
|
{
|
|
|
|
if (is_absolute())
|
|
|
|
return absolute_length_to_px();
|
|
|
|
return to_px_slow_case(node);
|
|
|
|
}
|
2021-09-23 13:13:51 +02:00
|
|
|
|
2023-04-28 16:29:12 +01:00
|
|
|
ALWAYS_INLINE CSSPixels to_px(CSSPixelRect const& viewport_rect, FontMetrics const& font_metrics, FontMetrics const& root_font_metrics) const
|
2020-06-23 23:21:58 +02:00
|
|
|
{
|
2021-10-05 15:39:40 +01:00
|
|
|
if (is_auto())
|
|
|
|
return 0;
|
2024-10-16 15:00:25 +02:00
|
|
|
if (is_absolute())
|
|
|
|
return absolute_length_to_px();
|
2023-04-28 20:07:41 +01:00
|
|
|
if (is_font_relative())
|
|
|
|
return font_relative_length_to_px(font_metrics, root_font_metrics);
|
|
|
|
if (is_viewport_relative())
|
|
|
|
return viewport_relative_length_to_px(viewport_rect);
|
2024-10-16 15:00:25 +02:00
|
|
|
|
|
|
|
VERIFY_NOT_REACHED();
|
2021-10-05 15:39:40 +01:00
|
|
|
}
|
|
|
|
|
2022-11-08 17:29:52 +00:00
|
|
|
ALWAYS_INLINE CSSPixels absolute_length_to_px() const
|
2021-10-05 15:39:40 +01:00
|
|
|
{
|
2023-05-24 10:50:57 +02:00
|
|
|
constexpr double inch_pixels = 96.0;
|
|
|
|
constexpr double centimeter_pixels = (inch_pixels / 2.54);
|
2020-06-23 23:21:58 +02:00
|
|
|
switch (m_type) {
|
2020-09-29 19:06:58 +01:00
|
|
|
case Type::Cm:
|
2023-08-26 15:57:31 +01:00
|
|
|
return CSSPixels::nearest_value_for(m_value * centimeter_pixels); // 1cm = 96px/2.54
|
2020-09-29 19:06:58 +01:00
|
|
|
case Type::In:
|
2023-08-26 15:57:31 +01:00
|
|
|
return CSSPixels::nearest_value_for(m_value * inch_pixels); // 1in = 2.54 cm = 96px
|
2020-06-23 23:21:58 +02:00
|
|
|
case Type::Px:
|
2023-08-26 15:57:31 +01:00
|
|
|
return CSSPixels::nearest_value_for(m_value); // 1px = 1/96th of 1in
|
2020-06-28 15:25:32 +02:00
|
|
|
case Type::Pt:
|
2023-08-26 15:57:31 +01:00
|
|
|
return CSSPixels::nearest_value_for(m_value * ((1.0 / 72.0) * inch_pixels)); // 1pt = 1/72th of 1in
|
2020-10-05 16:18:07 +01:00
|
|
|
case Type::Pc:
|
2023-08-26 15:57:31 +01:00
|
|
|
return CSSPixels::nearest_value_for(m_value * ((1.0 / 6.0) * inch_pixels)); // 1pc = 1/6th of 1in
|
2020-09-29 19:06:58 +01:00
|
|
|
case Type::Mm:
|
2023-08-26 15:57:31 +01:00
|
|
|
return CSSPixels::nearest_value_for(m_value * ((1.0 / 10.0) * centimeter_pixels)); // 1mm = 1/10th of 1cm
|
2020-09-29 19:06:58 +01:00
|
|
|
case Type::Q:
|
2023-08-26 15:57:31 +01:00
|
|
|
return CSSPixels::nearest_value_for(m_value * ((1.0 / 40.0) * centimeter_pixels)); // 1Q = 1/40th of 1cm
|
2020-06-23 23:21:58 +02:00
|
|
|
default:
|
2021-02-23 20:42:32 +01:00
|
|
|
VERIFY_NOT_REACHED();
|
2020-06-23 23:21:58 +02:00
|
|
|
}
|
|
|
|
}
|
2019-07-01 17:17:32 +02:00
|
|
|
|
2023-08-22 12:25:30 +01:00
|
|
|
String to_string() const;
|
2019-07-24 07:34:07 +02:00
|
|
|
|
2023-03-30 15:46:05 +01:00
|
|
|
bool operator==(Length const& other) const
|
|
|
|
{
|
|
|
|
return m_type == other.m_type && m_value == other.m_value;
|
|
|
|
}
|
2020-12-15 19:39:33 +01:00
|
|
|
|
2023-04-28 20:07:41 +01:00
|
|
|
CSSPixels font_relative_length_to_px(FontMetrics const& font_metrics, FontMetrics const& root_font_metrics) const;
|
|
|
|
CSSPixels viewport_relative_length_to_px(CSSPixelRect const& viewport_rect) const;
|
2021-09-23 13:13:51 +02:00
|
|
|
|
2023-03-30 15:01:23 +01:00
|
|
|
// Returns empty optional if it's already absolute.
|
2023-04-28 16:29:12 +01:00
|
|
|
Optional<Length> absolutize(CSSPixelRect const& viewport_rect, FontMetrics const& font_metrics, FontMetrics const& root_font_metrics) const;
|
|
|
|
Length absolutized(CSSPixelRect const& viewport_rect, FontMetrics const& font_metrics, FontMetrics const& root_font_metrics) const;
|
2023-03-30 15:01:23 +01:00
|
|
|
|
2024-12-11 15:05:56 +00:00
|
|
|
static Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Length const& reference_value);
|
|
|
|
static Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, CSSPixels reference_value);
|
2024-08-02 14:28:24 +02:00
|
|
|
|
2019-07-01 17:17:32 +02:00
|
|
|
private:
|
2024-03-02 11:17:06 +01:00
|
|
|
[[nodiscard]] CSSPixels to_px_slow_case(Layout::Node const&) const;
|
|
|
|
|
2022-02-18 16:50:17 +00:00
|
|
|
Type m_type;
|
2023-05-24 10:50:57 +02:00
|
|
|
double m_value { 0 };
|
2019-07-01 17:17:32 +02:00
|
|
|
};
|
2019-08-18 08:09:56 +02:00
|
|
|
|
2020-03-07 10:27:02 +01:00
|
|
|
}
|
2022-01-19 17:30:29 +00:00
|
|
|
|
|
|
|
template<>
|
|
|
|
struct AK::Formatter<Web::CSS::Length> : Formatter<StringView> {
|
|
|
|
ErrorOr<void> format(FormatBuilder& builder, Web::CSS::Length const& length)
|
|
|
|
{
|
2023-08-22 12:25:30 +01:00
|
|
|
return Formatter<StringView>::format(builder, length.to_string());
|
2022-01-19 17:30:29 +00:00
|
|
|
}
|
|
|
|
};
|