commit 204270fa0db90b40decbd3daf97a793db9fc871f
parent 92047d2a840f71b2142ea08cdedf78115101a6a7
Author: Emily Eisenberg <emily@khanacademy.org>
Date: Thu, 20 Mar 2014 21:36:37 -0400
Somehow manage to fix the sizing bugs
Summary:
Remove a single `vertical-align: top`, and somewhow it now works. May
the gods of CSS have mercy on us. Also added some tests.
Test Plan:
- See that the huxley tests don't have any changes
- See that the new huxley screenshots look reasonable
- Run the normal tests and see that they work
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D7494
Diffstat:
10 files changed, 78 insertions(+), 33 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
build
node_modules
last.png
+diff.png
diff --git a/buildTree.js b/buildTree.js
@@ -130,6 +130,7 @@ var groupTypes = {
}
var supsub;
+ var fixIE = makeSpan(["fix-ie"], []);
if (!group.value.sup) {
v = Math.max(v, fontMetrics.metrics.sub1,
@@ -140,7 +141,7 @@ var groupTypes = {
subwrap.depth = subwrap.depth + v;
subwrap.height = 0;
- supsub = makeSpan(["msupsub"], [subwrap]);
+ supsub = makeSpan(["msupsub"], [subwrap, fixIE]);
} else if (!group.value.sub) {
u = Math.max(u, p,
sup.depth + 0.25 * fontMetrics.metrics.xHeight);
@@ -150,7 +151,7 @@ var groupTypes = {
supwrap.height = supwrap.height + u;
supwrap.depth = 0;
- supsub = makeSpan(["msupsub"], [supwrap]);
+ supsub = makeSpan(["msupsub"], [supwrap, fixIE]);
} else {
u = Math.max(u, p,
sup.depth + 0.25 * fontMetrics.metrics.xHeight);
@@ -176,7 +177,7 @@ var groupTypes = {
subwrap.height = 0;
subwrap.depth = subwrap.depth + v;
- supsub = makeSpan(["msupsub"], [supwrap, subwrap]);
+ supsub = makeSpan(["msupsub"], [supwrap, subwrap, fixIE]);
}
return makeSpan([getTypeOfGroup(group.value.base)], [base, supsub]);
@@ -244,7 +245,9 @@ var groupTypes = {
denomrow.height = 0;
denomrow.depth = denomrow.depth + v;
- var frac = makeSpan([], [numerrow, mid, denomrow]);
+ var fixIE = makeSpan(["fix-ie"], []);
+
+ var frac = makeSpan([], [numerrow, mid, denomrow, fixIE]);
frac.height *= fstyle.sizeMultiplier / options.style.sizeMultiplier;
frac.depth *= fstyle.sizeMultiplier / options.style.sizeMultiplier;
@@ -379,11 +382,6 @@ var buildGroup = function(group, options, prev) {
var multiplier = options.style.sizeMultiplier /
options.parentStyle.sizeMultiplier;
- if (multiplier > 1) {
- throw new ParseError(
- "Error: Can't go from small to large style");
- }
-
groupNode.height *= multiplier;
groupNode.depth *= multiplier;
}
@@ -392,11 +390,6 @@ var buildGroup = function(group, options, prev) {
var multiplier = sizingMultiplier[options.size] /
sizingMultiplier[options.parentSize];
- if (multiplier > 1) {
- throw new ParseError(
- "Error: Can't go from small to large size");
- }
-
if (options.depth > 1) {
throw new ParseError(
"Error: Can't use sizing outside of the root node");
diff --git a/static/katex.less b/static/katex.less
@@ -163,7 +163,6 @@ big parens
.baseline-align-hack-outer() {
display: inline-block;
- vertical-align: top;
}
.baseline-align-hack-middle() {
@@ -184,7 +183,8 @@ big parens
margin-left: 0.05em;
.msup,
- .msub {
+ .msub,
+ .fix-ie {
.baseline-align-hack-middle;
position: relative;
@@ -192,6 +192,10 @@ big parens
.baseline-align-hack-inner;
}
}
+
+ .fix-ie {
+ display: inline-block;
+ }
}
.mfrac {
@@ -199,7 +203,8 @@ big parens
.mfracnum,
.mfracmid,
- .mfracden {
+ .mfracden,
+ .fix-ie {
.baseline-align-hack-middle;
position: relative;
text-align: center;
@@ -209,6 +214,10 @@ big parens
}
}
+ .fix-ie {
+ display: inline-block;
+ }
+
.mfracmid > span {
width: 100%;
diff --git a/test/huxley/Huxleyfile b/test/huxley/Huxleyfile
@@ -1,32 +1,38 @@
[BasicTest]
-url=http://localhost:7936/test/huxley/test.html#a
+url=http://localhost:7936/test/huxley/test.html?m=a
[FractionTest]
-url=http://localhost:7936/test/huxley/test.html#\dfrac{a}{b}\frac{a}{b}\tfrac{a}{b}
+url=http://localhost:7936/test/huxley/test.html?m=\dfrac{a}{b}\frac{a}{b}\tfrac{a}{b}
[NestedFractions]
-url=http://localhost:7936/test/huxley/test.html#\dfrac{\frac{a}{b}}{\frac{c}{d}}\dfrac{\dfrac{a}{b}}{\dfrac{c}{d}}\frac{\frac{a}{b}}{\frac{c}{d}}
+url=http://localhost:7936/test/huxley/test.html?m=\dfrac{\frac{a}{b}}{\frac{c}{d}}\dfrac{\dfrac{a}{b}}{\dfrac{c}{d}}\frac{\frac{a}{b}}{\frac{c}{d}}
[Exponents]
-url=http://localhost:7936/test/huxley/test.html#a^{a^a_a}_{a^a_a}
+url=http://localhost:7936/test/huxley/test.html?m=a^{a^a_a}_{a^a_a}
[Colors]
-url=http://localhost:7936/test/huxley/test.html#\blue{a}\green{b}\red{c}
+url=http://localhost:7936/test/huxley/test.html?m=\blue{a}\green{b}\red{c}
[GreekLetters]
-url=http://localhost:7936/test/huxley/test.html#\alpha\beta\gamma\omega
+url=http://localhost:7936/test/huxley/test.html?m=\alpha\beta\gamma\omega
[Baseline]
-url=http://localhost:7936/test/huxley/test.html#a+b-c\cdot d/e
+url=http://localhost:7936/test/huxley/test.html?m=a+b-c\cdot d/e
[Spacing]
-url=http://localhost:7936/test/huxley/test.html#[-1][1-1]1=1(=1)\lvert a\rvert
+url=http://localhost:7936/test/huxley/test.html?m=[-1][1-1]1%%3D1(%%3D1)\lvert a\rvert
[Functions]
-url=http://localhost:7936/test/huxley/test.html#\sin\cos\tan\ln\log
+url=http://localhost:7936/test/huxley/test.html?m=\sin\cos\tan\ln\log
[Lap]
-url=http://localhost:7936/test/huxley/test.html#ab\llap{f}cd\rlap{g}h
+url=http://localhost:7936/test/huxley/test.html?m=ab\llap{f}cd\rlap{g}h
+
+[Sizing]
+url=http://localhost:7936/test/huxley/test.html?m=\Huge{x}\LARGE{y}\normalsize{z}\scriptsize{w}
+
+[SizingBaseline]
+url=http://localhost:7936/test/huxley/test.html?m=\tiny{a+b}a+b\Huge{a+b}&pre=x&post=M
[KaTeX]
-url=http://localhost:7936/test/huxley/test.html#\KaTeX
-\ No newline at end of file
+url=http://localhost:7936/test/huxley/test.html?m=\KaTeX
+\ No newline at end of file
diff --git a/test/huxley/Sizing.huxley/record.json b/test/huxley/Sizing.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/Sizing.huxley/screenshot0.png b/test/huxley/Sizing.huxley/screenshot0.png
Binary files differ.
diff --git a/test/huxley/SizingBaseline.huxley/record.json b/test/huxley/SizingBaseline.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/SizingBaseline.huxley/screenshot0.png b/test/huxley/SizingBaseline.huxley/screenshot0.png
Binary files differ.
diff --git a/test/huxley/test.html b/test/huxley/test.html
@@ -6,17 +6,27 @@
<link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
<link href="/katex.less.css" rel="stylesheet" type="text/css">
<style type="text/css">
- #math {
+ #math, #pre, #post {
font-size: 4em;
}
</style>
</head>
<body>
- <div id="math"></div>
+ <span id="pre"></span>
+ <span id="math"></span>
+ <span id="post"></span>
<script type="text/javascript">
- var hash = window.location.hash.slice(1);
+ var query = {};
+ var queryVars = window.location.search.slice(1).split("&");
+ console.log(queryVars);
+ for (var i = 0; i < queryVars.length; i++) {
+ var split = queryVars[i].split("=");
+ query[split[0]] = decodeURIComponent(split[1]);
+ }
var mathNode = document.getElementById("math");
- katex.process(hash, mathNode);
+ katex.process(query["m"], mathNode);
+ document.getElementById("pre").innerHTML = query["pre"] || "";
+ document.getElementById("post").innerHTML = query["post"] || "";
</script>
</body>
</html>
diff --git a/test/katex-tests.js b/test/katex-tests.js
@@ -423,3 +423,27 @@ describe("A frac parser", function() {
expect(tfracParse.value.denom).toBeDefined();
});
});
+
+describe("A sizing parser", function() {
+ var sizeExpression = "\\Huge{x}\\small{x}";
+ var nestedSizeExpression = "\\Huge{\\small{x}}";
+
+ it("should not fail", function() {
+ expect(function() {
+ parseTree(sizeExpression);
+ }).not.toThrow();
+ });
+
+ it("should produce a sizing node", function() {
+ var parse = parseTree(sizeExpression)[0];
+
+ expect(parse.type).toMatch("sizing");
+ expect(parse.value).toBeDefined();
+ });
+
+ it("should not parse a nested size expression", function() {
+ expect(function() {
+ parseExpression(nestedSizeExpression);
+ }).toThrow();
+ });
+});
