return once(map, "postrender", () => {
			return slowloop(
				points.map((p, i) => () => {
					let popup = popups[i];
					popup.show(p, smartpick(popup, p));
				}),
				0
			);
		})

	return () =>
		slowloop(
			[
				() => {
					if (cancel) throw "cancelled by user via pointermove";
					(popup.getMap().getTarget() as HTMLElement).remove();
					popup.getMap().setTarget(null);
					popup.destroy();
				}
			],
			delay
		);

		return once(map, "postrender", () => {
			return slowloop(
				Object.keys(popup.options.indicators).map((k: Positions) => () => {
					popup.setPositioning(k);
					popup.show(map.getView().getCenter(), `Popup with ${k}`);
					shouldEqual(popup.indicator.getElement().textContent, popup.options.indicators[k], k);
				}),
				200
			)
				.then(kill(popup))
				.catch(ex => {
					should(!ex, ex);
				});
		});

		return once(map, "postrender", () => {
			let c = map.getView().getCenter();
			let points = pair(range(3), range(3)).map(n => new ol.geom.Point([c[0] + n[0], c[1] + n[1]]));
			let count = 0;
			points.forEach((p, i) => {
				popup.pages.add(() => `Page ${i + 1}: visit counter: ${++count}`, p);
				shouldEqual(popup.pages.count, i + 1, `${i + 1} pages`);
			});

			let i = 0;
			return slowloop([() => popup.pages.goto(i++)], 100, popup.pages.count).then(() => {
				shouldEqual(
					popup.getElement().getElementsByClassName("ol-popup-content")[0].textContent,
					"Page 9: visit counter: 9",
					"last page contains correct text"
				);
			});
		}).then(kill(popup));

				return slowloop(loop, 0).then(() => slowloop(loop.reverse(), 0).then(() => div.remove()));

	it("renders a tooltip on a canvas", () => {
		let div = document.createElement("div");
		div.className = "canvas-container";
		let cssRemove = cssin(
			"canvas-test",
			`.canvas-container {
            display: inline-block;
            position: absolute;
            top: 20px;
            width: 200px;
			height: 200px;
			background: blue;
            border: 1px solid white;
        }`
		);
		div.innerHTML = "DIV CONTENT";
		let canvas = document.createElement("canvas");
		canvas.width = canvas.height = 200;
		canvas.style.position = "absolute";
		canvas.style.top = canvas.style.left = canvas.style.right = canvas.style.bottom = "0";
		div.appendChild(canvas);

		document.body.insertBefore(div, document.body.firstChild);

		let ctx = canvas.getContext("2d");
		ctx.strokeStyle = "white";
		ctx.lineWidth = 3;

		let clear = () => ctx.clearRect(0, 0, canvas.width, canvas.height);

		let loop = [
			() => {
				let points = rect([10, 10, 190, 190]);
				clear();
				ctx.beginPath();
				ctx.moveTo(points[0][0], points[0][1]);
				points.forEach(p => ctx.lineTo(p[0], p[1]));
				ctx.closePath();
				ctx.stroke();
			}
		];
		{
			let points = range(4).map(index =>
				callout(rect([25, 25, 175, 175]), { index: index, size: 25, width: 25, skew: 10, offset: 20 })
			);
			loop = loop.concat(
				points.map(points => () => {
					clear();
					ctx.beginPath();
					ctx.moveTo(points[0][0], points[0][1]);
					points.forEach(p => ctx.lineTo(p[0], p[1]));
					ctx.closePath();
					ctx.stroke();
				})
			);
		}
		return $.when(
			slowloop(
				range(100).map(n => () => {
					div.style.left = div.style.top = 10 * Math.sin((n * Math.PI) / 100) * n + "px";
				}),
				50
			),
			slowloop(loop, 200).then(() => {
				loop = [];
				let points = range(70).map(index =>
					callout(rect([20, 20, 180, 180]), {
						index: 0,
						size: 10,
						width: 20,
						skew: 0,
						offset: 2 * index - 70
					})
				);
				points = points.concat(
					range(140).map(index =>
						callout(rect([20, 20, 180, 180]), {
							index: 1,
							size: 10,
							width: 20,
							skew: 0,
							offset: index - 70
						})
					)
				);
				points = points.concat(
					range(140)
						.reverse()
						.map(index =>
							callout(rect([20, 20, 180, 180]), {
								index: 2,
								size: 10,
								width: 20,
								skew: 0,
								offset: index - 70
							})
						)
				);
				points = points.concat(
					range(140)
//.........这里部分代码省略.........