From c22d8644cc7f45443c6c0756ab64f2dfc2b454e0 Mon Sep 17 00:00:00 2001
From: Emily Eisenberg <emily@khanacademy.org>
Date: Sat, 29 Mar 2014 23:33:05 -0400
Subject: [PATCH] Fix a weird bug with rlap

For some reason, when you have a nested elements that look like
  `display: inline-block; > position: relative; > position: absolute;`
then the `position: absolute;` element is shifted down a bunch. If there is
anything* else inside either of the other two elements, then this behavior
disappears. (This can be seen at [this fiddle](http://jsfiddle.net/qZXRr/). We
have this structure when we create `\llap` and `\rlap`s, and this weird behavior
So, to fix this I added an empty `display: inline-block;` span inside the llap
to fix this.

Test plan:
 - See that the new huxley image looks good
 - Test this in a bunch of browsers and see they also look good

Auditors: alpert
---
 buildTree.js                               |  12 ++++++++----
 static/katex.less                          |  10 +++++++---
 test/huxley/Huxleyfile                     |   3 +++
 test/huxley/RlapBug.huxley/record.json     |   1 +
 test/huxley/RlapBug.huxley/screenshot0.png | Bin 0 -> 5719 bytes
 5 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 test/huxley/RlapBug.huxley/record.json
 create mode 100644 test/huxley/RlapBug.huxley/screenshot0.png

diff --git a/buildTree.js b/buildTree.js
index 372283f51..8416cb06d 100644
--- a/buildTree.js
+++ b/buildTree.js
@@ -339,13 +339,17 @@ var groupTypes = {
     },
 
     llap: function(group, options, prev) {
-        var inner = makeSpan([], [buildGroup(group.value, options.reset())]);
-        return makeSpan(["llap", options.style.cls()], [inner]);
+        var inner = makeSpan(
+            ["inner"], [buildGroup(group.value, options.reset())]);
+        var fix = makeSpan(["fix"], []);
+        return makeSpan(["llap", options.style.cls()], [inner, fix]);
     },
 
     rlap: function(group, options, prev) {
-        var inner = makeSpan([], [buildGroup(group.value, options.reset())]);
-        return makeSpan(["rlap", options.style.cls()], [inner]);
+        var inner = makeSpan(
+            ["inner"], [buildGroup(group.value, options.reset())]);
+        var fix = makeSpan(["fix"], []);
+        return makeSpan(["rlap", options.style.cls()], [inner, fix]);
     },
 
     punct: function(group, options, prev) {
diff --git a/static/katex.less b/static/katex.less
index fca4e6412..fc716482a 100644
--- a/static/katex.less
+++ b/static/katex.less
@@ -275,16 +275,20 @@ big parens
         width: 0;
         position: relative;
 
-        > span {
+        > .inner {
             position: absolute;
         }
+
+        > .fix {
+            display: inline-block;
+        }
     }
 
-    .llap > span {
+    .llap > .inner {
         right: 0;
     }
 
-    .rlap > span {
+    .rlap > .inner {
         left: 0;
     }
 
diff --git a/test/huxley/Huxleyfile b/test/huxley/Huxleyfile
index f486316a1..3d9bbbb2a 100644
--- a/test/huxley/Huxleyfile
+++ b/test/huxley/Huxleyfile
@@ -39,3 +39,6 @@ url=http://localhost:7936/test/huxley/test.html?m=\frac{a}{b}\text{c~ {ab} \ e}+
 
 [KaTeX]
 url=http://localhost:7936/test/huxley/test.html?m=\KaTeX
+
+[RlapBug]
+url=http://localhost:7936/test/huxley/test.html?m=\rlap{x}
\ No newline at end of file
diff --git a/test/huxley/RlapBug.huxley/record.json b/test/huxley/RlapBug.huxley/record.json
new file mode 100644
index 000000000..9369c51e8
--- /dev/null
+++ b/test/huxley/RlapBug.huxley/record.json
@@ -0,0 +1 @@
+{"py/object": "huxley.run.Test", "screen_size": {"py/tuple": [1024, 768]}, "steps": [{"py/object": "huxley.steps.ScreenshotTestStep", "index": 0, "offset_time": 0}]}
diff --git a/test/huxley/RlapBug.huxley/screenshot0.png b/test/huxley/RlapBug.huxley/screenshot0.png
new file mode 100644
index 0000000000000000000000000000000000000000..dea85a2ab4fdc4a18d04f05e10b662a8913c392a
GIT binary patch
literal 5719
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
Aw*UYD

literal 0
HcmV?d00001