Use consistent monospace font, re-order SVG layers to work around PhantomJS rendering glitch, replace screenshots with commandline-generated versions [#52]

lib/sequence-diagram-web.js

@@ -352,7 +352,7 @@
 
 	/* eslint-disable sort-keys */ // Maybe later
 
-	const FONT = 'Helvetica,Arial,sans-serif';
+	const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
 	const LINE_HEIGHT = 1.3;
 
 	const WAVE = new WavePattern(6, 0.5);
@@ -753,7 +753,7 @@
 
 	/* eslint-disable sort-keys */ // Maybe later
 
-	const FONT$1 = 'Helvetica,Arial,sans-serif';
+	const FONT$1 = 'Helvetica,Arial,Liberation Sans,sans-serif';
 	const LINE_HEIGHT$1 = 1.3;
 
 	const WAVE$1 = new WavePattern(10, 1);
@@ -2593,7 +2593,7 @@
 
 	/* eslint-disable sort-keys */ // Maybe later
 
-	const FONT$2 = 'monospace';
+	const FONT$2 = 'Courier New,Liberation Mono,monospace';
 	const LINE_HEIGHT$2 = 1.3;
 
 	const WAVE$2 = new WavePattern(6, [
@@ -3980,7 +3980,7 @@
 			begin: /[\s_*`]~(?=\S)/g,
 			end: /\S~(?=[\s_*`])/g,
 		}, {
-			attrs: {'font-family': 'monospace'},
+			attrs: {'font-family': 'Courier New,Liberation Mono,monospace'},
 			begin: /[\s_*~.]`(?=\S)/g,
 			end: /\S`(?=[\s_*~.])/g,
 		},
@@ -7410,15 +7410,15 @@
 				this.themeDefs,
 				this.defs,
 				this.backgroundFills,
+				this.title,
+				this.unmaskedShapes,
 				el('g')
 					.attr('mask', 'url(#' + this.namespace + 'FullMask)')
 					.add(
 						this.agentLines,
 						this.blocks,
 						this.shapes
-					),
+					)
-				this.unmaskedShapes,
-				this.title
 			);
 		}
 

lib/sequence-diagram.js

@@ -352,7 +352,7 @@
 
 	/* eslint-disable sort-keys */ // Maybe later
 
-	const FONT = 'Helvetica,Arial,sans-serif';
+	const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
 	const LINE_HEIGHT = 1.3;
 
 	const WAVE = new WavePattern(6, 0.5);
@@ -753,7 +753,7 @@
 
 	/* eslint-disable sort-keys */ // Maybe later
 
-	const FONT$1 = 'Helvetica,Arial,sans-serif';
+	const FONT$1 = 'Helvetica,Arial,Liberation Sans,sans-serif';
 	const LINE_HEIGHT$1 = 1.3;
 
 	const WAVE$1 = new WavePattern(10, 1);
@@ -2593,7 +2593,7 @@
 
 	/* eslint-disable sort-keys */ // Maybe later
 
-	const FONT$2 = 'monospace';
+	const FONT$2 = 'Courier New,Liberation Mono,monospace';
 	const LINE_HEIGHT$2 = 1.3;
 
 	const WAVE$2 = new WavePattern(6, [
@@ -3980,7 +3980,7 @@
 			begin: /[\s_*`]~(?=\S)/g,
 			end: /\S~(?=[\s_*`])/g,
 		}, {
-			attrs: {'font-family': 'monospace'},
+			attrs: {'font-family': 'Courier New,Liberation Mono,monospace'},
 			begin: /[\s_*~.]`(?=\S)/g,
 			end: /\S`(?=[\s_*~.])/g,
 		},
@@ -7410,15 +7410,15 @@
 				this.themeDefs,
 				this.defs,
 				this.backgroundFills,
+				this.title,
+				this.unmaskedShapes,
 				el('g')
 					.attr('mask', 'url(#' + this.namespace + 'FullMask)')
 					.add(
 						this.agentLines,
 						this.blocks,
 						this.shapes
-					),
+					)
-				this.unmaskedShapes,
-				this.title
 			);
 		}
 

package.json

@@ -33,7 +33,8 @@
     "start": "http-server",
     "test": "npm run unit-test && npm run web-test && npm run lint && echo 'PASSED :)'",
     "unit-test": "rollup --config spec/support/rollup.config.js && node -r source-map-support/register node_modules/.bin/jasmine --config=spec/support/jasmine.json",
