www

commit c22d8644cc7f45443c6c0756ab64f2dfc2b454e0
parent b5ef06b52d626074d1fd5f4414a952de3b8b3a2c
Author: Emily Eisenberg <emily@khanacademy.org>
Date:   Sat, 29 Mar 2014 23:33:05 -0400

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

Diffstat:
M
buildTree.js
 | 
12
++++++++----
M
static/katex.less
 | 
10
+++++++---
M
test/huxley/Huxleyfile
 | 
4
++++
A
test/huxley/RlapBug.huxley/record.json
 | 
1
+
A
test/huxley/RlapBug.huxley/screenshot0.png
 | 
0

5 files changed, 20 insertions(+), 7 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
Binary files differ.