experimental/Intersection/op.htm - platform/external/skia - Gitiles

 <html>
 <head>
 <div style="height:0">

 <div id="testSimplifyQuadratic1">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(1, 0, 1, 1);
     path.close();
     path.moveTo(1, 0);
     path.quadTo(0, 0, 0, 1);
     path.close();
     testSimplify(path, true, out, bitmap);
 }
 </div>

 <div id="testSimplifyQuadratic2">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(20, 0, 20, 20);
     path.close();
     path.moveTo(20, 0);
     path.quadTo(0, 0, 0, 20);
     path.close();
     testSimplify(path, true, out, bitmap);
 }
 </div>

 <div id="testSimplifyQuadratic3">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(20, 0, 20, 20);
     path.close();
     path.moveTo(0, 20);
     path.quadTo(0, 0, 20, 0);
     path.close();
     testSimplify(path, true, out, bitmap);
 }
 </div>

 <div id="testSimplifyQuadratic4">
     SkPath path, out;
     path.moveTo(0, 20);
     path.quadTo(20, 0, 40, 20);
     path.close();
     path.moveTo(40, 10);
     path.quadTo(20, 30, 0, 10);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic5">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(0, 0);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 0);
     path.quadTo(0, 0, 0, 1);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic6">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(1, 0);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 0);
     path.quadTo(1, 0, 0, 1);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic7">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(0, 1);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 0);
     path.quadTo(1, 0, 0, 2);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic8">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(0, 0);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 0);
     path.quadTo(1, 0, 0, 2);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic9">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(1, 1);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 0);
     path.quadTo(1, 0, 2, 2);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic10">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(0, 0);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 1);
     path.quadTo(1, 1, 1, 2);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic11">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(0, 2);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(2, 1);
     path.quadTo(2, 2, 3, 3);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic12">
     SkPath path, out;
     path.moveTo(0, 0);
     path.lineTo(0, 2);
     path.lineTo(0, 0);
     path.close();
     path.moveTo(3, 0);
     path.quadTo(1, 1, 0, 2);
     path.lineTo(3, 0);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic13">
     SkPath path, out;
 path.moveTo(0, 0);
 path.quadTo(0, 0, 1, 0);
 path.lineTo(1, 1);
 path.lineTo(0, 0);
 path.close();
 path.moveTo(0, 0);
 path.quadTo(3, 0, 1, 1);
 path.lineTo(0, 0);
 path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic14">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(1, 1);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 0);
     path.quadTo(0, 1, 2, 1);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic15">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 1, 3);
     path.lineTo(3, 3);
     path.close();
     path.moveTo(0, 1);
     path.lineTo(1, 1);
     path.quadTo(0, 3, 3, 3);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic16">
     SkPath path, out;
     path.moveTo(0, 0);
     path.quadTo(0, 0, 0, 0);
     path.lineTo(0, 1);
     path.close();
     path.moveTo(0, 0);
     path.lineTo(0, 0);
     path.quadTo(1, 0, 0, 1);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic17">
     SkPath path, out;
     path.moveTo(8, 8);
     path.quadTo(10, 10, 8, -10);
     path.close();
     path.moveTo(8, 8);
     path.quadTo(12, 12, 14, 4);
     path.close();
     path.moveTo(8, 8);
     path.quadTo(9, 9, 10, 8);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 }
 </div>

 <div id="testSimplifyQuadratic18">
     SkPath path, out;
     path.moveTo(8.0000000000000071, 8.0000000000000071);
     path.quadTo(8.7289570079366854, 8.7289570079366889, 9.3914917259458743, 9.0593802763083691);
     path.close();
     path.moveTo(8.0000000000000142, 8.0000000000000142);
     path.quadTo(8.1250000000000107, 8.1250000000000071, 8.2500000000000071, 8.2187500000000053);
     path.close();
     testSimplify(path, true, out, bitmap);
     drawAsciiPaths(path, out, true);
 </div>

 <div id="testSimplifyQuadratic19">
     SkPath path, simple;
     path.moveTo(0,4);
     path.lineTo(6,4);
     path.lineTo(3,1);
     path.close();
     path.moveTo(2,3);
     path.lineTo(3,2);
     path.lineTo(4,3);
     path.close();
     testSimplifyx(path);
 </div>

 <div id="testSimplifyQuadratic20">
     SkPath path, simple;
     path.moveTo(0,4);
     path.lineTo(6,4);
     path.lineTo(3,1);
     path.close();
     path.moveTo(2,3);
     path.lineTo(4,3);
     path.lineTo(3,2);
     path.close();
     testSimplifyx(path);
 </div>

 <div id="testSimplifyQuadratic21">
     SkPath path, simple;
     path.moveTo(0,4);
     path.lineTo(8,4);
     path.lineTo(4,0);
     path.close();
     path.moveTo(2,2);
     path.lineTo(3,3);
     path.lineTo(4,2);
     path.close();
     testSimplifyx(path);
 </div>

 <div id="testLine6">
     SkPath path, simple;
     path.moveTo(0,0);
     path.lineTo(4,0);
     path.lineTo(2,2);
     path.close();
     path.moveTo(2,0);
     path.lineTo(6,0);
     path.lineTo(4,2);
     path.close();
     testSimplifyx(path);
 </div>

 <!-- don't support addRect yet -->
 <div id="testLine17">
     SkPath path, simple;
     path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
     path.addRect(4, 12, 13, 13, (SkPath::Direction) 0);
     testSimplifyx(path);
 </div>

 </div>

 <script type="text/javascript">

 var testDivs = [
     testLine6,
     testSimplifyQuadratic21,
     testSimplifyQuadratic20,
     testSimplifyQuadratic19,
     testSimplifyQuadratic18,
     testSimplifyQuadratic17,
     testSimplifyQuadratic16,
     testSimplifyQuadratic15,
     testSimplifyQuadratic14,
     testSimplifyQuadratic13,
     testSimplifyQuadratic12,
     testSimplifyQuadratic11,
     testSimplifyQuadratic10,
     testSimplifyQuadratic9,
     testSimplifyQuadratic8,
     testSimplifyQuadratic7,
     testSimplifyQuadratic6,
     testSimplifyQuadratic5,
     testSimplifyQuadratic4,
     testSimplifyQuadratic3,
     testSimplifyQuadratic2,
     testSimplifyQuadratic1,
 ];

 var scale, columns, rows, xStart, yStart;

 var ticks = 0.1;
 var at_x = 13 + 0.5;
 var at_y = 13 + 0.5;

 var tests = [];
 var testIndex = 0;

 var ctx;

 function parse(test) {
     var contours = [];
     var contourStrs = test.split("path.close();");
     var pattern = /-?\d+\.*\d*/g;
     for (var c in contourStrs) {
         var contour = contourStrs[c];
         var verbStrs = contour.split("path");
         var verbs = [];
         for (var v in verbStrs) {
             var verbStr = verbStrs[v];
             var points = verbStr.match(pattern);
             var pts = [];
             for (var wd in points) {
                 var num = parseFloat(points[wd]);
                 if (isNaN(num)) continue;
                 pts.push(num);
             }
             if (pts.length > 0)
                 verbs.push(pts);
         }
         if (verbs.length > 0) {
             var lastIndex = verbs.length - 1;
             var lastVerb = verbs[lastIndex];
             var lastLen = lastVerb.length;
             if (verbs[0][0] != lastVerb[lastLen - 2] && verbs[0][1] != lastVerb[lastLen - 1]) {
                 var lastPts = [];
                 lastPts.push(verbs[0][0]);
                 lastPts.push(verbs[0][1]);
                 verbs.push(lastPts);
             }
             contours.push(verbs);
         }
     }
     if (contours.length > 0)
         tests.push(contours);
 }

 function init(test) {
     var canvas = document.getElementById('canvas');
     if (!canvas.getContext) return;
     ctx = canvas.getContext('2d');
     var xmin = Infinity;
     var xmax = -Infinity;
     var ymin = Infinity;
     var ymax = -Infinity;
     for (var contours in test) {
         var contour = test[contours];
         for (var verbs in contour) {
             var verb = contour[verbs];
             var last = verb.length;
             for (var idx = 0; idx < last; idx += 2) {
                 xmin = Math.min(xmin, verb[idx]);
                 xmax = Math.max(xmax, verb[idx]);
                 ymin = Math.min(ymin, verb[idx + 1]);
                 ymax = Math.max(ymax, verb[idx + 1]);
             }
         }
     }
     var subscale = 1;
     while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
         subscale *= 10;
     }
     columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
     rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
     xStart = Math.floor(xmin);
     yStart = Math.floor(ymin);
     var hscale = ctx.canvas.width / columns / ticks;
     var vscale = ctx.canvas.height / rows / ticks;
     scale = Math.floor(Math.min(hscale, vscale)) * subscale;
 }

 function drawPoint(px, py, xoffset, yoffset, unit) {
     var label = px.toFixed(3) + ", " + py.toFixed(3);
     var _px = px * unit + xoffset;
     var _py = py * unit + yoffset;
     ctx.beginPath();
     ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
     ctx.closePath();
     ctx.fill();
     ctx.fillText(label, _px + 5, _py);
 }

 function draw(test, _at_x, _at_y, scale) {
     var unit = scale * ticks;
     ctx.lineWidth = 1;
     var i;
     for (i = 0; i <= rows * ticks; ++i) {
         ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
         ctx.beginPath();
         ctx.moveTo(_at_x + 0, _at_y + i * scale);
         ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
         ctx.stroke();
     }
     for (i = 0; i <= columns * ticks; ++i) {
         ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
         ctx.beginPath();
         ctx.moveTo(_at_x + i * scale, _at_y + 0);
         ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
         ctx.stroke();
     }

     var xoffset = xStart * -unit + _at_x;
     var yoffset = yStart * -unit + _at_y;

     ctx.fillStyle = "rgb(40,80,60)"
     for (i = 0; i <= columns; i += (1 / ticks))
     {
         num = (xoffset - _at_x) / -unit + i;
         ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
     }
     for (i = 0; i <= rows; i += (1 / ticks))
     {
         num = (yoffset - _at_x) / -unit + i;
         ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
     }
     ctx.strokeStyle = "red";
     var contours, verbs, pts;
     ctx.beginPath();
     for (contours in test) {
         var contour = test[contours];
         if (contours == 2) ctx.strokeStyle = "blue";
         var first = true;
         for (verbs in contour) {
             var verb = contour[verbs];
             switch (verb.length) {
                 case 2:
                     if (first) {
                         ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
                         first = false;
                     } else
                         ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
                     break;
                 case 4:
                     ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
                         xoffset + verb[2] * unit, yoffset + verb[3] * unit);
                     break;
                 case 6:
                     ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
                         xoffset + verb[2] * unit, yoffset + verb[3] * unit,
                         xoffset + verb[4] * unit, yoffset + verb[5] * unit);
                     break;
             }
         }
         ctx.closePath();
     }
     ctx.stroke();
     ctx.fillStyle="rgba(192,192,255, 0.3)";
     ctx.fill();

     ctx.fillStyle="blue";
     for (contours in test) {
         var contour = test[contours];
         for (verbs in contour) {
             var verb = contour[verbs];
             for (i = 0; i < verb.length; i += 2) {
                 x = verb[i];
                 y = verb[i + 1];
                 drawPoint(x, y, xoffset, yoffset, unit);
             }
         }
     }
 }

 var mouseX = Infinity, mouseY;

 function calcXY() {
     var e = window.event;
 	var tgt = e.target || e.srcElement;
     var left = tgt.offsetLeft;
     var top = tgt.offsetTop;
     var unit = scale * ticks;
     mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
     mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
 }

 function handleMouseOver() {
     calcXY();
     var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
     ctx.beginPath();
     ctx.rect(300,100,200,10);
     ctx.fillStyle="white";
     ctx.fill();
     ctx.fillStyle="black";
     ctx.fillText(num, 300, 108);
 }

 function handleMouseClick() {
     calcXY();
 //    drawInset();
 }

 function drawTop() {
     init(tests[testIndex]);
     redraw();
 }

 function redraw() {
     ctx.beginPath();
     ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.fillStyle="white";
     ctx.fill();
     draw(tests[testIndex], at_x, at_y, scale);
 //    if (insetScale != scale && mouseX != Infinity)
 //        drawInset();
 }

 function doKeyPress(evt) {
     var char = String.fromCharCode(evt.charCode);
     switch (char) {
     case 'N':
     case 'n':
         if (++testIndex >= tests.length)
             testIndex = 0;
         mouseX = Infinity;
         drawTop();
         break;
     case 'P':
     case 'p':
         if (--testIndex < 0)
             testIndex = tests.length - 1;
         mouseX = Infinity;
         drawTop();
         break;
     case 'T':
     case 't':
         break;
     case '-':
             redraw();
         break;
     case '=':
     case '+':
         redraw();
         break;
     }
 }

 function start() {
     for (i = 0; i < testDivs.length; ++i) {
         var str = testDivs[i].firstChild.data;
         parse(str);
     }
     drawTop();
     window.addEventListener('keypress', doKeyPress, true);
 }

 </script>
 </head>

 <body onLoad="start();">
 <canvas id="canvas" width="1500" height="1000"
     onmousemove="handleMouseOver()"
     onclick="handleMouseClick()"
     ></canvas >
 </body>
 </html>
	<html>
	<head>
	<div style="height:0">

	<div id="testSimplifyQuadratic1">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(1, 0, 1, 1);
	path.close();
	path.moveTo(1, 0);
	path.quadTo(0, 0, 0, 1);
	path.close();
	testSimplify(path, true, out, bitmap);
	}
	</div>

	<div id="testSimplifyQuadratic2">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(20, 0, 20, 20);
	path.close();
	path.moveTo(20, 0);
	path.quadTo(0, 0, 0, 20);
	path.close();
	testSimplify(path, true, out, bitmap);
	}
	</div>

	<div id="testSimplifyQuadratic3">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(20, 0, 20, 20);
	path.close();
	path.moveTo(0, 20);
	path.quadTo(0, 0, 20, 0);
	path.close();
	testSimplify(path, true, out, bitmap);
	}
	</div>

	<div id="testSimplifyQuadratic4">
	SkPath path, out;
	path.moveTo(0, 20);
	path.quadTo(20, 0, 40, 20);
	path.close();
	path.moveTo(40, 10);
	path.quadTo(20, 30, 0, 10);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic5">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(0, 0);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 0);
	path.quadTo(0, 0, 0, 1);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic6">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(1, 0);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 0);
	path.quadTo(1, 0, 0, 1);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic7">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(0, 1);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 0);
	path.quadTo(1, 0, 0, 2);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic8">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(0, 0);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 0);
	path.quadTo(1, 0, 0, 2);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic9">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(1, 1);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 0);
	path.quadTo(1, 0, 2, 2);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic10">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(0, 0);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 1);
	path.quadTo(1, 1, 1, 2);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic11">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(0, 2);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(2, 1);
	path.quadTo(2, 2, 3, 3);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic12">
	SkPath path, out;
	path.moveTo(0, 0);
	path.lineTo(0, 2);
	path.lineTo(0, 0);
	path.close();
	path.moveTo(3, 0);
	path.quadTo(1, 1, 0, 2);
	path.lineTo(3, 0);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic13">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 1, 0);
	path.lineTo(1, 1);
	path.lineTo(0, 0);
	path.close();
	path.moveTo(0, 0);
	path.quadTo(3, 0, 1, 1);
	path.lineTo(0, 0);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic14">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(1, 1);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 0);
	path.quadTo(0, 1, 2, 1);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic15">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 1, 3);
	path.lineTo(3, 3);
	path.close();
	path.moveTo(0, 1);
	path.lineTo(1, 1);
	path.quadTo(0, 3, 3, 3);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic16">
	SkPath path, out;
	path.moveTo(0, 0);
	path.quadTo(0, 0, 0, 0);
	path.lineTo(0, 1);
	path.close();
	path.moveTo(0, 0);
	path.lineTo(0, 0);
	path.quadTo(1, 0, 0, 1);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic17">
	SkPath path, out;
	path.moveTo(8, 8);
	path.quadTo(10, 10, 8, -10);
	path.close();
	path.moveTo(8, 8);
	path.quadTo(12, 12, 14, 4);
	path.close();
	path.moveTo(8, 8);
	path.quadTo(9, 9, 10, 8);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	}
	</div>

	<div id="testSimplifyQuadratic18">
	SkPath path, out;
	path.moveTo(8.0000000000000071, 8.0000000000000071);
	path.quadTo(8.7289570079366854, 8.7289570079366889, 9.3914917259458743, 9.0593802763083691);
	path.close();
	path.moveTo(8.0000000000000142, 8.0000000000000142);
	path.quadTo(8.1250000000000107, 8.1250000000000071, 8.2500000000000071, 8.2187500000000053);
	path.close();
	testSimplify(path, true, out, bitmap);
	drawAsciiPaths(path, out, true);
	</div>

	<div id="testSimplifyQuadratic19">
	SkPath path, simple;
	path.moveTo(0,4);
	path.lineTo(6,4);
	path.lineTo(3,1);
	path.close();
	path.moveTo(2,3);
	path.lineTo(3,2);
	path.lineTo(4,3);
	path.close();
	testSimplifyx(path);
	</div>

	<div id="testSimplifyQuadratic20">
	SkPath path, simple;
	path.moveTo(0,4);
	path.lineTo(6,4);
	path.lineTo(3,1);
	path.close();
	path.moveTo(2,3);
	path.lineTo(4,3);
	path.lineTo(3,2);
	path.close();
	testSimplifyx(path);
	</div>

	<div id="testSimplifyQuadratic21">
	SkPath path, simple;
	path.moveTo(0,4);
	path.lineTo(8,4);
	path.lineTo(4,0);
	path.close();
	path.moveTo(2,2);
	path.lineTo(3,3);
	path.lineTo(4,2);
	path.close();
	testSimplifyx(path);
	</div>

	<div id="testLine6">
	SkPath path, simple;
	path.moveTo(0,0);
	path.lineTo(4,0);
	path.lineTo(2,2);
	path.close();
	path.moveTo(2,0);
	path.lineTo(6,0);
	path.lineTo(4,2);
	path.close();
	testSimplifyx(path);
	</div>

	<!-- don't support addRect yet -->
	<div id="testLine17">
	SkPath path, simple;
	path.addRect(0, 0, 12, 12, (SkPath::Direction) 0);
	path.addRect(4, 12, 13, 13, (SkPath::Direction) 0);
	testSimplifyx(path);
	</div>

	</div>

	<script type="text/javascript">

	var testDivs = [
	testLine6,
	testSimplifyQuadratic21,
	testSimplifyQuadratic20,
	testSimplifyQuadratic19,
	testSimplifyQuadratic18,
	testSimplifyQuadratic17,
	testSimplifyQuadratic16,
	testSimplifyQuadratic15,
	testSimplifyQuadratic14,
	testSimplifyQuadratic13,
	testSimplifyQuadratic12,
	testSimplifyQuadratic11,
	testSimplifyQuadratic10,
	testSimplifyQuadratic9,
	testSimplifyQuadratic8,
	testSimplifyQuadratic7,
	testSimplifyQuadratic6,
	testSimplifyQuadratic5,
	testSimplifyQuadratic4,
	testSimplifyQuadratic3,
	testSimplifyQuadratic2,
	testSimplifyQuadratic1,
	];

	var scale, columns, rows, xStart, yStart;

	var ticks = 0.1;
	var at_x = 13 + 0.5;
	var at_y = 13 + 0.5;

	var tests = [];
	var testIndex = 0;

	var ctx;

	function parse(test) {
	var contours = [];
	var contourStrs = test.split("path.close();");
	var pattern = /-?\d+\.\d/g;
	for (var c in contourStrs) {
	var contour = contourStrs[c];
	var verbStrs = contour.split("path");
	var verbs = [];
	for (var v in verbStrs) {
	var verbStr = verbStrs[v];
	var points = verbStr.match(pattern);
	var pts = [];
	for (var wd in points) {
	var num = parseFloat(points[wd]);
	if (isNaN(num)) continue;
	pts.push(num);
	}
	if (pts.length > 0)
	verbs.push(pts);
	}
	if (verbs.length > 0) {
	var lastIndex = verbs.length - 1;
	var lastVerb = verbs[lastIndex];
	var lastLen = lastVerb.length;
	if (verbs[0][0] != lastVerb[lastLen - 2] && verbs[0][1] != lastVerb[lastLen - 1]) {
	var lastPts = [];
	lastPts.push(verbs[0][0]);
	lastPts.push(verbs[0][1]);
	verbs.push(lastPts);
	}
	contours.push(verbs);
	}
	}
	if (contours.length > 0)
	tests.push(contours);
	}

	function init(test) {
	var canvas = document.getElementById('canvas');
	if (!canvas.getContext) return;
	ctx = canvas.getContext('2d');
	var xmin = Infinity;
	var xmax = -Infinity;
	var ymin = Infinity;
	var ymax = -Infinity;
	for (var contours in test) {
	var contour = test[contours];
	for (var verbs in contour) {
	var verb = contour[verbs];
	var last = verb.length;
	for (var idx = 0; idx < last; idx += 2) {
	xmin = Math.min(xmin, verb[idx]);
	xmax = Math.max(xmax, verb[idx]);
	ymin = Math.min(ymin, verb[idx + 1]);
	ymax = Math.max(ymax, verb[idx + 1]);
	}
	}
	}
	var subscale = 1;
	while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
	subscale *= 10;
	}
	columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
	rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
	xStart = Math.floor(xmin);
	yStart = Math.floor(ymin);
	var hscale = ctx.canvas.width / columns / ticks;
	var vscale = ctx.canvas.height / rows / ticks;
	scale = Math.floor(Math.min(hscale, vscale)) * subscale;
	}

	function drawPoint(px, py, xoffset, yoffset, unit) {
	var label = px.toFixed(3) + ", " + py.toFixed(3);
	var _px = px * unit + xoffset;
	var _py = py * unit + yoffset;
	ctx.beginPath();
	ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
	ctx.fillText(label, _px + 5, _py);
	}

	function draw(test, _at_x, _at_y, scale) {
	var unit = scale * ticks;
	ctx.lineWidth = 1;
	var i;
	for (i = 0; i <= rows * ticks; ++i) {
	ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
	ctx.beginPath();
	ctx.moveTo(_at_x + 0, _at_y + i * scale);
	ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
	ctx.stroke();
	}
	for (i = 0; i <= columns * ticks; ++i) {
	ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
	ctx.beginPath();
	ctx.moveTo(_at_x + i * scale, _at_y + 0);
	ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
	ctx.stroke();
	}

	var xoffset = xStart * -unit + _at_x;
	var yoffset = yStart * -unit + _at_y;

	ctx.fillStyle = "rgb(40,80,60)"
	for (i = 0; i <= columns; i += (1 / ticks))
	{
	num = (xoffset - _at_x) / -unit + i;
	ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
	}
	for (i = 0; i <= rows; i += (1 / ticks))
	{
	num = (yoffset - _at_x) / -unit + i;
	ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
	}
	ctx.strokeStyle = "red";
	var contours, verbs, pts;
	ctx.beginPath();
	for (contours in test) {
	var contour = test[contours];
	if (contours == 2) ctx.strokeStyle = "blue";
	var first = true;
	for (verbs in contour) {
	var verb = contour[verbs];
	switch (verb.length) {
	case 2:
	if (first) {
	ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
	first = false;
	} else
	ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
	break;
	case 4:
	ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
	xoffset + verb[2] * unit, yoffset + verb[3] * unit);
	break;
	case 6:
	ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
	xoffset + verb[2] * unit, yoffset + verb[3] * unit,
	xoffset + verb[4] * unit, yoffset + verb[5] * unit);
	break;
	}
	}
	ctx.closePath();
	}
	ctx.stroke();
	ctx.fillStyle="rgba(192,192,255, 0.3)";
	ctx.fill();

	ctx.fillStyle="blue";
	for (contours in test) {
	var contour = test[contours];
	for (verbs in contour) {
	var verb = contour[verbs];
	for (i = 0; i < verb.length; i += 2) {
	x = verb[i];
	y = verb[i + 1];
	drawPoint(x, y, xoffset, yoffset, unit);
	}
	}
	}
	}

	var mouseX = Infinity, mouseY;

	function calcXY() {
	var e = window.event;
	var tgt = e.target \|\| e.srcElement;
	var left = tgt.offsetLeft;
	var top = tgt.offsetTop;
	var unit = scale * ticks;
	mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
	mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
	}

	function handleMouseOver() {
	calcXY();
	var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
	ctx.beginPath();
	ctx.rect(300,100,200,10);
	ctx.fillStyle="white";
	ctx.fill();
	ctx.fillStyle="black";
	ctx.fillText(num, 300, 108);
	}

	function handleMouseClick() {
	calcXY();
	// drawInset();
	}

	function drawTop() {
	init(tests[testIndex]);
	redraw();
	}

	function redraw() {
	ctx.beginPath();
	ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
	ctx.fillStyle="white";
	ctx.fill();
	draw(tests[testIndex], at_x, at_y, scale);
	// if (insetScale != scale && mouseX != Infinity)
	// drawInset();
	}

	function doKeyPress(evt) {
	var char = String.fromCharCode(evt.charCode);
	switch (char) {
	case 'N':
	case 'n':
	if (++testIndex >= tests.length)
	testIndex = 0;
	mouseX = Infinity;
	drawTop();
	break;
	case 'P':
	case 'p':
	if (--testIndex < 0)
	testIndex = tests.length - 1;
	mouseX = Infinity;
	drawTop();
	break;
	case 'T':
	case 't':
	break;
	case '-':
	redraw();
	break;
	case '=':
	case '+':
	redraw();
	break;
	}
	}

	function start() {
	for (i = 0; i < testDivs.length; ++i) {
	var str = testDivs[i].firstChild.data;
	parse(str);
	}
	drawTop();
	window.addEventListener('keypress', doKeyPress, true);
	}

	</script>
	</head>

	<body onLoad="start();">
	<canvas id="canvas" width="1500" height="1000"
	onmousemove="handleMouseOver()"
	onclick="handleMouseClick()"
	></canvas >
	</body>
	</html>