katex: Handle notequal

lib/model/katex.dart

@@ -611,6 +611,12 @@ class _KatexParser {
             _ => throw _KatexHtmlParseError(),
           };
 
+        case 'thinbox':
+        // .thinbox { display: inline-flex; flex-direction: row; width: 0; max-width: 0; }
+        case 'rlap':
+        // .rlap { width: 0; position: relative; }
+          widthEm = 0;
+
         // TODO handle more classes from katex.scss
 
         case 'mord':
@@ -626,6 +632,9 @@ class _KatexParser {
         case 'nobreak':
         case 'allowbreak':
         case 'mathdefault':
+        case 'vbox':
+        case 'inner':
+        case 'fix':
           // Ignore these classes because they don't have a CSS definition
           // in katex.scss, but we encounter them in the generated HTML.
           // (Why are they there if they're not used?  The story seems to be:

test/model/katex_test.dart

@@ -731,6 +731,43 @@ class KatexExample extends ContentExample {
         ]),
       ]),
     ]);
+
+    static final notEqual = KatexExample.inline(
+      r'not-equal, like `\ne`.',
+      //https://chat.zulip.org/#narrow/channel/7-test-here/topic/Saif.20KaTeX/near/2285658.2E01
+      r'\ne',
+      '<p>'
+        '<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo mathvariant="normal">≠</mo></mrow><annotation encoding="application/x-tex"> \\ne </annotation></semantics></math></span>'
+          '<span class="katex-html" aria-hidden="true">'
+            '<span class="base">'
+              '<span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span>'
+              '<span class="mrel"><span class="mrel">'
+                  '<span class="mord vbox">'
+                    '<span class="thinbox">'
+                      '<span class="rlap">'
+                        '<span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span>'
+                        '<span class="inner"><span class="mord"><span class="mrel"></span></span></span>'
+                        '<span class="fix"></span></span></span></span></span>'
+                '<span class="mrel">=</span></span></span></span></span></p>',[
+        KatexSpanNode(nodes: [
+          KatexStrutNode(heightEm: 0.8889, verticalAlignEm: -0.1944),
+          KatexSpanNode(nodes: [
+            KatexSpanNode(nodes: [
+              KatexSpanNode(nodes: [
+                KatexSpanNode(
+                  styles: KatexSpanStyles(widthEm: 0),
+                  nodes: [
+                    KatexSpanNode(
+                      styles: KatexSpanStyles(widthEm: 0),
+                      nodes: [KatexStrutNode(heightEm: 0.8889, verticalAlignEm: -0.1944),
+                        KatexSpanNode(nodes: [
+                          KatexSpanNode(nodes: [KatexSpanNode(text: '')]),
+                        ]),KatexSpanNode(nodes: [])],
+                    )]),
+              ])]),
+            KatexSpanNode(text: '=')]),
+        ]),
+      ]);
 }
 
 void main() async {
@@ -754,6 +791,7 @@ void main() async {
   testParseExample(KatexExample.bigOperators);
   testParseExample(KatexExample.colonEquals);
   testParseExample(KatexExample.nulldelimiter);
+  testParseExample(KatexExample.notEqual);
 
   group('parseCssHexColor', () {
     const testCases = [

test/widgets/katex_test.dart

@@ -81,6 +81,10 @@ void main() {
         ('a', Offset(2.47, 3.36), Size(10.88, 25.00)),
         ('b', Offset(15.81, 3.36), Size(8.82, 25.00)),
       ]),
+     (KatexExample.notEqual, skip: false, [
+        ('=', Offset(0.0, 8.64), Size(16.0, 25.0)),
+        ('', Offset(0.0, 10.1), Size(0.0, 25.0)),
+      ]),
     ];
 
     for (final testCase in testCases) {