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`
noahmbright · Oct 6, 2024 · 9a18c80 · 9a18c80
1 parent d0463bf
commit 9a18c80
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 6 deletions.
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/bfc-resolve-height-if-treated-as-auto.txt b/Tests/LibWeb/Layout/expected/block-and-inline/bfc-resolve-height-if-treated-as-auto.txt
@@ -0,0 +1,14 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
+      BlockContainer <div.not-bfc> at (8,8) content-size 784x0 children: not-inline
+        BlockContainer <div.bfc> at (8,8) content-size 784x0 children: not-inline
+      BlockContainer <(anonymous)> at (8,16) content-size 784x0 children: inline
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0] overflow: [8,16 784x0]
+      PaintableWithLines (BlockContainer<DIV>.not-bfc) [8,8 784x0]
+        PaintableWithLines (BlockContainer<DIV>.bfc) [8,8 784x0]
+      PaintableWithLines (BlockContainer(anonymous)) [8,16 784x0]
diff --git a/Tests/LibWeb/Layout/input/block-and-inline/bfc-resolve-height-if-treated-as-auto.html b/Tests/LibWeb/Layout/input/block-and-inline/bfc-resolve-height-if-treated-as-auto.html
@@ -0,0 +1,15 @@
+<!-- Quirks mode -->
+<html>
+    <style>
+.not-bfc{
+    writing-mode: vertical-rl,
+    width: 600px
+}
+.bfc{
+    width: auto,
+    margin-left: 50px,
+    margin-right: 50px
+}
+    </style>
+    <div class="not-bfc"><div class="bfc"></div></div>
+</html>
diff --git 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
@@ -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; }

diff --git 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
@@ -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
@@ -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
@@ -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);

diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/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;

diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
@@ -462,25 +462,47 @@ 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;
+        //
+        // From writing-mode spec https://www.w3.org/TR/css-writing-modes-3/#block-flow
+        //  horizontal-tb is a top to bottom block flow direction
+        //  vertical-rl is a right to left block flow direction
+        //  vertical-lr is a lr to right block flow direction
+        // horizontal-tb probably wants height here, the verticals want width
+        CSSPixels size;
+        auto const* const containing_block_used_values = box_state.containing_block_used_values();
+        if (has_horizontal_writing_mode)
+            size = containing_block_used_values->content_height() - margins;
+        else
+            size = containing_block_used_values->content_width() - margins;
 
         // 3. Return the bigger value of size and the normal border box size the element would have
         //    according to the CSS specification.
-        height = max(size, height);
+        if (has_horizontal_writing_mode)
+            height = max(size, height);
+        else {
+            box_state.set_content_width(max(size, box_state.border_box_width()));
+        }
 
         // NOTE: The height of the root element when affected by this quirk is considered to be definite.
         box_state.set_has_definite_height(true);

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