From 56e8201fe4285d3f720b6c5a03fa4915670db2ab Mon Sep 17 00:00:00 2001 From: Noah Bright Date: Wed, 2 Oct 2024 10:21:20 -0400 Subject: [PATCH] LibWeb/CSS: Define writing-mode Fill out the json and associated boilerplate for the `writing-mode` property, and fill out a FIXME in `BlockFormattingContext.cpp` --- .../expected/css/getComputedStyle-print-all.txt | 3 ++- Userland/Libraries/LibWeb/CSS/ComputedValues.h | 4 ++++ Userland/Libraries/LibWeb/CSS/Enums.json | 5 +++++ Userland/Libraries/LibWeb/CSS/Keywords.json | 3 +++ Userland/Libraries/LibWeb/CSS/Properties.json | 8 ++++++++ Userland/Libraries/LibWeb/CSS/StyleProperties.cpp | 6 ++++++ Userland/Libraries/LibWeb/CSS/StyleProperties.h | 1 + .../LibWeb/Layout/BlockFormattingContext.cpp | 13 ++++++++++--- Userland/Libraries/LibWeb/Layout/Node.cpp | 3 +++ 9 files changed, 42 insertions(+), 4 deletions(-) diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index 0c18222b6cbb..b5be68758e3f 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt @@ -45,6 +45,7 @@ visibility: visible white-space: normal word-spacing: normal word-wrap: normal +writing-mode: horizontal-tb align-content: normal align-items: normal align-self: auto @@ -120,7 +121,7 @@ grid-row-start: auto grid-template-areas: grid-template-columns: grid-template-rows: -height: 2074px +height: 2091px 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 163843cb828d..f82499f27ee6 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -183,6 +183,7 @@ class InitialValues { static QuotesData quotes() { return QuotesData { .type = QuotesData::Type::Auto }; } static CSS::TransformBox transform_box() { return CSS::TransformBox::ViewBox; } static CSS::Direction direction() { return CSS::Direction::Ltr; } + 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); } @@ -431,6 +432,7 @@ class ComputedValues { CSS::ObjectFit object_fit() const { return m_noninherited.object_fit; } CSS::ObjectPosition object_position() const { return m_noninherited.object_position; } CSS::Direction direction() const { return m_inherited.direction; } + 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; } @@ -548,6 +550,7 @@ class ComputedValues { 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() }; @@ -782,6 +785,7 @@ class MutableComputedValues final : public ComputedValues { void set_object_fit(CSS::ObjectFit value) { m_noninherited.object_fit = value; } void set_object_position(CSS::ObjectPosition value) { m_noninherited.object_position = value; } void set_direction(CSS::Direction value) { m_inherited.direction = 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 a7855c3bb51e..73c12b9f2d21 100644 --- a/Userland/Libraries/LibWeb/CSS/Enums.json +++ b/Userland/Libraries/LibWeb/CSS/Enums.json @@ -484,5 +484,10 @@ "pre", "pre-line", "pre-wrap" + ], + "writing-mode": [ + "horizontal-tb", + "vertical-lr", + "vertical-rl" ] } diff --git a/Userland/Libraries/LibWeb/CSS/Keywords.json b/Userland/Libraries/LibWeb/CSS/Keywords.json index 2ad59f61112d..02a0568ebff2 100644 --- a/Userland/Libraries/LibWeb/CSS/Keywords.json +++ b/Userland/Libraries/LibWeb/CSS/Keywords.json @@ -180,6 +180,7 @@ "high-quality", "highlight", "highlighttext", + "horizontal-tb", "hover", "inactiveborder", "inactivecaption", @@ -393,7 +394,9 @@ "upper-latin", "upper-roman", "uppercase", + "vertical-lr", "vertical-text", + "vertical-rl", "view-box", "visible", "visitedtext", diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index 627b33519c3e..d479ed7b0e0a 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -2766,6 +2766,14 @@ "normal" ] }, + "writing-mode": { + "animation-type": "none", + "initial": "horizontal-tb", + "inherited": true, + "valid-types": [ + "writing-mode" + ] + }, "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 a7a861dfebec..8d3139e91073 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -1189,6 +1189,12 @@ Optional StyleProperties::direction() const return keyword_to_direction(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 3e8c8e6e0172..a4bd1af3b5fe 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h @@ -166,6 +166,7 @@ class StyleProperties : public RefCounted { CSS::ObjectPosition object_position() const; Optional table_layout() const; Optional direction() const; + Optional writing_mode() const; static Vector transformations_for_style_value(CSSStyleValue const& value); Vector transformations() const; diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index d0ffc1579af8..f9d177c9dd79 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -462,18 +462,25 @@ void BlockFormattingContext::resolve_used_height_if_treated_as_auto(Box const& b height = max(height, calculate_inner_height(box, available_space.height, computed_values.min_height())); } + auto writing_mode = box.computed_values().writing_mode(); + bool has_horizontal_writing_mode = (writing_mode == CSS::WritingMode::HorizontalTb); + if (box.document().in_quirks_mode() && box.dom_node() && box.dom_node()->is_html_html_element() - && box.computed_values().height().is_auto()) { + && ((box.computed_values().width().is_auto() && !has_horizontal_writing_mode) + || (box.computed_values().height().is_auto() && has_horizontal_writing_mode))) { // 3.6. The html element fills the viewport quirk // https://quirks.spec.whatwg.org/#the-html-element-fills-the-viewport-quirk - // FIXME: Handle vertical writing mode. // 1. Let margins be sum of the used values of the margin-left and margin-right properties of element // if element has a vertical writing mode, otherwise let margins be the sum of the used values of // the margin-top and margin-bottom properties of element. - auto margins = box_state.margin_top + box_state.margin_bottom; + CSSPixels margins; + if (!has_horizontal_writing_mode) + margins = box_state.margin_left + box_state.margin_right; + else + margins = box_state.margin_top + box_state.margin_bottom; // 2. Let size be the size of the initial containing block in the block flow direction minus margins. auto size = box_state.containing_block_used_values()->content_height() - margins; diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp index a62b6b3c059f..f05894d3f0d1 100644 --- a/Userland/Libraries/LibWeb/Layout/Node.cpp +++ b/Userland/Libraries/LibWeb/Layout/Node.cpp @@ -896,6 +896,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style) if (auto direction = computed_style.direction(); direction.has_value()) computed_values.set_direction(direction.value()); + if (auto writing_mode = computed_style.writing_mode(); writing_mode.has_value()) + computed_values.set_writing_mode(writing_mode.value()); + if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value()) computed_values.set_scrollbar_width(scrollbar_width.value());