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`

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

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<SVGPaint> 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; }

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -484,5 +484,10 @@
     "pre",
     "pre-line",
     "pre-wrap"
+  ],
+  "writing-mode": [
+      "horizontal-tb",
+      "vertical-lr",
+      "vertical-rl"
   ]
 }

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",

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",

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -1189,6 +1189,12 @@ Optional<CSS::Direction> StyleProperties::direction() const
     return keyword_to_direction(value->to_keyword());
 }
 
+Optional<CSS::WritingMode> StyleProperties::writing_mode() const
+{
+    auto value = property(CSS::PropertyID::WritingMode);
+    return keyword_to_writing_mode(value->to_keyword());
+}
+
 Optional<CSS::MaskType> StyleProperties::mask_type() const
 {
     auto value = property(CSS::PropertyID::MaskType);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -166,6 +166,7 @@ class StyleProperties : public RefCounted<StyleProperties> {
     CSS::ObjectPosition object_position() const;
     Optional<CSS::TableLayout> table_layout() const;
     Optional<CSS::Direction> direction() const;
+    Optional<CSS::WritingMode> writing_mode() const;
 
     static Vector<CSS::Transformation> transformations_for_style_value(CSSStyleValue const& value);
     Vector<CSS::Transformation> transformations() const;

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;

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());