From c3f3e93b7e46e2f366fbc904852763af546d3913 Mon Sep 17 00:00:00 2001 From: BenJilks Date: Sun, 27 Oct 2024 22:12:54 +0000 Subject: [PATCH] LibWeb: Add `writing-mode` CSS property, and its values Introduce the `writing-mode` property, as specified in https://drafts.csswg.org/css-writing-modes/#block-flow --- .../Text/expected/css/getComputedStyle-print-all.txt | 3 ++- Userland/Libraries/LibWeb/CSS/ComputedValues.h | 4 ++++ Userland/Libraries/LibWeb/CSS/Enums.json | 7 +++++++ Userland/Libraries/LibWeb/CSS/Keywords.json | 5 +++++ Userland/Libraries/LibWeb/CSS/Properties.json | 12 ++++++++++++ Userland/Libraries/LibWeb/CSS/StyleProperties.cpp | 6 ++++++ Userland/Libraries/LibWeb/CSS/StyleProperties.h | 1 + Userland/Libraries/LibWeb/Layout/Node.cpp | 3 +++ 8 files changed, 40 insertions(+), 1 deletion(-) diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index 55619eee7b0..75b91ba7ba6 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt @@ -49,6 +49,7 @@ white-space: normal word-break: normal word-spacing: normal word-wrap: normal +writing-mode: horizontal-tb align-content: normal align-items: normal align-self: auto @@ -123,7 +124,7 @@ grid-row-start: auto grid-template-areas: none grid-template-columns: auto grid-template-rows: auto -height: 2125px +height: 2142px inline-size: auto inset-block-end: auto inset-block-start: auto diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index 4ab7abd6157..83e92cb8a8a 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -191,6 +191,7 @@ public: static CSS::TransformBox transform_box() { return CSS::TransformBox::ViewBox; } static CSS::Direction direction() { return CSS::Direction::Ltr; } static CSS::UnicodeBidi unicode_bidi() { return CSS::UnicodeBidi::Normal; } + static CSS::WritingMode writing_mode() { return CSS::WritingMode::HorizontalTb; } // https://www.w3.org/TR/SVG/geometry.html static LengthPercentage cx() { return CSS::Length::make_px(0); } @@ -443,6 +444,7 @@ public: CSS::ObjectPosition object_position() const { return m_noninherited.object_position; } CSS::Direction direction() const { return m_inherited.direction; } CSS::UnicodeBidi unicode_bidi() const { return m_noninherited.unicode_bidi; } + CSS::WritingMode writing_mode() const { return m_inherited.writing_mode; } CSS::LengthBox const& inset() const { return m_noninherited.inset; } const CSS::LengthBox& margin() const { return m_noninherited.margin; } @@ -567,6 +569,7 @@ protected: CSS::Visibility visibility { InitialValues::visibility() }; CSS::QuotesData quotes { InitialValues::quotes() }; CSS::Direction direction { InitialValues::direction() }; + CSS::WritingMode writing_mode { InitialValues::writing_mode() }; Optional fill; CSS::FillRule fill_rule { InitialValues::fill_rule() }; @@ -813,6 +816,7 @@ public: void set_object_position(CSS::ObjectPosition value) { m_noninherited.object_position = value; } void set_direction(CSS::Direction value) { m_inherited.direction = value; } void set_unicode_bidi(CSS::UnicodeBidi value) { m_noninherited.unicode_bidi = value; } + void set_writing_mode(CSS::WritingMode value) { m_inherited.writing_mode = value; } void set_fill(SVGPaint value) { m_inherited.fill = value; } void set_stroke(SVGPaint value) { m_inherited.stroke = value; } diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json index e98d8ce3ed9..e3e2fed8684 100644 --- a/Userland/Libraries/LibWeb/CSS/Enums.json +++ b/Userland/Libraries/LibWeb/CSS/Enums.json @@ -510,5 +510,12 @@ "keep-all", "break-all", "break-word" + ], + "writing-mode": [ + "horizontal-tb", + "vertical-rl", + "vertical-lr", + "sideways-rl", + "sideways-lr" ] } diff --git a/Userland/Libraries/LibWeb/CSS/Keywords.json b/Userland/Libraries/LibWeb/CSS/Keywords.json index 3959149c659..177358a2893 100644 --- a/Userland/Libraries/LibWeb/CSS/Keywords.json +++ b/Userland/Libraries/LibWeb/CSS/Keywords.json @@ -185,6 +185,7 @@ "high-quality", "highlight", "highlighttext", + "horizontal-tb", "hover", "inactiveborder", "inactivecaption", @@ -339,6 +340,8 @@ "semi-expanded", "separate", "serif", + "sideways-lr", + "sideways-rl", "slider-horizontal", "slow", "small", @@ -403,6 +406,8 @@ "upper-latin", "upper-roman", "uppercase", + "vertical-lr", + "vertical-rl", "vertical-text", "view-box", "visible", diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index 0ce6a9a6f37..17f3265bf25 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -2799,6 +2799,18 @@ "normal" ] }, + "writing-mode": { + "animation-type": "none", + "inherited": true, + "initial": "horizontal-tb", + "valid-identifiers": [ + "horizontal-tb", + "vertical-rl", + "vertical-lr", + "sideways-rl", + "sideways-lr" + ] + }, "x": { "__comment": "This is an SVG 2 geometry property, see: https://www.w3.org/TR/SVG/geometry.html#X.", "animation-type": "by-computed-value", diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index 3732b84c7c0..f5677900b73 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -1303,6 +1303,12 @@ Optional StyleProperties::unicode_bidi() const return keyword_to_unicode_bidi(value->to_keyword()); } +Optional StyleProperties::writing_mode() const +{ + auto value = property(CSS::PropertyID::WritingMode); + return keyword_to_writing_mode(value->to_keyword()); +} + Optional StyleProperties::mask_type() const { auto value = property(CSS::PropertyID::MaskType); diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h index 811e8dba07b..377637db026 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h @@ -168,6 +168,7 @@ public: Optional table_layout() const; Optional direction() const; Optional unicode_bidi() const; + Optional writing_mode() const; static Vector transformations_for_style_value(CSSStyleValue const& value); Vector transformations() const; diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index 4d4df0068f6..97fdff363ba 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -925,6 +925,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style) if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value()) computed_values.set_scrollbar_width(scrollbar_width.value()); + if (auto writing_mode = computed_style.writing_mode(); writing_mode.has_value()) + computed_values.set_writing_mode(writing_mode.value()); + propagate_style_to_anonymous_wrappers(); }