style: Add Gecko-only support for writing-mode:sideways-{lr,rl}.

Fixes #15213.

3 files changed, 35 insertions, 10 deletions

diff --git a/components/style/logical_geometry.rs b/components/style/logical_geometry.rs
index 4a79d2d2af3..e9748128f55 100644
--- a/components/style/logical_geometry.rs
+++ b/components/style/logical_geometry.rs
@@ -29,8 +29,12 @@ bitflags!(
         const FLAG_RTL = 1 << 0,
         const FLAG_VERTICAL = 1 << 1,
         const FLAG_VERTICAL_LR = 1 << 2,
-        const FLAG_SIDEWAYS = 1 << 3,
-        const FLAG_UPRIGHT = 1 << 4,
+        /// For vertical writing modes only.  When set, line-over/line-under
+        /// sides are inverted from block-start/block-end.  This flag is
+        /// set when sideways-lr is used.
+        const FLAG_LINE_INVERTED = 1 << 3,
+        const FLAG_SIDEWAYS = 1 << 4,
+        const FLAG_UPRIGHT = 1 << 5,
     }
 );
 
@@ -50,7 +54,7 @@ impl WritingMode {
     #[inline]
     pub fn is_inline_tb(&self) -> bool {
         // https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical
-        !self.intersects(FLAG_RTL)
+        self.intersects(FLAG_RTL) == self.intersects(FLAG_LINE_INVERTED)
     }
 
     #[inline]
@@ -145,6 +149,9 @@ impl fmt::Display for WritingMode {
             if self.intersects(FLAG_SIDEWAYS) {
                 try!(write!(formatter, " Sideways"));
             }
+            if self.intersects(FLAG_LINE_INVERTED) {
+                try!(write!(formatter, " Inverted"));
+            }
         } else {
             try!(write!(formatter, "H"));
         }
diff --git a/components/style/properties/longhand/inherited_box.mako.rs b/components/style/properties/longhand/inherited_box.mako.rs
index d8c286301d5..0ca4e231746 100644
--- a/components/style/properties/longhand/inherited_box.mako.rs
+++ b/components/style/properties/longhand/inherited_box.mako.rs
@@ -18,6 +18,7 @@ ${helpers.single_keyword("visibility",
 // https://drafts.csswg.org/css-writing-modes-3
 ${helpers.single_keyword("writing-mode",
                          "horizontal-tb vertical-rl vertical-lr",
+                         extra_gecko_values="sideways-rl sideways-lr",
                          experimental=True,
                          need_clone=True,
                          animation_type="none",
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 9f5e6816fee..d3d4d807659 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -1936,16 +1936,33 @@ pub fn get_writing_mode(inheritedbox_style: &style_structs::InheritedBox) -> Wri
             flags.insert(logical_geometry::FLAG_VERTICAL);
             flags.insert(logical_geometry::FLAG_VERTICAL_LR);
         },
-    }
-    % if product == "gecko":
-    match inheritedbox_style.clone_text_orientation() {
-        computed_values::text_orientation::T::mixed => {},
-        computed_values::text_orientation::T::upright => {
-            flags.insert(logical_geometry::FLAG_UPRIGHT);
+        % if product == "gecko":
+        computed_values::writing_mode::T::sideways_rl => {
+            flags.insert(logical_geometry::FLAG_VERTICAL);
+            flags.insert(logical_geometry::FLAG_SIDEWAYS);
         },
-        computed_values::text_orientation::T::sideways => {
+        computed_values::writing_mode::T::sideways_lr => {
+            flags.insert(logical_geometry::FLAG_VERTICAL);
+            flags.insert(logical_geometry::FLAG_VERTICAL_LR);
+            flags.insert(logical_geometry::FLAG_LINE_INVERTED);
             flags.insert(logical_geometry::FLAG_SIDEWAYS);
         },
+        % endif
+    }
+    % if product == "gecko":
+    // If FLAG_SIDEWAYS is already set, this means writing-mode is either
+    // sideways-rl or sideways-lr, and for both of these values,
+    // text-orientation has no effect.
+    if !flags.intersects(logical_geometry::FLAG_SIDEWAYS) {
+        match inheritedbox_style.clone_text_orientation() {
+            computed_values::text_orientation::T::mixed => {},
+            computed_values::text_orientation::T::upright => {
+                flags.insert(logical_geometry::FLAG_UPRIGHT);
+            },
+            computed_values::text_orientation::T::sideways => {
+                flags.insert(logical_geometry::FLAG_SIDEWAYS);
+            },
+        }
     }
     % endif
     flags