blob: 5c88fccb906f93cfc8c21e93c59e80fb1f0667f6 [file] [log] [blame]
<script>
// One easy way to generate new expected results for this test: add a
// waitUntilDone here, run with --no-timeout, attach with the Web Inspector,
// and copy out the generated SVG path.
if (!window.internals)
document.write("This test must be run in a test runner.")
function testRects(offset, rects, radius) {
if (radius == undefined)
radius = 8;
var gElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
gElement.setAttribute("transform", "translate(" + offset[0] + ", " + offset[1] + ")");
document.getElementById("paths").appendChild(gElement);
for (var i in rects) {
var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rectElement.setAttribute("x", rects[i][0]);
rectElement.setAttribute("y", rects[i][1]);
rectElement.setAttribute("width", rects[i][2]);
rectElement.setAttribute("height", rects[i][3]);
rectElement.setAttribute("fill", "rgba(0, 0, 0, 0.2)");
rectElement.setAttribute("stroke", "rgba(0, 0, 0, 0.5)");
gElement.appendChild(rectElement);
}
if (window.internals) {
var concatRects = [];
for (var i in rects)
Array.prototype.push.apply(concatRects, rects[i]);
var pathString = window.internals.pathStringWithShrinkWrappedRects(concatRects, radius);
var pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathElement.setAttribute("d", pathString)
pathElement.setAttribute("fill", "none");
pathElement.setAttribute("stroke", "blue");
pathElement.setAttribute("stroke-width", "3");
gElement.appendChild(pathElement);
}
}
window.onload = function () {
// Right and left aligned, touching:
testRects([20, 20], [
[0, 0, 50, 20],
[0, 20, 35, 20],
[0, 40, 20, 20]]);
testRects([20, 90], [
[0, 0, 20, 20],
[0, 20, 35, 20],
[0, 40, 50, 20]]);
testRects([80, 20], [
[0, 0, 50, 20],
[15, 20, 35, 20],
[30, 40, 20, 20]]);
testRects([80, 90], [
[30, 0, 20, 20],
[15, 20, 35, 20],
[0, 40, 50, 20]]);
// Center aligned, touching:
testRects([170, 20], [
[0, 0, 100, 40],
[20, 40, 60, 40],
[35, 80, 30, 40]]);
testRects([270, 20], [
[35, 0, 30, 40],
[20, 40, 60, 40],
[0, 80, 100, 40]]);
testRects([370, 20], [
[0, 0, 100, 40],
[35, 40, 30, 40],
[20, 80, 60, 40]]);
// Other:
testRects([20, 200], [
[0, 0, 40, 40],
[20, 20, 40, 40],
[40, 40, 40, 40]]);
testRects([120, 200], [
[0, 40, 40, 40],
[20, 20, 40, 40],
[40, 0, 40, 40]]);
testRects([220, 200], [
[0, 0, 40, 40],
[0, 40, 40, 40],
[0, 80, 40, 40]]);
testRects([200, 350], [
[0, 0, 100, 50],
[0, 25, 50, 50]]);
// Non-touching:
testRects([20, 300], [
[0, 0, 40, 60],
[0, 80, 40, 40]]);
// Combination of touching and non-touching:
testRects([280, 200], [
[0, 0, 30, 40],
[0, 80, 50, 40],
[60, 0, 40, 40],
[80, 40, 80, 40],
[100, 80, 40, 40],
[150, 0, 40, 20],
[170, 15, 40, 20],
[190, 30, 40, 20]]);
// Enclosing:
testRects([100, 300], [
[0, 0, 50, 50],
[10, 10, 20, 20]]);
testRects([100, 370], [
[0, 0, 50, 50],
[10, 10, 20, 20],
[20, 20, 20, 20]]);
// Harder (widths less than the radius, horizontally arranged, etc.):
testRects([500, 20], [
[0, 0, 40, 40],
[20, 40, 65, 40],
[40, 80, 40, 40]]);
testRects([600, 20], [
[20, 0, 20, 20],
[15, 20, 35, 20],
[0, 40, 50, 20]]);
testRects([650, 100], [
[0, 0, 40, 40],
[40, 0, 40, 40],
[80, 0, 40, 40]]);
testRects([700, 20], [
[20, 0, 20, 20],
[15, 20, 35, 20],
[0, 20, 50, 20]]);
testRects([600, 200], [
[0, 0, 20, 40],
[20, 20, 20, 40],
[40, 0, 20, 40]]);
testRects([700, 200], [
[0, 0, 20, 40],
[20, 25, 20, 40],
[0, 50, 20, 40]]);
// Huge radius:
testRects([20, 450], [
[0, 0, 50, 20],
[0, 20, 35, 20],
[0, 40, 20, 20]], 100);
testRects([20, 520], [
[0, 0, 20, 20],
[0, 20, 35, 20],
[0, 40, 50, 20]], 100);
testRects([80, 450], [
[0, 0, 50, 20],
[15, 20, 35, 20],
[30, 40, 20, 20]], 100);
testRects([80, 520], [
[30, 0, 20, 20],
[15, 20, 35, 20],
[0, 40, 50, 20]], 100);
testRects([170, 450], [
[0, 0, 100, 40],
[20, 40, 60, 40],
[35, 80, 30, 40]], 100);
testRects([270, 450], [
[35, 0, 30, 40],
[20, 40, 60, 40],
[0, 80, 100, 40]], 100);
testRects([370, 450], [
[0, 0, 100, 40],
[35, 40, 30, 40],
[20, 80, 60, 40]], 100);
testRects([750, 500], [
[0, 0, 20, 40],
[20, 20, 20, 40],
[0, 40, 20, 40]]);
// Holes:
testRects([400, 300], [
[30, 0, 40, 40],
[60, 40, 40, 40],
[30, 80, 40, 40],
[0, 40, 40, 40]]);
// Lines with overlap:
testRects([520, 450], [
[0, 0, 50, 20],
[0, 15, 35, 20],
[0, 30, 20, 20]]);
testRects([520, 520], [
[0, 0, 20, 20],
[0, 15, 35, 20],
[0, 30, 50, 20]]);
testRects([580, 450], [
[0, 0, 50, 20],
[15, 15, 35, 20],
[30, 30, 20, 20]]);
testRects([580, 520], [
[30, 0, 20, 20],
[15, 15, 35, 20],
[0, 30, 50, 20]]);
// More than 20 (our shrinkwrapping limit):
testRects([580, 300], [
[0, 0, 1, 1],
[4, 0, 1, 1],
[8, 0, 1, 1],
[12, 0, 1, 1],
[16, 0, 1, 1],
[0, 4, 1, 1],
[4, 4, 1, 1],
[8, 4, 1, 1],
[12, 4, 1, 1],
[16, 4, 1, 1],
[0, 8, 1, 1],
[4, 8, 1, 1],
[8, 8, 1, 1],
[12, 8, 1, 1],
[16, 8, 1, 1],
[0, 12, 1, 1],
[4, 12, 1, 1],
[8, 12, 1, 1],
[12, 12, 1, 1],
[16, 12, 1, 1],
[0, 16, 1, 1],
[4, 16, 1, 1],
[8, 16, 1, 1],
[12, 16, 1, 1],
[16, 16, 1, 1]]);
}
</script>
<style>
body {
margin: 0;
}
</style>
<svg id="paths" width="800" height="600"></svg>