patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-06 03:38:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Basic perceptual diffing support for KaTeX

Browse Source 
Summary:
This commit adds an HTML file for creating perceptual diffs (pdiff.html),
a reference screenshot of that HTML file (pdiff.png), and a quick script
for comparing that screenshot to a newly generated one (pdiff.js).

Also added a basic README.

Test Plan: make pdiff

Reviewers: alpert

Reviewed By: alpert

Differential Revision: http://phabricator.khanacademy.org/D6415
This commit is contained in:
Alex Lopatin
2014-01-29 16:29:21 -08:00
parent 50c1242147
commit a3663ce17c
6 changed files with 124 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
test/pdiff.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>KaTeX Perceptual Diff</title>
<style>
body {
margin: 0px;
padding: 0px;
font-size: 36px;
}
div + div {
margin-top: 0.5em;
}
span.text {
font-family: katex_main;
}
</style>
<script src="../katex.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
// If not for IE8, this would be "div > span:not(.text)"
var spans = document.querySelectorAll("div span");
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
if (span.className !== "text") {
var tex = span.innerHTML;
katex.process(tex, span);
}
}
};
</script>
<link href="../fonts/fonts.css" rel="stylesheet" type="text/css">
<link href="../katex.less" rel="stylesheet" type="text/less">
<!--[if gte IE 9]><!-->
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<link href="../katex.less.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<div><span>1\le2+2=4\ge3\ne\pi</span></div>
<div><span>x^{x^{x_b}_b}x_{b_b}x^x_b</span></div>
<div><span>\tiny{a}\scriptsize{b}\footnotesize{c}\small{d}\normalsize{e}f</span></div>
<div><span>\blue{a}\orange{b}\pink{c}\red{d}\green{e}\gray{f}\purple{g}</span></div>
<div><span>\angle ABC \approx \frac{3}{4}\!\lvert x \rvert \cos\theta</span></div>
<div><span>\langle a , b \rangle \colon \div \pm \infty</span></div>
<div><span>(mn)^3=\blue{m^3n^3}\in\dfrac{5m^4\cdot\blue{m^3n^3}}{15m^2} \dfrac{5m^7n^3}{15m^2}</span></div>
<div><span>\blue\dfrac{\frac{\phi^2}{3}-G_a^{x^3}}{2\times3+4}+\orange\dfrac{(x^2+y^2)^\frac{1}{2}}{\tan\psi^\tau+2/3}</span></div>
<div><span>\quad 800\cdot (\frac{1}{2})^{\frac{t}{14}}=50</span></div>
<div><span class="text">text text text</span><span>\dfrac{stuff}{things}</span><span class="text">text text text</span></div>
</body>
</html>

37
test/pdiff.js Normal file
View File

@@ -0,0 +1,37 @@
var fs = require('fs'),
gm = require('gm'),
path = require('path');
var original = path.join(__dirname, 'pdiff.png'),
modified = path.join(__dirname, '../build/pdiff.png'),
difference = path.join(__dirname, '../build/DIFF.png');
var colors = {
reset: "\033[0m",
red: "\033[31m",
green: "\033[32m"
};
function log(message, color) {
console.log(color + message + colors.reset);
}
gm.compare(original, modified, /* tolerance */ 0, function(err, isEqual) {
if (err) {
console.error(err);
} else if (isEqual) {
log("No perceptible differences.", colors.green);
// Remove any previously generated difference images
fs.unlink(difference, function() {});
} else {
log("Perceptible difference detected! See build/DIFF.png", colors.red);
// Generate new difference image
gm.compare(original, modified, {
/* output */ file: difference
}, function(err) {
if (err) {
console.error(err);
}
});
}
});

BIN
test/pdiff.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB