Basic perceptual diffing support for KaTeX
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
parent
50c1242147
commit
a3663ce17c
11
Makefile
11
Makefile
|
|
@ -1,8 +1,10 @@
|
||||||
.PHONY: build setup copy serve clean
|
.PHONY: build setup copy serve clean
|
||||||
build: setup build/katex.js build/katex.less.css
|
build: setup build/katex.js build/katex.less.css pdiff
|
||||||
|
|
||||||
setup:
|
setup:
|
||||||
npm install
|
npm install
|
||||||
|
brew install webkit2png
|
||||||
|
brew install graphicsmagick
|
||||||
|
|
||||||
compress: build/katex.min.js
|
compress: build/katex.min.js
|
||||||
@printf "Minified, gzipped size: "
|
@printf "Minified, gzipped size: "
|
||||||
|
|
@ -20,5 +22,12 @@ build/katex.less.css: static/katex.less
|
||||||
serve:
|
serve:
|
||||||
node server.js
|
node server.js
|
||||||
|
|
||||||
|
pdiff:
|
||||||
|
@printf "Creating new pdiff image...\n"
|
||||||
|
@webkit2png http://localhost:7936/test/pdiff.html -F --transparent -D build -o pdiff >/dev/null 2>&1
|
||||||
|
@mv build/pdiff-full.png build/pdiff.png
|
||||||
|
@printf "Comparing to reference pdiff image...\n"
|
||||||
|
@node test/pdiff.js
|
||||||
|
|
||||||
clean:
|
clean:
|
||||||
rm -rf build/*
|
rm -rf build/*
|
||||||
|
|
|
||||||
17
README.md
Normal file
17
README.md
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
KaTeX
|
||||||
|
=====
|
||||||
|
|
||||||
|
Fast math!
|
||||||
|
|
||||||
|
To run locally
|
||||||
|
--------------
|
||||||
|
make setup
|
||||||
|
make serve
|
||||||
|
|
||||||
|
* [Test page](localhost:7936/)
|
||||||
|
* [Unit tests](localhost:7936/test/test.html)
|
||||||
|
* [Perceptual diff](localhost:7936/test/pdiff.html)
|
||||||
|
|
||||||
|
Perceptual diff
|
||||||
|
---------------
|
||||||
|
make pdiff
|
||||||
|
|
@ -1,10 +1,16 @@
|
||||||
{
|
{
|
||||||
"name": "katex",
|
"name": "katex",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
|
"description": "Fast math!",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/Khan/KaTeX.git"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"browserify": "~2.29.1",
|
"browserify": "~2.29.1",
|
||||||
"express": "~3.3.3",
|
"express": "~3.3.3",
|
||||||
"less": "~1.4.2",
|
"less": "~1.4.2",
|
||||||
"through": "~2.3.4"
|
"through": "~2.3.4",
|
||||||
|
"gm": "~1.14.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
53
test/pdiff.html
Normal file
53
test/pdiff.html
Normal 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
37
test/pdiff.js
Normal 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
BIN
test/pdiff.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Loading…
Reference in New Issue
Block a user