-    "web-test": "karma start spec/support/karma.conf.js --single-run"
+    "web-test": "karma start spec/support/karma.conf.js --single-run",
+    "web-test:manual": "MANUAL=1 karma start spec/support/karma.conf.js"
   },
   "devDependencies": {
     "buffer-to-stream": "^1.0.0",

scripts/sequence/SequenceDiagram_spec.mjs

@@ -72,19 +72,19 @@ describe('SequenceDiagram', () => {
 			'</rect>' +
 			'</mask>' +
 			'</defs>' +
-			'<g mask="url(#FullMask)">' +
-			'<g mask="url(#LineMask)"></g>' +
-			'</g>' +
 			'<g>' +
 			'<text' +
 			' x="0"' +
-			' font-family="Helvetica,Arial,sans-serif"' +
+			' font-family="Helvetica,Arial,Liberation Sans,sans-serif"' +
 			' font-size="20"' +
 			' line-height="1.3"' +
 			' text-anchor="middle"' +
 			' class="title"' +
 			' y="-10">My title here</text>' +
 			'</g>' +
+			'<g mask="url(#FullMask)">' +
+			'<g mask="url(#LineMask)"></g>' +
+			'</g>' +
 			'</svg>'
 		);
 	});

scripts/sequence/parser/MarkdownParser.mjs

@@ -20,7 +20,7 @@ const STYLES = [
 		begin: /[\s_*`]~(?=\S)/g,
 		end: /\S~(?=[\s_*`])/g,
 	}, {
-		attrs: {'font-family': 'monospace'},
+		attrs: {'font-family': 'Courier New,Liberation Mono,monospace'},
 		begin: /[\s_*~.]`(?=\S)/g,
 		end: /\S`(?=[\s_*~.])/g,
 	},

scripts/sequence/parser/MarkdownParser_spec.mjs

@@ -2,6 +2,8 @@ import {dom, textSizerFactory} from '../../../spec/stubs/TestDOM.mjs';
 import SVG from '../../svg/SVG.mjs';
 import parser from './MarkdownParser.mjs';
 
