275 lines
6.4 KiB
HTML
275 lines
6.4 KiB
HTML
<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> |