From 5054e0ba1ebcbd9a7916aec219528e3e58057241 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Thu, 18 Aug 2022 03:36:35 +0100
Subject: [PATCH] include class on spans

---
 lib/encoder.ex        | 32 ++++++++++++-------------
 test/encoder_test.exs | 54 +++++++++++++++++++++----------------------
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/lib/encoder.ex b/lib/encoder.ex
index bf4c2e4..26f123a 100644
--- a/lib/encoder.ex
+++ b/lib/encoder.ex
@@ -20,10 +20,10 @@ defmodule MfmParser.Encoder do
       ...>   }
       ...> ]
       ...> |> MfmParser.Encoder.to_html()
-      "<span style=\\"display: inline-block; animation: 5s ease 0s infinite normal none running mfm-twitch;\\">🍮</span>"
+      "<span class=\\"mfm\\" style=\\"display: inline-block; animation: 5s ease 0s infinite normal none running mfm-twitch;\\">🍮</span>"
 
       iex> MfmParser.Parser.parse("$[twitch.speed=5s 🍮]") |> MfmParser.Encoder.to_html()
-      "<span style=\\"display: inline-block; animation: 5s ease 0s infinite normal none running mfm-twitch;\\">🍮</span>"
+      "<span class=\\"mfm\\" style=\\"display: inline-block; animation: 5s ease 0s infinite normal none running mfm-twitch;\\">🍮</span>"
   """
 
   def to_html(tree) when is_list(tree) do
@@ -52,17 +52,17 @@ defmodule MfmParser.Encoder do
           case node.props do
             %{v: true, h: true} ->
               {html <>
-                 "<span style=\"display: inline-block; transform: scale(-1);\">#{html_child}</span>",
+                 "<span class=\"mfm\" style=\"display: inline-block; transform: scale(-1);\">#{html_child}</span>",
                styles}
 
             %{v: true} ->
               {html <>
-                 "<span style=\"display: inline-block; transform: scaleY(-1);\">#{html_child}</span>",
+                 "<span class=\"mfm\" style=\"display: inline-block; transform: scaleY(-1);\">#{html_child}</span>",
                styles}
 
             _ ->
               {html <>
-                 "<span style=\"display: inline-block; transform: scaleX(-1);\">#{html_child}</span>",
+                 "<span class=\"mfm\" style=\"display: inline-block; transform: scaleX(-1);\">#{html_child}</span>",
                styles ++ styles_child}
           end
 
@@ -70,7 +70,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; font-family: #{node.props.font};\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; font-family: #{node.props.font};\">#{html_child}</span>",
            styles ++ styles_child}
 
         %Node.MFM.X{} ->
@@ -93,7 +93,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal both running mfm-rubberBand;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal both running mfm-rubberBand;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes mfm-rubberBand { 0% { transform:scaleZ(1) } 30% { transform:scale3d(1.25,.75,1) } 40% { transform:scale3d(.75,1.25,1) } 50% { transform:scale3d(1.15,.85,1) } 65% { transform:scale3d(.95,1.05,1) } 75% { transform:scale3d(1.05,.95,1) } to { transform:scaleZ(1) }}"
@@ -103,7 +103,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; font-size: 150%; animation: #{node.props.speed} linear 0s infinite normal both running mfm-tada;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; font-size: 150%; animation: #{node.props.speed} linear 0s infinite normal both running mfm-tada;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes tada { 0% { transform: scaleZ(1); } 10%, 20% { transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); } 40%, 60%, 80% { transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); } 100% { transform: scaleZ(1); }}"
@@ -113,7 +113,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal none running mfm-jump;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal none running mfm-jump;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes mfm-jump { 0% { transform:translateY(0) } 25% { transform:translateY(-16px) } 50% { transform:translateY(0) } 75% { transform:translateY(-8px) } to { transform:translateY(0) }}"
@@ -123,7 +123,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal none running mfm-bounce; transform-origin: center bottom 0px;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal none running mfm-bounce; transform-origin: center bottom 0px;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes mfm-bounce { 0% { transform:translateY(0) scale(1) } 25% { transform:translateY(-16px) scale(1) }  50% { transform:translateY(0) scale(1) } 75% { transform:translateY(0) scale(1.5,.75) } to { transform:translateY(0) scale(1) }}"
@@ -152,14 +152,14 @@ defmodule MfmParser.Encoder do
           }
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite #{Map.get(directions_map, node.props.direction, node.props.direction)} none running #{Map.get(keyframe_names_map, node.props.axis, "")};\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite #{Map.get(directions_map, node.props.direction, node.props.direction)} none running #{Map.get(keyframe_names_map, node.props.axis, "")};\">#{html_child}</span>",
            styles ++ [Map.get(styles_map, node.props.axis, "")] ++ styles_child}
 
         %Node.MFM.Shake{} ->
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} ease 0s infinite normal none running mfm-shake;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: #{node.props.speed} ease 0s infinite normal none running mfm-shake;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes mfm-shake { 0% { transform:translate(-3px,-1px) rotate(-8deg) } 5% { transform:translateY(-1px) rotate(-10deg) } 10% { transform:translate(1px,-3px) rotate(0) } 15% { transform:translate(1px,1px) rotate(11deg) } 20% { transform:translate(-2px,1px) rotate(1deg) } 25% { transform:translate(-1px,-2px) rotate(-2deg) } 30% { transform:translate(-1px,2px) rotate(-3deg) } 35% { transform:translate(2px,1px) rotate(6deg) } 40% { transform:translate(-2px,-3px) rotate(-9deg) } 45% { transform:translateY(-1px) rotate(-12deg) } 50% { transform:translate(1px,2px) rotate(10deg) } 55% { transform:translateY(-3px) rotate(8deg) } 60% { transform:translate(1px,-1px) rotate(8deg) } 65% { transform:translateY(-1px) rotate(-7deg) } 70% { transform:translate(-1px,-3px) rotate(6deg) } 75% { transform:translateY(-2px) rotate(4deg) } 80% { transform:translate(-2px,-1px) rotate(3deg) } 85% { transform:translate(1px,-3px) rotate(-10deg) } 90% { transform:translate(1px) rotate(3deg) } 95% { transform:translate(-2px) rotate(-3deg) } to { transform:translate(2px,1px) rotate(2deg) }}"
@@ -169,7 +169,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} ease 0s infinite normal none running mfm-twitch;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: #{node.props.speed} ease 0s infinite normal none running mfm-twitch;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes mfm-twitch { 0% { transform:translate(7px,-2px) } 5% { transform:translate(-3px,1px) } 10% { transform:translate(-7px,-1px) } 15% { transform:translateY(-1px) } 20% { transform:translate(-8px,6px) } 25% { transform:translate(-4px,-3px) } 30% { transform:translate(-4px,-6px) } 35% { transform:translate(-8px,-8px) } 40% { transform:translate(4px,6px) } 45% { transform:translate(-3px,1px) } 50% { transform:translate(2px,-10px) } 55% { transform:translate(-7px) } 60% { transform:translate(-2px,4px) } 65% { transform:translate(3px,-8px) } 70% { transform:translate(6px,7px) } 75% { transform:translate(-7px,-2px) } 80% { transform:translate(-7px,-8px) } 85% { transform:translate(9px,3px) } 90% { transform:translate(-3px,-2px) } 95% { transform:translate(-10px,2px) } to { transform:translate(-2px,-6px) }}"
@@ -179,7 +179,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal none running mfm-rainbow;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite normal none running mfm-rainbow;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes mfm-rainbow { 0% { filter:hue-rotate(0deg) contrast(150%) saturate(150%) } to { filter:hue-rotate(360deg) contrast(150%) saturate(150%) }}"
@@ -190,7 +190,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;\">#{html_child}</span>",
            styles ++
              [
                "@keyframes mfm-sparkle { 0% { filter: brightness(100%) } to { filter: brightness(300%) }}"
@@ -200,7 +200,7 @@ defmodule MfmParser.Encoder do
           {html_child, styles_child} = to_html_styles(node.children)
 
           {html <>
-             "<span style=\"display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;\">#{html_child}</span>",
+             "<span class=\"mfm\" style=\"display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;\">#{html_child}</span>",
            styles ++ styles_child}
 
         %Node.MFM.Undefined{} ->
diff --git a/test/encoder_test.exs b/test/encoder_test.exs
index 7ba3789..47f7c69 100644
--- a/test/encoder_test.exs
+++ b/test/encoder_test.exs
@@ -45,13 +45,13 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; transform: scaleX(-1);">Misskey expands the world of the Fediverse</span>]
+        ~s[<span class="mfm" style="display: inline-block; transform: scaleX(-1);">Misskey expands the world of the Fediverse</span>]
 
       expected_v =
-        ~s[<span style="display: inline-block; transform: scaleY(-1);">Misskey expands the world of the Fediverse</span>]
+        ~s[<span class="mfm" style="display: inline-block; transform: scaleY(-1);">Misskey expands the world of the Fediverse</span>]
 
       expected_h_v =
-        ~s[<span style="display: inline-block; transform: scale(-1);">Misskey expands the world of the Fediverse</span>]
+        ~s[<span class="mfm" style="display: inline-block; transform: scale(-1);">Misskey expands the world of the Fediverse</span>]
 
       assert Encoder.to_html(input_tree) == expected
       assert Encoder.to_html(input_tree_v) == expected_v
@@ -67,7 +67,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; font-family: fantasy;">Misskey expands the world of the Fediverse</span>]
+        ~s[<span class="mfm" style="display: inline-block; font-family: fantasy;">Misskey expands the world of the Fediverse</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -105,7 +105,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 1s linear 0s infinite normal both running mfm-rubberBand;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1s linear 0s infinite normal both running mfm-rubberBand;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -118,7 +118,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; font-size: 150%; animation: 1s linear 0s infinite normal both running mfm-tada;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; font-size: 150%; animation: 1s linear 0s infinite normal both running mfm-tada;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -131,7 +131,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 0.75s linear 0s infinite normal none running mfm-jump;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 0.75s linear 0s infinite normal none running mfm-jump;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -144,7 +144,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 0.75s linear 0s infinite normal none running mfm-bounce; transform-origin: center bottom 0px;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 0.75s linear 0s infinite normal none running mfm-bounce; transform-origin: center bottom 0px;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -214,31 +214,31 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected_tree_z_left =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spin;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spin;">🍮</span>]
 
       expected_tree_x_left =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinX;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinX;">🍮</span>]
 
       expected_tree_y_left =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinY;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinY;">🍮</span>]
 
       expected_tree_z_alternate =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spin;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spin;">🍮</span>]
 
       expected_tree_x_alternate =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinX;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinX;">🍮</span>]
 
       expected_tree_y_alternate =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinY;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinY;">🍮</span>]
 
       expected_tree_z_normal =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spin;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spin;">🍮</span>]
 
       expected_tree_x_normal =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinX;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinX;">🍮</span>]
 
       expected_tree_y_normal =
-        ~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinY;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinY;">🍮</span>]
 
       assert Encoder.to_html(input_tree_z_left) == expected_tree_z_left
       assert Encoder.to_html(input_tree_x_left) == expected_tree_x_left
@@ -261,7 +261,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 0.5s ease 0s infinite normal none running mfm-shake;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 0.5s ease 0s infinite normal none running mfm-shake;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -274,7 +274,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 0.5s ease 0s infinite normal none running mfm-twitch;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 0.5s ease 0s infinite normal none running mfm-twitch;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -287,7 +287,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-rainbow;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-rainbow;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -301,7 +301,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -314,7 +314,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -344,7 +344,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;">🍮</span>pain au chocolat<span style="display: inline-block; font-family: fantasy;">Misskey expands the world of the Fediverse</span>]
+        ~s[<span class="mfm" style="display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;">🍮</span>pain au chocolat<span class="mfm" style="display: inline-block; font-family: fantasy;">Misskey expands the world of the Fediverse</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -362,7 +362,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;"><span style="display: inline-block; font-family: fantasy;">🍮</span></span>]
+        ~s[<span class="mfm" style="display: inline-block; transform: rotate(90deg); transform-origin: center center 0px;"><span class="mfm" style="display: inline-block; font-family: fantasy;">🍮</span></span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -378,7 +378,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        ~s[<span style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;">🍮</span><span style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;">🍮</span>]
+        ~s[<span class="mfm" style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;">🍮</span><span class="mfm" style="display: inline-block; animation: 1s linear 0s infinite normal none running mfm-sparkle;">🍮</span>]
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -414,7 +414,7 @@ defmodule MfmParser.EncoderTest do
       ]
 
       expected =
-        "It's not <span style=\"display: inline-block; animation: 0.2s ease 0s infinite normal none running mfm-twitch;\">chocolatine</span>\nit's <span font-size: \"600%\"><span style=\"display: inline-block; animation: 1s linear 0s infinite normal none running mfm-spin;\">pain</span> <span style=\"display: inline-block; animation: 2s linear 0s infinite normal none running mfm-rainbow;\">au</span> <span style=\"display: inline-block; animation: 0.5s linear 0s infinite normal none running mfm-jump;\">chocolat</span></span>"
+        "It's not <span class=\"mfm\" style=\"display: inline-block; animation: 0.2s ease 0s infinite normal none running mfm-twitch;\">chocolatine</span>\nit's <span font-size: \"600%\"><span class=\"mfm\" style=\"display: inline-block; animation: 1s linear 0s infinite normal none running mfm-spin;\">pain</span> <span class=\"mfm\" style=\"display: inline-block; animation: 2s linear 0s infinite normal none running mfm-rainbow;\">au</span> <span class=\"mfm\" style=\"display: inline-block; animation: 0.5s linear 0s infinite normal none running mfm-jump;\">chocolat</span></span>"
 
       assert Encoder.to_html(input_tree) == expected
     end
@@ -424,7 +424,7 @@ defmodule MfmParser.EncoderTest do
         "It's not $[twitch.speed=0.2s chocolatine]\nit's $[x4 $[spin.speed=1s pain] $[rainbow.speed=2s au] $[jump.speed=0.5s chocolat]]"
 
       expected =
-        "It's not <span style=\"display: inline-block; animation: 0.2s ease 0s infinite normal none running mfm-twitch;\">chocolatine</span>\nit's <span font-size: \"600%\"><span style=\"display: inline-block; animation: 1s linear 0s infinite normal none running mfm-spin;\">pain</span> <span style=\"display: inline-block; animation: 2s linear 0s infinite normal none running mfm-rainbow;\">au</span> <span style=\"display: inline-block; animation: 0.5s linear 0s infinite normal none running mfm-jump;\">chocolat</span></span>"
+        "It's not <span class=\"mfm\" style=\"display: inline-block; animation: 0.2s ease 0s infinite normal none running mfm-twitch;\">chocolatine</span>\nit's <span font-size: \"600%\"><span class=\"mfm\" style=\"display: inline-block; animation: 1s linear 0s infinite normal none running mfm-spin;\">pain</span> <span class=\"mfm\" style=\"display: inline-block; animation: 2s linear 0s infinite normal none running mfm-rainbow;\">au</span> <span class=\"mfm\" style=\"display: inline-block; animation: 0.5s linear 0s infinite normal none running mfm-jump;\">chocolat</span></span>"
 
       assert Encoder.to_html(input) == expected
     end