+const MONO_FONT = 'Courier New,Liberation Mono,monospace';
+
 describe('Markdown Parser', () => {
 	it('converts simple text', () => {
 		const formatted = parser('hello everybody');
@@ -110,7 +112,7 @@ describe('Markdown Parser', () => {
 
 		expect(formatted).toEqual([[
 			{attrs: null, text: 'a '},
-			{attrs: {'font-family': 'monospace'}, text: 'b'},
+			{attrs: {'font-family': MONO_FONT}, text: 'b'},
 			{attrs: null, text: ' c'},
 		]]);
 	});
@@ -120,7 +122,7 @@ describe('Markdown Parser', () => {
 
 		expect(formatted).toEqual([[
 			{attrs: null, text: 'a.'},
-			{attrs: {'font-family': 'monospace'}, text: 'b'},
+			{attrs: {'font-family': MONO_FONT}, text: 'b'},
 			{attrs: null, text: '.c'},
 		]]);
 	});

scripts/sequence/renderer/Renderer.mjs

@@ -129,15 +129,15 @@ export default class Renderer extends EventObject {
 			this.themeDefs,
 			this.defs,
 			this.backgroundFills,
+			this.title,
+			this.unmaskedShapes,
 			el('g')
 				.attr('mask', 'url(#' + this.namespace + 'FullMask)')
 				.add(
 					this.agentLines,
 					this.blocks,
 					this.shapes
-				),
+				)
-			this.unmaskedShapes,
-			this.title
 		);
 	}
 

scripts/sequence/themes/Basic.mjs

@@ -2,7 +2,7 @@
 
 import BaseTheme, {WavePattern} from './BaseTheme.mjs';
 
-const FONT = 'Helvetica,Arial,sans-serif';
+const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
 const LINE_HEIGHT = 1.3;
 
 const WAVE = new WavePattern(6, 0.5);

scripts/sequence/themes/Chunky.mjs

@@ -2,7 +2,7 @@
 
 import BaseTheme, {WavePattern} from './BaseTheme.mjs';
 
-const FONT = 'Helvetica,Arial,sans-serif';
+const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
 const LINE_HEIGHT = 1.3;
 
 const WAVE = new WavePattern(10, 1);

scripts/sequence/themes/Monospace.mjs

@@ -2,7 +2,7 @@
 
 import BaseTheme, {WavePattern} from './BaseTheme.mjs';
 
-const FONT = 'monospace';
+const FONT = 'Courier New,Liberation Mono,monospace';
 const LINE_HEIGHT = 1.3;
 
 const WAVE = new WavePattern(6, [

scripts/svg/TextSizer_webspec.mjs

@@ -2,6 +2,8 @@ import {SVGTextBlock, TextSizer} from './SVGTextBlock.mjs';
 import {DOMWrapper} from '../../spec/stubs/TestDOM.mjs';
 import SVG from './SVG.mjs';
 
+const MONO_FONT = 'Courier New,Liberation Mono,monospace';
+
 describe('TextSizer', () => {
 	const attrs = {'font-size': 10, 'line-height': 1.5};
 	let svg = null;
@@ -64,13 +66,13 @@ describe('TextSizer', () => {
 
 			const sizeMono = safeMeasure(attrs, [[
 				{text: 'foo'},
-				{attrs: {'font-family': 'monospace'}, text: 'bar'},
+				{attrs: {'font-family': MONO_FONT}, text: 'bar'},
 			]]);
 
 			const sizeMonoBold = safeMeasure(attrs, [[
 				{text: 'foo'},
 				{attrs: {
-					'font-family': 'monospace',
+					'font-family': MONO_FONT,
 					'font-weight': 'bolder',
 				}, text: 'bar'},
 			]]);

scripts/svg/VirtualTextSizer_nodespec.mjs

@@ -3,6 +3,8 @@ import {SVGTextBlock} from './SVGTextBlock.mjs';
 import VirtualTextSizer from './VirtualTextSizer.mjs';
 import {dom} from '../../spec/stubs/TestDOM.mjs';
 
+const MONO_FONT = 'Courier New,Liberation Mono,monospace';
+
 describe('VirtualTextSizer', () => {
 	const attrs = {'font-size': 10, 'line-height': 1.5};
 	let svg = null;
@@ -57,13 +59,13 @@ describe('VirtualTextSizer', () => {
 
 			const sizeMono = safeMeasure(attrs, [[
 				{text: 'foo'},
-				{attrs: {'font-family': 'monospace'}, text: 'bar'},
+				{attrs: {'font-family': MONO_FONT}, text: 'bar'},
 			]]);
 
 			const sizeMonoBold = safeMeasure(attrs, [[
 				{text: 'foo'},
 				{attrs: {
-					'font-family': 'monospace',
+					'font-family': MONO_FONT,
 					'font-weight': 'bolder',
 				}, text: 'bar'},
 			]]);

spec/images/AgentOptions.svg

@@ -1,4 +1,4 @@
-<svg width="134.67226123809814" height="60.6"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 134.67226123809814 60.6"><metadata>begin A, B, C
+<svg width="134.67335319519043" height="60.6"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 134.67335319519043 60.6"><metadata>begin A, B, C
 A is a database
 B is red
-C is a red database</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="134.67226123809814" height="60.6"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="134.67226123809814" height="60.6"></rect></mask></defs><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line x1="24.001698970794678" y1="30.6" x2="24.001698970794678" y2="50.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line><line x1="62.00509691238403" y1="30.6" x2="62.00509691238403" y2="50.6" class="agent-2-line" fill="none" stroke="#CC0000" stroke-width="1"></line><line x1="100.33952856063843" y1="30.6" x2="100.33952856063843" y2="50.6" class="agent-3-line" fill="none" stroke="#CC0000" stroke-width="1"></line></g><g></g><g><g class="region"><g><rect x="10" y="0" width="28.003397941589355" height="30.6" rx="14.001698970794678" ry="5" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M10 5a14.001698970794678 5 0 0 0 28.003397941589355 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><rect x="10" y="0" width="28.003397941589355" height="30.6" fill="transparent" class="outline"></rect><text x="24.001698970794678" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">A</text></g><g class="region"><rect x="48.003397941589355" y="5" width="28.003397941589355" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><rect x="48.003397941589355" y="5" width="28.003397941589355" height="25.6" fill="transparent" class="outline"></rect><text x="62.00509691238403" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="22">B</text></g><g class="region"><g><rect x="86.00679588317871" y="0" width="28.665465354919434" height="30.6" rx="14.332732677459717" ry="5" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M86.00679588317871 5a14.332732677459717 5 0 0 0 28.665465354919434 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><rect x="86.00679588317871" y="0" width="28.665465354919434" height="30.6" fill="transparent" class="outline"></rect><text x="100.33952856063843" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">C</text></g><g class="region"><rect x="19.001698970794678" y="40.6" width="10" height="10" fill="transparent" class="outline"></rect></g><g class="region"><rect x="57.00509691238403" y="40.6" width="10" height="10" fill="transparent" class="outline"></rect></g><g class="region"><rect x="95.33952856063843" y="40.6" width="10" height="10" fill="transparent" class="outline"></rect></g></g></g><g></g></svg>
+C is a red database</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="60.6" width="134.67335319519043" x="-5" y="-5"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="60.6" width="134.67335319519043" x="-5" y="-5"></rect></mask></defs><g></g><g></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line fill="none" stroke="#000000" stroke-width="1" x1="24.001875400543213" x2="24.001875400543213" y1="30.6" y2="50.6" class="agent-1-line"></line><line fill="none" stroke="#CC0000" stroke-width="1" x1="62.00562620162964" x2="62.00562620162964" y1="30.6" y2="50.6" class="agent-2-line"></line><line fill="none" stroke="#CC0000" stroke-width="1" x1="100.34042739868164" x2="100.34042739868164" y1="30.6" y2="50.6" class="agent-3-line"></line></g><g></g><g><g class="region"><g><g><rect rx="14.001875400543213" ry="5" height="30.6" width="28.003750801086426" x="10" y="0" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M10 5a14.001875400543213 5 0 0 0 28.003750801086426 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><g><text x="24.001875400543213" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">A</text></g></g><rect class="outline" fill="transparent" height="30.6" width="28.003750801086426" x="10" y="0"></rect></g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.003750801086426" x="48.003750801086426" y="5"></rect><g><text x="62.00562620162964" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="22">B</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.003750801086426" x="48.003750801086426" y="5"></rect></g><g class="region"><g><g><rect rx="14.332925796508789" ry="5" height="30.6" width="28.665851593017578" x="86.00750160217285" y="0" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M86.00750160217285 5a14.332925796508789 5 0 0 0 28.665851593017578 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><g><text x="100.34042739868164" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">C</text></g></g><rect class="outline" fill="transparent" height="30.6" width="28.665851593017578" x="86.00750160217285" y="0"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="19.001875400543213" y="40.6"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="57.00562620162964" y="40.6"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="95.34042739868164" y="40.6"></rect></g></g></g></svg>

spec/images/Connect.svg

@@ -1,2 +1,2 @@
-<svg width="96.00716400146484" height="70.6"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 96.00716400146484 70.6"><metadata>A -&gt; B
+<svg width="96.00749397277832" height="70.6"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 96.00749397277832 70.6"><metadata>A -&gt; B
-</metadata><defs></defs><defs><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="96.00716400146484" height="70.6"></rect></mask></defs><g mask="url(#R0LineMask)"><line x1="24.00179100036621" y1="25.6" x2="24.00179100036621" y2="60.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line><line x1="62.00537300109863" y1="25.6" x2="62.00537300109863" y2="60.6" class="agent-2-line" fill="none" stroke="#000000" stroke-width="1"></line></g><g></g><g><rect x="10" y="0" width="28.003582000732422" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><rect x="48.00358200073242" y="0" width="28.003582000732422" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><path d="M24.00179100036621 40.6L59.00537300109863 40.6" fill="none" stroke="#000000" stroke-width="1"></path><polygon points="56.50537300109863 45.6 61.50537300109863 40.6 56.50537300109863 35.6" fill="#000000" stroke-width="0" stroke-linejoin="miter"></polygon></g><g><g class="region"><rect x="10" y="0" width="28.003582000732422" height="25.6" fill="transparent" class="outline"></rect><text x="24.00179100036621" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g><g class="region"><rect x="48.00358200073242" y="0" width="28.003582000732422" height="25.6" fill="transparent" class="outline"></rect><text x="62.00537300109863" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">B</text></g><g class="region"><path d="M24.00179100036621,35.6L62.00537300109863,35.6L62.00537300109863,45.6L24.00179100036621,45.6Z" fill="transparent" class="outline"></path></g><g class="region"><rect x="19.00179100036621" y="50.6" width="10" height="10" fill="transparent" class="outline"></rect></g><g class="region"><rect x="57.00537300109863" y="50.6" width="10" height="10" fill="transparent" class="outline"></rect></g></g></svg>
+</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="70.6" width="96.00749397277832" x="-5" y="-5"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="70.6" width="96.00749397277832" x="-5" y="-5"></rect></mask></defs><g></g><g></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line fill="none" stroke="#000000" stroke-width="1" x1="24.00187349319458" x2="24.00187349319458" y1="25.6" y2="60.6" class="agent-1-line"></line><line fill="none" stroke="#000000" stroke-width="1" x1="62.00562047958374" x2="62.00562047958374" y1="25.6" y2="60.6" class="agent-2-line"></line></g><g></g><g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.00374698638916" x="10" y="0"></rect><g><text x="24.00187349319458" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.00374698638916" x="10" y="0"></rect></g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.00374698638916" x="48.00374698638916" y="0"></rect><g><text x="62.00562047958374" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">B</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.00374698638916" x="48.00374698638916" y="0"></rect></g><g class="region"><path d="M24.00187349319458 40.6L59.00562047958374 40.6" fill="none" stroke="#000000" stroke-width="1"></path><polygon points="56.50562047958374 45.6 61.50562047958374 40.6 56.50562047958374 35.6" fill="#000000" stroke-width="0" stroke-linejoin="miter"></polygon><path class="outline" fill="transparent" d="M24.00187349319458,35.6L62.00562047958374,35.6L62.00562047958374,45.6L24.00187349319458,45.6Z"></path></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="19.00187349319458" y="50.6"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="57.00562047958374" y="50.6"></rect></g></g></g></svg>

spec/images/Markdown.svg

@@ -1,3 +1,3 @@
-<svg width="86.025390625" height="98"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-43.0126953125 -93 86.025390625 98"><metadata>title "Foo **Bar**
+<svg width="86.02510070800781" height="98"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-43.012550354003906 -93 86.02510070800781 98"><metadata>title "Foo **Bar**
 _Baz_ `Zig`
-**_`Zag`_**"</metadata><defs></defs><defs><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-43.0126953125" y="-93" width="86.025390625" height="98"></rect></mask></defs><g mask="url(#R0LineMask)"></g><g></g><g></g><g></g><text x="0" font-family="sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-68">Foo <tspan font-weight="bolder">Bar</tspan></text><text x="0" font-family="sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-42"><tspan font-style="italic">Baz</tspan> <tspan font-family="monospace">Zig</tspan></text><text x="0" font-family="sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-16"><tspan font-style="italic" font-weight="bolder" font-family="monospace">Zag</tspan></text></svg>
+**_`Zag`_**"</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="98" width="86.02510070800781" x="-43.012550354003906" y="-93"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="98" width="86.02510070800781" x="-43.012550354003906" y="-93"></rect></mask></defs><g></g><g><text x="0" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-68">Foo <tspan font-weight="bolder">Bar</tspan></text><text x="0" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-42"><tspan font-style="italic">Baz</tspan> <tspan font-family="Courier New,Liberation Mono,monospace">Zig</tspan></text><text x="0" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-16"><tspan font-style="italic" font-weight="bolder" font-family="Courier New,Liberation Mono,monospace">Zag</tspan></text></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"></g><g></g><g></g></g></svg>

spec/images/SelfConnect.svg

@@ -1,5 +1,5 @@
-<svg width="69.3370221455892" height="147.6"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 69.3370221455892 147.6"><metadata>*A &lt;&lt;-&gt;&gt; A
+<svg width="69.33674081166586" height="147.6"  xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 69.33674081166586 147.6"><metadata>*A &lt;&lt;-&gt;&gt; A
 A &lt;&lt;-&gt;&gt; +A
 -A &lt;&lt;-&gt;&gt; A
 A &lt;&lt;-&gt;&gt; !A
-</metadata><defs></defs><defs><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="69.3370221455892" height="147.6"></rect></mask></defs><g mask="url(#R0LineMask)"><line x1="24.00184440612793" y1="25.6" x2="24.00184440612793" y2="63.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line><rect x="20.00184440612793" y="63.6" width="8" height="15.999999999999993" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></rect><line x1="24.00184440612793" y1="79.6" x2="24.00184440612793" y2="127.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line></g><g></g><g><rect x="10" y="0" width="28.00368881225586" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><path d="M39.670355478922524 12.8L49.337022145589195 12.8A6 6 0 0 1 55.337022145589195 18.8L55.337022145589195 29.6A6 6 0 0 1 49.337022145589195 35.6L25.668511072794598 35.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="43.337022145589195 9.8 39.337022145589195 12.8 43.337022145589195 15.8" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335177739461262 32.6 25.335177739461262 35.6 29.335177739461262 38.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M25.668511072794598 51.6L35.335177739461265 51.6A6 6 0 1 1 35.335177739461265 63.6L29.668511072794598 63.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335177739461262 48.6 25.335177739461262 51.6 29.335177739461262 54.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="33.33517773946126 60.6 29.335177739461262 63.6 33.33517773946126 66.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M29.668511072794598 79.6L39.335177739461265 79.6A6 6 0 1 1 39.335177739461265 91.6L25.668511072794598 91.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="33.33517773946126 76.6 29.335177739461262 79.6 33.33517773946126 82.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335177739461262 88.6 25.335177739461262 91.6 29.335177739461262 94.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M25.668511072794598 107.6L35.335177739461265 107.6A6 6 0 0 1 41.335177739461265 113.6L41.335177739461265 121.6A6 6 0 0 1 35.335177739461265 127.6L25.668511072794598 127.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335177739461262 104.6 25.335177739461262 107.6 29.335177739461262 110.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335177739461262 124.6 25.335177739461262 127.6 29.335177739461262 130.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M14.00184440612793 117.6l20 20m0 -20l-20 20" fill="none" stroke="#000000" stroke-width="1"></path></g><g><g class="region"><rect x="10" y="0" width="28.00368881225586" height="25.6" fill="transparent" class="outline"></rect><text x="24.00184440612793" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g><g class="region"><rect x="24.00184440612793" y="9.8" width="31.335177739461265" height="28.8" fill="transparent" class="outline"></rect></g><g class="region"><rect x="24.00184440612793" y="48.6" width="17.333333333333336" height="17.999999999999993" fill="transparent" class="outline"></rect></g><g class="region"><rect x="24.00184440612793" y="76.6" width="21.333333333333336" height="18" fill="transparent" class="outline"></rect></g><g class="region"><rect x="24.00184440612793" y="104.6" width="17.333333333333336" height="26" fill="transparent" class="outline"></rect></g><g class="region"><rect x="14.00184440612793" y="117.6" width="20" height="20" fill="transparent" class="outline"></rect></g></g></svg>
+</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="147.6" width="69.33674081166586" x="-5" y="-5"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="147.6" width="69.33674081166586" x="-5" y="-5"></rect></mask></defs><g></g><g></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line fill="none" stroke="#000000" stroke-width="1" x1="24.00170373916626" x2="24.00170373916626" y1="25.6" y2="63.6" class="agent-1-line"></line><rect fill="none" stroke="#000000" stroke-width="1" height="15.999999999999993" width="8" x="20.00170373916626" y="63.6" class="agent-1-line"></rect><line fill="none" stroke="#000000" stroke-width="1" x1="24.00170373916626" x2="24.00170373916626" y1="79.6" y2="127.6" class="agent-1-line"></line></g><g></g><g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.00340747833252" x="10" y="0"></rect><g><text x="24.00170373916626" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.00340747833252" x="10" y="0"></rect></g><g class="region"><rect class="outline" fill="transparent" height="28.8" width="31.335037072499595" x="24.00170373916626" y="9.8"></rect><path d="M39.670074144999184 12.8L49.336740811665855 12.8A6 6 0 0 1 55.336740811665855 18.8L55.336740811665855 29.6A6 6 0 0 1 49.336740811665855 35.6L25.668370405832928 35.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="43.336740811665855 9.8 39.336740811665855 12.8 43.336740811665855 15.8" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335037072499592 32.6 25.335037072499592 35.6 29.335037072499592 38.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><rect class="outline" fill="transparent" height="17.999999999999993" width="17.333333333333336" x="24.00170373916626" y="48.6"></rect><path d="M25.668370405832928 51.6L35.335037072499595 51.6A6 6 0 1 1 35.335037072499595 63.6L29.668370405832928 63.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335037072499592 48.6 25.335037072499592 51.6 29.335037072499592 54.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="33.33503707249959 60.6 29.335037072499592 63.6 33.33503707249959 66.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><rect class="outline" fill="transparent" height="18" width="21.333333333333336" x="24.00170373916626" y="76.6"></rect><path d="M29.668370405832928 79.6L39.335037072499595 79.6A6 6 0 1 1 39.335037072499595 91.6L25.668370405832928 91.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="33.33503707249959 76.6 29.335037072499592 79.6 33.33503707249959 82.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335037072499592 88.6 25.335037072499592 91.6 29.335037072499592 94.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><rect class="outline" fill="transparent" height="26" width="17.333333333333336" x="24.00170373916626" y="104.6"></rect><path d="M25.668370405832928 107.6L35.335037072499595 107.6A6 6 0 0 1 41.335037072499595 113.6L41.335037072499595 121.6A6 6 0 0 1 35.335037072499595 127.6L25.668370405832928 127.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335037072499592 104.6 25.335037072499592 107.6 29.335037072499592 110.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335037072499592 124.6 25.335037072499592 127.6 29.335037072499592 130.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><path d="M14.00170373916626 117.6l20 20m0 -20l-20 20" fill="none" stroke="#000000" stroke-width="1"></path><rect class="outline" fill="transparent" height="20" width="20" x="14.00170373916626" y="117.6"></rect></g></g></g></svg>

spec/readme_webspec.mjs

@@ -10,9 +10,6 @@ const SAMPLE_REGEX = new RegExp(
 const SCREENSHOT_BLACKLIST = [
 	// Renders differently but correctly in different browsers
 	'screenshots/Themes.png',
-
-	// For some reason this one breaks in headless Chrome
-	'screenshots/Markdown.png',
 ];
 
 function readError(err) {

spec/support/karma-hang.mjs

@@ -0,0 +1,27 @@
+/*
+ * This file is used when running npm run web-test:manual
+ * It causes the Karma runner to keep the results page open for 1 minute to
+ * help with debugging test issues.
+ */
+
+const delay = 60000;
+
+let originalTimeout = 0;
+
+afterAll((done) => {
+	window.console.log(
+		'Waiting ' + delay / 1000 +
+		' seconds before clearing (see karma-hang.mjs)...'
+	);
+	setTimeout(() => {
+		jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+		done();
+	}, delay);
+});
+
+// Appears to be called in reverse order
+afterAll(() => {
+	// Set timeout high for only this occurrence
+	originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+	jasmine.DEFAULT_TIMEOUT_INTERVAL = delay + 1000;
+});

spec/support/karma.conf.js

@@ -1,3 +1,7 @@
+/* eslint-disable no-process-env */ // Configuration section
+const manual = Boolean(process.env.MANUAL);
+/* eslint-enable no-process-env */
+
 /*
  * Firefox is supported, but tests will fail until version 60 is out
  * due to the use of es6 modules, so exclude it for now.
@@ -8,6 +12,10 @@ const SUPPORTED_BROWSERS = [
 	'safari',
 ];
 
+if(manual) {
+	SUPPORTED_BROWSERS.length = 0;
+}
+
 function is_supported_browser(name) {
 	const lcName = name.toLowerCase();
 	for(const fragment of SUPPORTED_BROWSERS) {
@@ -34,6 +42,11 @@ module.exports = (config) => {
 		exclude: ['node_modules/**/*_spec.*', 'lib/**', 'weblib/**'],
 		files: [
 			'node_modules/codemirror/lib/codemirror.js',
+			{
+				included: manual,
+				pattern: 'spec/support/karma-hang.mjs',
+				type: 'module',
+			},
 			{pattern: 'spec/helpers/**/*.mjs', type: 'module'},
 			{pattern: '**/*_spec.mjs', type: 'module'},
 			{pattern: '**/*_webspec.mjs', type: 'module'},